/*
Theme Name: Katana Hero's Vodka
Theme URI: https://example.com/katana-theme
Author: OpenAI Assistant
Author URI: https://example.com
Description: A bespoke WordPress theme that recreates the dark, luxurious look of the provided Katana Hero's Vodka landing page.  This theme is WooCommerce‑ready and uses the supplied Fugutails font along with Montserrat to mirror the typography and layout of the original design.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: katana-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready, one-column
*/

/*
 * Base typography
 * Load the custom Fugutails font (provided by the user) and Montserrat from Google Fonts.  
 * The Fugutails font is applied to prominent brand and display text, while Montserrat covers
 * navigation and body copy.  
 */

@font-face {
  font-family: 'Fugutails';
  src: url('assets/fonts/FUGUETAILS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Import Montserrat weights needed for the design */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Global resets and layout helpers */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background: #090807; /* deep black/brown backdrop */
  color: #f2e6d3; /* warm off‑white for text */
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button, .button, .preorder-button, .discover-button {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

/* Header styles */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.site-header .logo {
  font-family: 'Fugutails', serif;
  font-size: 28px;
  color: #d8b377; /* golden accent matching original design */
  letter-spacing: 2px;
  text-transform: uppercase;
}

.main-navigation .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

.main-navigation .menu li {
  position: relative;
}

.main-navigation .menu li a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #e0c89c;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.main-navigation .menu li a:hover {
  color: #f5d6a8;
}

.preorder-button {
  padding: 8px 18px;
  border: 2px solid #d8b377;
  border-radius: 999px;
  background: transparent;
  color: #d8b377;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Return link styling for product pages */
.return-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #d8b377;
  text-transform: uppercase;
  border: 2px solid #d8b377;
  padding: 6px 16px;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.3s ease, color 0.3s ease;
}

.return-link:hover {
  background: #d8b377;
  color: #090807;
}

/* Align header contents when using return link layout */
.site-header .header-right {
  margin-left: auto;
}

/* WooCommerce single product styling */
body.woocommerce-page.single-product {
  background: #0a0908;
  color: #e8d8c0;
}

/* Ensure the header stays on top but not overlapping admin bar */
body.woocommerce-page.single-product .site-header {
  position: relative;
  box-shadow: none;
}

/* Layout for product image and summary */
.single-product div.product {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.single-product div.product .woocommerce-product-gallery {
  width: 50%;
  padding-right: 40px;
}

.single-product div.product .summary {
  width: 50%;
  padding-left: 40px;
  color: #d8b377;
}

/* Product title */
.single-product div.product .product_title {
  font-family: 'Fugutails', serif;
  font-size: 36px;
  color: #eacda3;
  margin-bottom: 16px;
}

/* Price styling */
.single-product div.product .price {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  color: #cbb67e;
  margin-bottom: 24px;
}

/* Quantity input and Add to cart button */
.single-product div.product form.cart {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.single-product div.product form.cart .quantity {
  margin-right: 12px;
}

.single-product div.product form.cart button.button {
  background: #7e5bbe;
  color: #ffffff;
  border: none;
  padding: 10px 28px;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 0.3s ease;
}

.single-product div.product form.cart button.button:hover {
  background: #9c78d5;
}

/* Meta information */
.single-product div.product .product_meta {
  font-size: 14px;
  color: #a6906a;
}

/* Override default WooCommerce single product layout for our custom hero template. */
#product-details {
  background: #090807;
  padding: 80px 20px;
  text-align: center;
}

#product-details .product-title {
  font-family: 'Fugutails', serif;
  font-size: 40px;
  color: #d8b377;
  margin-bottom: 12px;
  text-transform: uppercase;
}

#product-details .price {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  color: #cbb67e;
  margin-bottom: 24px;
}

#product-details .product-cart form.cart {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

#product-details .product-cart .quantity {
  margin: 0;
}

#product-details .product-cart .single_add_to_cart_button {
  padding: 12px 32px;
  border: 2px solid #d8b377;
  background: transparent;
  color: #d8b377;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}

#product-details .product-cart .single_add_to_cart_button:hover {
  background: #d8b377;
  color: #090807;
}

#product-details .product-description {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  color: #d8c5a3;
}

#product-details .product-description h2 {
  font-family: 'Fugutails', serif;
  font-size: 28px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #d8b377;
}

#product-details .product-description ul.tabs {
  display: none; /* hide default tab titles; rely on our styling or keep minimal */
}

/* Make sure our hero section occupies full viewport height on product pages */
.product-hero {
  min-height: 100vh;
  padding-top: 140px; /* accommodate fixed header */
}

/* Responsive adjustments for product page */
@media (max-width: 900px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    width: 100%;
    padding: 20px 0;
  }
}

.preorder-button:hover {
  background: #d8b377;
  color: #090807;
}

/* Hero section */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 120px; /* leave room for fixed header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(30, 20, 10, 0.6) 0%, rgba(10, 5, 3, 1) 70%);
}

/* Subtle floating particles using pseudo‑elements */
.hero::before, .hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 204, 128, 0.15) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: floatParticles 20s linear infinite;
  opacity: 0.3;
}

.hero::after {
  background-size: 80px 80px;
  animation-duration: 60s;
}

@keyframes floatParticles {
  from { transform: translate(0, 0); }
  to { transform: translate(-100px, -200px); }
}

/* Vertical text on sides */
.vertical-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Fugutails', serif;
  font-size: 40px;
  color: #d8b377;
  letter-spacing: 4px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.2;
}

.vertical-text.left {
  left: 5%;
}

.vertical-text.right {
  right: 5%;
  transform: translateY(-50%) rotate(180deg);
}

.vertical-text span {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  margin-top: 20px;
}

/* Central circle with image */
.hero-image {
  position: relative;
  width: 60vmin;
  height: 60vmin;
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6), 0 0 25px rgba(216, 179, 119, 0.4);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Discover button */
.discover-button {
  margin-top: 40px;
  padding: 12px 32px;
  font-size: 14px;
  text-transform: uppercase;
  border: 2px solid #d8b377;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #d8b377;
  font-weight: 600;
  transition: all 0.3s ease;
}

.discover-button:hover {
  background: #d8b377;
  color: #090807;
  box-shadow: 0 0 10px rgba(216, 179, 119, 0.8);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .vertical-text {
    font-size: 28px;
  }
  .vertical-text span {
    font-size: 10px;
  }
  .hero-image {
    width: 70vmin;
    height: 70vmin;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: 10px 20px;
  }
  .main-navigation .menu {
    gap: 15px;
  }
  .vertical-text.left, .vertical-text.right {
    display: none; /* hide vertical text on very small screens to maintain readability */
  }
  .discover-button {
    margin-top: 20px;
    padding: 10px 24px;
  }
}