/* ============================================================
   Dynamic theme layer.

   Loaded AFTER the compiled Tailwind stylesheet so every rule here
   wins over the build-time defaults. Nothing in this file contains a
   hardcoded brand colour: all values resolve to the CSS variables that
   includes/layout.php prints from the `theme` settings row, so the
   admin palette applies instantly on every page.
   ============================================================ */

/* Page canvas + base text ---------------------------------- */
body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

::selection {
  background-color: var(--brand);
  color: var(--brand-button-text);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

/* Primary / brand buttons ---------------------------------- */
.btn-brand,
.btn-brand:visited {
  background-color: var(--brand-button);
  color: var(--brand-button-text);
  border-color: var(--brand-button);
}

.btn-brand:hover,
.btn-brand:focus-visible {
  background-color: var(--brand-button-hover);
  color: var(--brand-button-text);
}

.btn-brand:disabled,
.btn-brand[disabled] {
  background-color: var(--brand-button);
}

/* Secondary / outline buttons that should follow the brand --- */
.btn-brand-outline,
.btn-brand-outline:visited {
  border-color: var(--brand-button);
  color: var(--brand-button);
  background-color: transparent;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus-visible {
  background-color: var(--brand-button-hover);
  color: var(--brand-button-text);
  border-color: var(--brand-button-hover);
}

/* Hero buttons use their own database-backed variables. */
.hero-actions a.hero-btn-one,
.hero-actions a.hero-btn-one:visited {
  background-color: var(--hero-btn1-bg);
  color: var(--hero-btn1-text);
  border-color: var(--hero-btn1-border);
}

.hero-actions a.hero-btn-one:hover,
.hero-actions a.hero-btn-one:focus-visible,
.hero-actions a.hero-btn-one:active {
  background-color: var(--hero-btn1-hover-bg);
  color: var(--hero-btn1-hover-text);
  border-color: var(--hero-btn1-hover-border);
}

.hero-actions a.hero-btn-two,
.hero-actions a.hero-btn-two:visited {
  background-color: var(--hero-btn2-bg);
  color: var(--hero-btn2-text);
  border-color: var(--hero-btn2-border);
}

.hero-actions a.hero-btn-two:hover,
.hero-actions a.hero-btn-two:focus-visible,
.hero-actions a.hero-btn-two:active {
  background-color: var(--hero-btn2-hover-bg);
  color: var(--hero-btn2-hover-text);
  border-color: var(--hero-btn2-hover-border);
}

.hero-actions a.hero-btn-one svg,
.hero-actions a.hero-btn-two svg {
  color: inherit;
  stroke: currentColor;
}

/* Product-card Order buttons are independent from global/header/hero/CTA. */
.product-card a.product-order-btn,
.product-card a.product-order-btn:visited {
  background-color: var(--product-order-bg);
  color: var(--product-order-text);
  border-color: var(--product-order-border);
}

.product-card a.product-order-btn:hover,
.product-card a.product-order-btn:focus-visible,
.product-card a.product-order-btn:active {
  background-color: var(--product-order-hover-bg);
  color: var(--product-order-hover-text);
  border-color: var(--product-order-hover-border);
}

.product-card a.product-order-btn svg {
  color: inherit;
  stroke: currentColor;
}

/* Links ----------------------------------------------------- */
.link-brand,
.prose a,
.rte-content a {
  color: var(--brand-link);
}

.link-brand:hover,
.prose a:hover,
.rte-content a:hover {
  color: var(--brand-link-hover);
}

/* Compiled utilities that must follow the admin palette ------
   These classes exist in the compiled Tailwind bundle with static
   values; re-pointing them here keeps the markup untouched while
   making the colours dynamic. */
.hover\:bg-primary\/90:hover,
.hover\:bg-primary\/80:hover {
  background-color: var(--brand-button-hover);
}

.hover\:text-\[var\(--brand\)\]:hover {
  color: var(--brand);
}

/* Form focus states ----------------------------------------- */
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: var(--brand);
}

/* Header / navbar --------------------------------------------
   Background and foreground come from the admin palette
   (--brand-header / --brand-header-text). When no header colour is
   saved, layout.php emits the original translucent white bar, so the
   default design is unchanged. The foreground is picked by contrast so
   menu text, logo, icons and buttons stay readable on any background —
   identical on desktop, tablet and mobile. */
.site-header {
  background-color: var(--brand-header);
  color: var(--brand-header-text);
  border-color: var(--brand-header-border);
}

/* Generic header links. The WhatsApp / Order buttons are excluded so the
   admin colours below are never overridden by this more specific selector. */
.site-header .site-brand-name,
.site-header nav a,
.site-header .site-actions a:not(.hdr-btn-order):not(.hdr-btn-wa) {
  color: var(--brand-header-text);
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--brand);
}

.site-header .site-header-btn:not(.hdr-btn-order):not(.hdr-btn-wa) {
  border-color: var(--brand-header-border);
  color: var(--brand-header-text);
  background-color: transparent;
}

.site-header .site-header-btn:not(.hdr-btn-order):not(.hdr-btn-wa):hover,
.site-header .site-header-btn:not(.hdr-btn-order):not(.hdr-btn-wa):focus-visible {
  background-color: color-mix(in srgb, var(--brand-header-text) 10%, transparent);
  color: var(--brand-header-text);
}

/* ============================================================
   Header buttons (WhatsApp + Order Now)

   Colours come from Admin → Settings → General → Header button
   settings and are printed as CSS variables by includes/layout.php.
   Every variable already carries the previous default as fallback,
   so an empty admin field keeps the original design untouched.

   The selectors are scoped through .site-actions so they outrank the
   generic header link rules above on desktop, tablet and mobile alike.
   No colour is hardcoded here — every value is a database-driven
   variable, so a save in the admin panel takes effect immediately.
   ============================================================ */
.site-header .site-actions a.hdr-btn-wa,
.site-header .site-actions a.hdr-btn-wa:visited {
  background-color: var(--hdr-wa-bg);
  color: var(--hdr-wa-text);
  border-color: var(--hdr-wa-border);
}

.site-header .site-actions a.hdr-btn-wa:hover,
.site-header .site-actions a.hdr-btn-wa:focus-visible {
  background-color: var(--hdr-wa-hover-bg);
  color: var(--hdr-wa-hover-text);
  border-color: var(--hdr-wa-hover-border);
}

.site-header .site-actions a.hdr-btn-order,
.site-header .site-actions a.hdr-btn-order:visited {
  background-color: var(--hdr-od-bg);
  color: var(--hdr-od-text);
  border-color: var(--hdr-od-border);
  border-width: 1px;
  border-style: solid;
}

.site-header .site-actions a.hdr-btn-order:hover,
.site-header .site-actions a.hdr-btn-order:focus-visible,
.site-header .site-actions a.hdr-btn-order:active {
  background-color: var(--hdr-od-hover-bg);
  color: var(--hdr-od-hover-text);
  border-color: var(--hdr-od-hover-border);
}

/* Icons inside the header buttons follow the button text colour. */
.site-header .site-actions a.hdr-btn-order svg,
.site-header .site-actions a.hdr-btn-wa svg {
  color: inherit;
  stroke: currentColor;
}


/* ============================================================
   Product grid — 2 per row on mobile, 3 on tablet, 4 on desktop.
   Single source of truth for the grid track count; the card design
   itself (typography, badges, buttons) is untouched.
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

/* Tablet */
@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Equal height cards, and children that may shrink inside a narrow column. */
.product-grid > * {
  min-width: 0;
  height: 100%;
}

/* Images always scale proportionally inside the square media box. */
.product-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Footer CTA section (the band above the footer)

   Managed in Admin → Settings → Footer CTA. These rules read their
   own --fcta-* variables, which includes/layout.php prints from the
   `footer_cta` settings row. They are completely independent from the
   header button variables (--hdr-*), so changing one never affects the
   other. Every variable already carries the previous default, so an
   empty admin field keeps the original design, spacing and layout.
   ============================================================ */
.fcta-box {
  background-color: var(--fcta-bg);
  color: var(--fcta-heading);
}

.fcta-heading {
  color: var(--fcta-heading);
}

.fcta-desc {
  color: var(--fcta-desc);
}

/* Order button */
.fcta-box a.fcta-btn,
.fcta-box a.fcta-btn:visited {
  background-color: var(--fcta-btn-bg);
  color: var(--fcta-btn-text);
  border-color: var(--fcta-btn-border);
  border-width: 1px;
  border-style: solid;
}

.fcta-box a.fcta-btn:hover,
.fcta-box a.fcta-btn:focus-visible,
.fcta-box a.fcta-btn:active {
  background-color: var(--fcta-btn-hover-bg);
  color: var(--fcta-btn-hover-text);
  border-color: var(--fcta-btn-hover-border);
}

/* Phone / secondary button */
.fcta-box a.fcta-phone,
.fcta-box a.fcta-phone:visited {
  background-color: var(--fcta-ph-bg);
  color: var(--fcta-ph-text);
  border-color: var(--fcta-ph-border);
  border-width: 1px;
  border-style: solid;
}

.fcta-box a.fcta-phone:hover,
.fcta-box a.fcta-phone:focus-visible,
.fcta-box a.fcta-phone:active {
  background-color: var(--fcta-ph-hover-bg);
  color: var(--fcta-ph-hover-text);
  border-color: var(--fcta-ph-hover-border);
}

/* Icons follow the button text colour. */
.fcta-box a.fcta-btn svg,
.fcta-box a.fcta-phone svg {
  color: inherit;
  stroke: currentColor;
}

/* Tighter closing-section rhythm without changing any internal layout. */
.faq-section {
  padding-bottom: 3rem;
}

.footer-cta-section {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.footer-cta-section + .site-footer {
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .faq-section {
    padding-bottom: 2rem !important;
  }

  .footer-cta-section {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }

  .footer-cta-section + .site-footer {
    margin-top: 0.75rem;
  }
}

/* Header buttons, unscoped safety net ------------------------
   Same dynamic variables as above, so the WhatsApp / Order buttons
   keep their admin colours wherever the markup is reused (mobile
   drawer, sticky bars). Kept after the scoped rules so nothing in the
   compiled Tailwind bundle can win. */
a.hdr-btn-wa,
a.hdr-btn-wa:visited {
  background-color: var(--hdr-wa-bg);
  color: var(--hdr-wa-text);
  border-color: var(--hdr-wa-border);
}

a.hdr-btn-wa:hover,
a.hdr-btn-wa:focus-visible {
  background-color: var(--hdr-wa-hover-bg);
  color: var(--hdr-wa-hover-text);
  border-color: var(--hdr-wa-hover-border);
}

a.hdr-btn-order,
a.hdr-btn-order:visited {
  background-color: var(--hdr-od-bg);
  color: var(--hdr-od-text);
  border-color: var(--hdr-od-border);
  border-width: 1px;
  border-style: solid;
}

a.hdr-btn-order:hover,
a.hdr-btn-order:focus-visible,
a.hdr-btn-order:active {
  background-color: var(--hdr-od-hover-bg);
  color: var(--hdr-od-hover-text);
  border-color: var(--hdr-od-hover-border);
}