/* ==========================================================================
   TITAN BLINDS & FLOORING - THEME
   The ONE place for fonts, text sizes and colours on the customer website.
   Loaded on every customer page by header.php  (<link href="theme.css?v=11">).
   After editing this file, bump the ?v= number in header.php so browsers
   fetch the new version (the server tells browsers to keep CSS for a month).
   Full description: THEME.md
   ========================================================================== */

:root {
  /* ---------- Fonts (loaded from Google Fonts in header.php) ---------- */
  --tb-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;   /* page titles, section headings */
  --tb-font-body:    'DM Sans', -apple-system, 'Segoe UI', Arial, sans-serif; /* everything else */

  /* ---------- Type scale (desktop) ---------- */
  --tb-fs-display: 30px;  /* homepage section titles (e.g. "Shop by Style") */
  --tb-fs-title:   24px;  /* page + product titles (h1) */
  --tb-fs-h2:      18px;  /* section headings / subtitles */
  --tb-fs-h3:      16px;  /* card titles, product names, small headings */
  --tb-fs-body:    16px;  /* normal text, product information */
  --tb-fs-small:   14px;  /* secondary / supporting text, labels */
  --tb-fs-xs:      12.5px;/* metadata, helper text */
  --tb-fs-button:  15px;
  --tb-fs-input:   16px;  /* 16px stops phones zooming into form fields */
  --tb-fs-price:   22px;

  --tb-fw-regular: 400; --tb-fw-medium: 500; --tb-fw-semibold: 600; --tb-fw-bold: 700;
  --tb-lh-title: 1.25; --tb-lh-body: 1.55; --tb-lh-tight: 1.15;

  /* ---------- Brand ---------- */
  --tb-ink:      #22201C;  /* main text */
  --tb-ink-2:    #5E574C;  /* secondary text */
  --tb-muted:    #8A8274;  /* hints, placeholders */
  --tb-dark:     #1E1C19;  /* header, primary buttons */
  --tb-charcoal: #2E2B27;
  --tb-gold:     #C9A961;  /* brand accent */
  --tb-gold-dk:  #8C6D22;  /* gold text on light backgrounds (passes contrast) */
  --tb-gold-lt:  #EFE4C6;

  /* ---------- Backgrounds ---------- */
  --tb-bg:     #FFFFFF;
  --tb-cream:  #FBF8F1;  /* soft page sections */
  --tb-sand:   #F4EFE4;  /* panels, measuring box */
  --tb-stone:  #F3F2EF;  /* neutral grey sections */

  /* ---------- Soft supporting colours (background + matching text/icon colour) ---------- */
  --tb-sage:   #E7EFE3;  --tb-sage-ink:   #3F5E3A;
  --tb-peach:  #FBE8D8;  --tb-peach-ink:  #9A4E1C;
  --tb-lilac:  #ECE8F4;  --tb-lilac-ink:  #55468A;
  --tb-rose:   #F6E3DF;  --tb-rose-ink:   #8F3A2E;
  --tb-butter: #FAF1D3;  --tb-butter-ink: #7A5E10;
  --tb-sky:    #E4EDF3;  --tb-sky-ink:    #2F5470;
  --tb-orange: #E3A04A;  /* warm accent, e.g. free sample button */

  /* ---------- States ---------- */
  --tb-success: #2E7D32; --tb-success-bg: #E8F3E8;
  --tb-warning: #A05A00; --tb-warning-bg: #FDF1DC;
  --tb-error:   #B3261E; --tb-error-bg:   #FBEAE8;
  --tb-info:    #2F5470; --tb-info-bg:    #E4EDF3;

  /* ---------- Lines, corners, shadows ---------- */
  --tb-border: #E6E0D2; --tb-border-strong: #CFC8BA;
  --tb-radius: 8px; --tb-radius-sm: 5px; --tb-radius-pill: 999px;
  --tb-shadow-sm: 0 1px 2px rgba(30,28,25,.06);
  --tb-shadow:    0 6px 18px rgba(30,28,25,.08);

  /* Editorial storefront scale and layout tokens */
  --tb-display-hero: clamp(3.25rem, 6.3vw, 6rem);
  --tb-display-section: clamp(2rem, 3vw, 3rem);
  --tb-page-max: 1360px;
  --tb-page-gutter: clamp(20px, 5vw, 72px);
  --tb-section-space: clamp(76px, 9vw, 132px);
  --tb-ivory: #F7F5F0;
  --tb-champagne: #B69A68;
  --tb-stone-ink: #77766F;
  --tb-line-soft: rgba(36, 36, 33, .14);

  /* ---------- Buttons ---------- */
  --tb-btn-primary-bg: var(--tb-dark);  --tb-btn-primary-ink: #FFFFFF;   /* main actions */
  --tb-btn-accent-bg:  var(--tb-gold);  --tb-btn-accent-ink:  var(--tb-dark); /* highlight actions */

  /* ---------- Older page styles use these names: now calmer, solid colours ---------- */
  --gold-gradient: var(--tb-gold);
}

@media (max-width: 900px) {
  :root { --tb-fs-display: 26px; --tb-fs-title: 22px; --tb-fs-price: 21px; }
}
@media (max-width: 600px) {
  :root { --tb-fs-display: 23px; --tb-fs-title: 21px; --tb-fs-h2: 17px; --tb-fs-body: 15.5px; --tb-fs-small: 13.5px; }
}

/* ---------- Base typography (applies everywhere) ---------- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-size: var(--tb-fs-body); line-height: var(--tb-lh-body); color: var(--tb-ink); -webkit-font-smoothing: antialiased; }
body, p, li, a, label, input, button, select, textarea, td, th, dd, dt, small, strong, b, em, div, span:not([class*="fa"]) {
  font-family: var(--tb-font-body) !important;
}
h1, h2, h3, .playfair, .section-title, .page-title, .hero-title {
  font-family: var(--tb-font-heading) !important;
  font-weight: var(--tb-fw-semibold);
  letter-spacing: -0.005em;
}
h4, h5, h6 { font-family: var(--tb-font-body) !important; font-weight: var(--tb-fw-bold); }
h1 { font-size: var(--tb-fs-title); line-height: var(--tb-lh-title); }
h4 { font-size: var(--tb-fs-h3); }
input, select, textarea { font-size: var(--tb-fs-input); }
.product-name, .product-card h3, .product-card-name, .pp-card h3 {
  font-family: var(--tb-font-body) !important; font-weight: var(--tb-fw-medium);
}

/* Section titles used by the older pages (homepage, category pages) - one size everywhere */
.section-title, .section-header h2, .page-title { font-size: var(--tb-fs-display); line-height: var(--tb-lh-title); }
.section-header p { font-size: var(--tb-fs-body); color: var(--tb-ink-2); }

/* ---------- Buttons: solid colours instead of gold gradients ---------- */
.btn-primary, .submit-btn {
  background: var(--tb-btn-primary-bg) !important; color: var(--tb-btn-primary-ink) !important;
  font-size: var(--tb-fs-button); font-weight: var(--tb-fw-semibold); box-shadow: none;
}
.btn-primary:hover, .submit-btn:hover { background: #000 !important; }
.btn-accent { background: var(--tb-btn-accent-bg); color: var(--tb-btn-accent-ink); }

/* ---------- Soft colour helpers (use on any section, card or icon) ---------- */
.tb-tint-sage   { background: var(--tb-sage);   color: var(--tb-sage-ink); }
.tb-tint-peach  { background: var(--tb-peach);  color: var(--tb-peach-ink); }
.tb-tint-lilac  { background: var(--tb-lilac);  color: var(--tb-lilac-ink); }
.tb-tint-rose   { background: var(--tb-rose);   color: var(--tb-rose-ink); }
.tb-tint-butter { background: var(--tb-butter); color: var(--tb-butter-ink); }
.tb-tint-sky    { background: var(--tb-sky);    color: var(--tb-sky-ink); }

/* ---------- Homepage: varied soft colours instead of all-gold ---------- */
.services-grid .service-card .service-icon { width: 64px; height: 64px; font-size: 1.5rem; }
.services-grid .service-card:nth-child(4n+1) .service-icon { background: var(--tb-sage);  color: var(--tb-sage-ink); }
.services-grid .service-card:nth-child(4n+2) .service-icon { background: var(--tb-peach); color: var(--tb-peach-ink); }
.services-grid .service-card:nth-child(4n+3) .service-icon { background: var(--tb-lilac); color: var(--tb-lilac-ink); }
.services-grid .service-card:nth-child(4n+4) .service-icon { background: var(--tb-sky);   color: var(--tb-sky-ink); }
.services-grid .service-card h3 { font-size: var(--tb-fs-h2); }
.services-grid .service-card p { font-size: var(--tb-fs-small); }
.service-card-link { color: var(--tb-gold-dk) !important; }
.inquiry-header { background: var(--tb-butter) !important; }
.inquiry-header h2 { color: var(--tb-ink) !important; font-size: var(--tb-fs-display); }
.inquiry-header p { color: var(--tb-ink-2) !important; }
.top-products-section .product-category { color: var(--tb-gold-dk); }
.top-products-section .current-price { color: var(--tb-ink); }
.top-products-section .current-price small { font-size: var(--tb-fs-xs); color: var(--tb-ink-2); font-weight: 400; }
.promotion-badge { background: var(--tb-butter) !important; color: var(--tb-butter-ink) !important; }

/* ---------- Product listing helpers ---------- */
.guide-btn.measure { background: var(--tb-sage) !important; color: var(--tb-sage-ink) !important; border-color: transparent !important; }
.guide-btn.fit     { background: var(--tb-lilac) !important; color: var(--tb-lilac-ink) !important; border-color: transparent !important; }
.price-row .price-unit { font-size: var(--tb-fs-xs); color: var(--tb-ink-2); }

/* ---------- Header account menu: undo the round icon-button style for links inside the dropdown ---------- */
.header-icons .dropdown-menu a.dropdown-item {
  width: auto; height: auto; border-radius: 0; background: transparent; transform: none;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 11px 16px; color: var(--tb-ink); font-size: var(--tb-fs-small); font-weight: 500;
}
.header-icons .dropdown-menu a.dropdown-item:hover { background: var(--tb-cream); color: var(--tb-gold-dk); transform: none; padding-left: 20px; }
.header-icons .dropdown-menu a.dropdown-item i { color: var(--tb-gold-dk); width: 18px; text-align: center; }
.header-icons .dropdown-menu a.dropdown-item.logout, .header-icons .dropdown-menu a.dropdown-item.logout i { color: var(--tb-error); }
.header-icons .dropdown-menu .dropdown-badge { position: static; margin-left: auto; }