/*
Theme Name: City Bag Kasaragod Theme
Theme URI: https://citybagkasaragod.com/
Author: Antigravity
Description: A premium, fast-loading, local SEO-optimized theme for City Bag in Kasaragod, Kerala. Features elegant dark/gold accents, mobile-first responsiveness, and structured local schema markup.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-menu, full-width-template, translation-ready, accessibility-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Color Palette (Sleek Slate & Warm Gold Accent) */
  --bg-primary: #0f172a;      /* Slate 900 */
  --bg-secondary: #1e293b;    /* Slate 800 */
  --bg-tertiary: #334155;     /* Slate 700 */
  --bg-light: #f8fafc;        /* Slate 50 */
  --bg-card: rgba(30, 41, 59, 0.7);
  
  --text-primary: #f8fafc;    /* Slate 50 */
  --text-secondary: #94a3b8;  /* Slate 400 */
  --text-muted: #64748b;      /* Slate 500 */
  
  --accent-gold: #fbbf24;     /* Amber 400 */
  --accent-gold-hover: #f59e0b; /* Amber 500 */
  --accent-gold-soft: rgba(251, 191, 36, 0.1);
  --accent-emerald: #10b981;  /* Emerald 500 (WhatsApp) */
  --accent-emerald-hover: #059669;
  
  --border-glass: rgba(255, 255, 255, 0.08);
  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 0.75rem;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), transparent);
  border-radius: 2px;
}

h2.center-align {
  text-align: center;
}
h2.center-align::after {
  left: 50%;
  transform: translateX(-50%);
}

p {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Header & Navigation */
header {
  background-color: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-glass);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  font-size: 2rem;
  color: var(--accent-gold);
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, var(--accent-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Site logo (header & footer) — same image asset everywhere */
.site-logo-link {
  display: flex;
  align-items: center;
}

.site-logo {
  display: block;
  width: auto;
  max-width: 100%;
}

/* Header logo responsive sizing — constrained by height so the logo
   sits neatly inside the 80px header bar, width scales proportionally */
.header-logo {
  height: 73px; /* Desktop 1200px+ (was 52px, +40%) */
  max-width: 252px;
}

@media (max-width: 1199px) {
  .header-logo {
    height: 67px; /* Laptop 992px–1199px (was 48px, +40%) */
    max-width: 231px;
  }
}

@media (max-width: 991px) {
  .header-logo {
    height: 62px; /* Tablet 768px–991px (was 44px, +40%) */
    max-width: 210px;
  }
}

@media (max-width: 767px) {
  .header-logo {
    height: 49px; /* Mobile up to 767px (was 38px, +30%) */
    max-width: 176px;
  }
}

/* Footer logo responsive sizing */
.footer-logo {
  height: 84px; /* Desktop (was 60px, +40%) */
  max-width: 252px;
}

@media (max-width: 991px) {
  .footer-logo {
    height: 73px; /* Tablet (was 52px, +40%) */
    max-width: 224px;
  }
}

@media (max-width: 767px) {
  .footer-logo {
    height: 60px; /* Mobile (was 46px, +30%) */
    max-width: 189px;
  }
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 1.75rem;
  align-items: center;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-gold);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.75rem;
  cursor: pointer;
}

/* "Bags" dropdown nav item — desktop: hover to reveal, mobile: tap the
   caret to expand in place (see main.js). URLs of the child pages are
   untouched; this is purely a nav grouping, not WP page hierarchy. */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.dropdown-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.5rem 0.15rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.nav-item-dropdown:hover .dropdown-toggle,
.nav-item-dropdown.open .dropdown-toggle {
  color: var(--accent-gold);
  transform: rotate(180deg);
}

.dropdown-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  min-width: 210px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  box-shadow: var(--shadow-premium);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition-smooth);
  z-index: 200;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.dropdown-link:hover {
  background-color: var(--accent-gold-soft);
  color: var(--accent-gold);
}

/* Floating Actions */
.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  font-size: 1.5rem;
  transition: var(--transition-smooth);
}

.float-btn:hover {
  transform: translateY(-5px);
}

.float-whatsapp {
  background-color: var(--accent-emerald);
}

.float-whatsapp:hover {
  background-color: var(--accent-emerald-hover);
}

.float-phone {
  background-color: var(--accent-gold);
  color: var(--bg-primary);
}

.float-phone:hover {
  background-color: var(--accent-gold-hover);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition-smooth);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}

.btn-primary {
  background-color: var(--accent-gold);
  color: var(--bg-primary);
}

.btn-primary:hover {
  background-color: var(--accent-gold-hover);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
}

.btn-outline:hover {
  background-color: var(--border-glass);
  border-color: var(--text-secondary);
}

.btn-whatsapp {
  background-color: var(--accent-emerald);
  color: white;
}

.btn-whatsapp:hover {
  background-color: var(--accent-emerald-hover);
  transform: translateY(-2px);
}

/* Cards & Glassmorphism */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-premium);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  transform: translateY(-5px);
  border-color: rgba(251, 191, 36, 0.3);
}

/* Grid Layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Breadcrumbs */
.breadcrumbs {
  padding: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs a:hover {
  color: var(--accent-gold);
}

.breadcrumbs span.separator {
  color: var(--text-muted);
}

.breadcrumbs span.current {
  color: var(--text-primary);
  font-weight: 500;
}

/* Products/Catalog Grid */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-image {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-glass);
}

.product-image svg {
  width: 60%;
  height: 60%;
  fill: var(--text-muted);
  transition: var(--transition-smooth);
}

.product-card:hover .product-image svg {
  transform: scale(1.1) rotate(2deg);
  fill: var(--accent-gold);
}

.product-details {
  margin-top: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-brand {
  font-size: 0.75rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.product-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 1rem;
  margin-top: auto;
}

.product-price span {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Local FAQ section */
.faq-accordion {
  margin-top: 2rem;
}

.faq-item {
  border-bottom: 1px solid var(--border-glass);
  padding: 1.25rem 0;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.faq-item.active .faq-question::after {
  content: '−';
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.faq-answer p {
  padding-top: 0.75rem;
}

.faq-item.active .faq-answer {
  max-height: 200px;
}

/* Footer Section */
footer {
  background-color: #0b0f19;
  border-top: 1px solid var(--border-glass);
  padding: 4rem 0 2rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-heading {
  font-size: 1.1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--accent-gold);
  padding-left: 4px;
}

.footer-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-info p {
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.footer-info svg {
  width: 16px;
  height: 16px;
  fill: var(--accent-gold);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-bottom {
  border-top: 1px solid var(--border-glass);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .nav-menu {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--bg-primary);
    flex-direction: column;
    padding: 3rem 1.5rem;
    gap: 2rem;
    align-items: flex-start;
    transition: var(--transition-smooth);
    border-top: 1px solid var(--border-glass);
    z-index: 99;
  }
  .nav-menu.open {
    left: 0;
  }
  .nav-toggle {
    display: block;
  }
  .nav-item-dropdown {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .dropdown-toggle {
    position: absolute;
    right: 0;
    top: 0.5rem;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
  }
  .dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin-top: 0.75rem;
    box-shadow: none;
    background-color: transparent;
    border: none;
    border-left: 2px solid var(--border-glass);
    border-radius: 0;
    padding: 0 0 0 1rem;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item-dropdown.open .dropdown-menu {
    display: block;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  h1 {
    font-size: 2rem;
  }
}

/* Home page hero section — mobile-only shortening.
   Overrides inline styles on the hero section/badge/heading/subtitle
   (via !important, needed since inline styles otherwise win) so the
   heading wraps into far fewer lines and the whole hero block is
   roughly half the height it was. Desktop and tablet are completely
   untouched — nothing outside this max-width:767px query targets
   these classes. */
@media (max-width: 767px) {
  /* Stack the hero heading/text and the hero image into a single
     column on mobile (overrides the inline 2-column grid, which
     needs !important since inline styles otherwise take priority). */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .hero-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-badge {
    margin-bottom: 0.75rem !important;
  }
  .hero-heading {
    font-size: 1.9rem !important;   /* ~30px — wraps to ~3 lines instead of 7 */
    line-height: 1.2 !important;
    margin-bottom: 0.6rem !important;
    max-width: 100% !important;
  }
  .hero-subtitle {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
  }
}

/* "Serving Kasaragod Since 2000" (About/Trust Badges) section — mobile
   overflow fix. Root cause: the stats row (25+ / 4.6★ / 100%) is a
   flex row with no flex-wrap, so at narrow widths its three items
   can't shrink enough and force the row (and the page) wider than the
   viewport. Fixing that, plus explicit 100%/box-sizing safeguards on
   the heading, paragraphs and reviews card per the brief. Desktop and
   tablet are untouched — nothing here applies above 767px. */
@media (max-width: 767px) {
  .about-grid {
    width: 100%;
    max-width: 100%;
  }
  .about-content,
  .about-heading,
  .about-para,
  .reviews-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .about-heading {
    font-size: 2.5rem !important; /* ~40px, within the 38–44px target */
    line-height: 1.15 !important;
  }
  .about-para {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .about-stats {
    flex-wrap: wrap !important;
    row-gap: 1.25rem !important;
    column-gap: 1rem !important;
  }
  .about-stats > div {
    flex: 1 1 28%;
    min-width: 0;
  }
  .about-stats > div > div:first-child {
    font-size: 1.9rem !important; /* smaller responsive stat number */
  }
  .reviews-card {
    padding: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .grid-3, .grid-4, .grid-2 {
    grid-template-columns: 1fr;
  }
  .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .floating-actions {
    bottom: 16px;
    right: 16px;
  }
}