/*
Theme Name:   Advertex — Calligraphy Gallery
Theme URI:    https://advertex.co.uk
Description:  Child theme for Advertex.co.uk. A gallery-led storefront for framed Islamic calligraphy and wall art, built on Woodmart.
Author:       Advertex
Template:     woodmart
Version:      1.1.0
Text Domain:  woodmart-child
*/

/* ==========================================================================
   1. DESIGN TOKENS

   Palette is taken directly from the Advertex logo: #FF0000 and #1A1A18,
   sampled from the artwork file rather than eyeballed.

   Red is used as an ACCENT — buttons, links, rules, hover — not as large
   fields of colour. At full saturation across big areas it would compete
   with the artwork, which on a gallery site has to win. Black carries the
   heavy sections; white and near-white carry the rest.
   ========================================================================== */

:root {
  /* Brand */
  --adv-red:        #FF0000;
  --adv-red-deep:   #D10000;  /* hover / pressed */
  --adv-red-tint:   #FFF0F0;  /* faint wash for notices */
  --adv-ink:        #1A1A18;  /* logo black */

  /* Neutrals */
  --adv-ink-soft:   #45443F;
  --adv-muted:      #6E6E66;
  --adv-line:       #E4E4E0;
  --adv-paper:      #FFFFFF;
  --adv-paper-deep: #F5F5F3;
  --adv-white:      #FFFFFF;

  /* Feedback */
  --adv-success:    #1F7A4C;
  --adv-error:      #D10000;

  /* Type
     Century Gothic is a licensed Monotype face and cannot legally be served
     as a webfont, so it is used where the visitor already has it — which on
     Windows is common, it ships with Office. Questrial is the closest free
     geometric fallback; Jost (Futura-derived) covers the weights Questrial
     lacks. The logo wordmark is itself a geometric sans, so the whole stack
     stays on-brand whichever link resolves. */
  --adv-font-display: "Century Gothic", "Questrial", "Jost", "URW Gothic", Futura, "Trebuchet MS", sans-serif;
  --adv-font-body:    "Century Gothic", "Questrial", "Jost", "URW Gothic", Futura, "Trebuchet MS", sans-serif;
  --adv-font-arabic:  "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;

  /* Layout
     1540px is the measured width of Woodmart's `.container` on this site —
     taken from the rendered element, NOT from the `site_width` theme setting,
     which reads 1222 and is not what the container actually resolves to
     (a WPBakery rule widens it via --content-width). Everything keys off this
     token so the hero copy starts on the same vertical line as the logo and
     every section aligns beneath it. Change it here and the site moves as one. */
  --adv-container: 1540px;
  --adv-gutter:    20px;
  --adv-edge:      max(var(--adv-gutter), calc(50vw - (var(--adv-container) / 2)));

  /* Rhythm */
  --adv-gap:     clamp(1rem, 2.5vw, 2rem);
  --adv-section: clamp(3.5rem, 8vw, 7rem);
  --adv-radius:  2px;

  /* Motion */
  --adv-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --adv-speed: 280ms;
}

/* ==========================================================================
   1b. WOODMART COLOUR VARIABLES

   This is the root cause of every purple on the site.

   Woodmart draws its accent from --wd-primary-color, which it generates into
   its own stylesheet and which resolved to rgb(73,51,209) — a purple. That
   single variable feeds nav underlines, the price slider, buttons, count
   bubbles, links and the checkout progress bar, which is why the purple kept
   reappearing somewhere new each time I fixed an individual selector.

   Filtering the `primary-color` THEME OPTION does not help: the generated CSS
   is built and cached outside the woodmart_get_opt() path, so the filtered
   value never reaches it. Redefining the variable does, everywhere at once.
   ========================================================================== */

/* !important is deliberate and necessary here. Woodmart emits this variable
   from an inline <style> block in the head, which can be output AFTER the
   child stylesheet — so winning on source order is not something we can rely
   on. Custom property declarations accept !important, and that beats the
   inline block regardless of which loads first. */
:root,
body,
.wd-page-wrapper {
  --wd-primary-color: #FF0000 !important;
  --wd-primary-color-rgb: 255, 0, 0 !important;
  --wd-alternative-color: #1A1A18 !important;
  --wd-link-color: #1A1A18 !important;
  --wd-link-color-hover: #FF0000 !important;
  --color-primary: #FF0000 !important;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background-color: var(--adv-paper);
  color: var(--adv-ink);
  font-family: var(--adv-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.title, .woodmart-title-container {
  font-family: var(--adv-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--adv-ink);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }

a { color: var(--adv-ink); text-decoration-color: var(--adv-line); }
a:hover { color: var(--adv-red); }

/* Arabic renders in a naskh face wherever it is marked up as such. */
[lang="ar"], .adv-arabic {
  font-family: var(--adv-font-arabic);
  direction: rtl;
  line-height: 2;
  font-size: 1.35em;
}

.adv-eyebrow {
  font-family: var(--adv-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adv-red);
  display: block;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   2c. HEADER

   The logo markup, file and CSS were all correct but it was still invisible:
   the general-header row was sliding under the fixed WordPress admin bar, and
   the logo — the tallest element in that row — was clipped out of sight.
   The right-hand tools were being cut off at the top by the same amount.

   Giving the row a real minimum height and centring its contents makes the
   logo's space non-negotiable regardless of what sits above it.
   ========================================================================== */

/* Row height. 96px left a dead gap under the logo because the row aligns its
   children to the top by default — the logo is only ~44px tall, so the rest
   of the row was empty space before the nav row began. Shorter row, and
   contents centred vertically. */
.whb-general-header,
.whb-general-header .whb-flex-row {
  min-height: 78px;
  align-items: center;
}

.whb-general-header .whb-column { align-items: center; }

/* Logo | nav | tools.
   Woodmart sets .whb-column{display:flex} with no justify-content, so it
   inherits flex-start — the nav pins to the left edge of the centre column,
   which begins exactly where the logo ends. Hence the two touching. The
   centre column already flexes (.whb-col-center{flex:1 1 0%}); it just needs
   its contents centring, plus a guaranteed gap so they can never collide. */
.whb-general-header .whb-col-left   { flex: 0 0 auto; }
.whb-general-header .whb-col-right  { flex: 0 0 auto; }

/* flex-basis MUST be 0, not auto. With `auto` the column is sized from its
   content and then grows, so it never spans the gap between logo and tools
   and `justify-content: center` centres within a box that is already only as
   wide as the nav — leaving the nav sitting left of true centre. Woodmart's
   own value (flex: 1 1 0%) was right; overriding it to auto was the bug. */
.whb-general-header .whb-col-center {
  flex: 1 1 0% !important;
  justify-content: center !important;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.whb-general-header .wd-header-main-nav { margin-inline: auto; }
.whb-general-header .wd-nav-main { justify-content: center; }

/* Below the desktop breakpoint the nav is replaced by the burger, so the
   centre column would otherwise hold an empty flexing gap. */
@media (max-width: 1024px) {
  .whb-general-header .whb-col-center { flex: 0 1 auto; }
}

/* Cart and wishlist count bubbles ship in Woodmart's default accent. */
.wd-cart-number,
.wd-tools-count,
.wd-header-wishlist .wd-tools-count {
  background-color: var(--adv-red) !important;
  color: var(--adv-white) !important;
}

/* Nav link states. Woodmart's default hover/active accent is its own colour,
   which showed as the purple on "Islamic Calligraphy" when open. */
.wd-nav-main > li > a,
.wd-nav-main > li > a .nav-link-text { color: var(--adv-ink); }

.wd-nav-main > li:hover > a,
.wd-nav-main > li.current-menu-item > a,
.wd-nav-main > li.current-menu-parent > a,
.wd-nav-main > li.current-menu-ancestor > a,
.wd-nav-main > li.wd-opened > a,
.wd-nav-main > li > a:hover {
  color: var(--adv-red) !important;
}

.wd-nav-main > li > a:after,
.wd-nav-main .wd-nav-opener { color: inherit; }

/* Dropdown / submenu links */
.wd-dropdown-menu a,
.wd-sub-menu a { color: var(--adv-ink-soft); }
.wd-dropdown-menu a:hover,
.wd-sub-menu a:hover { color: var(--adv-red) !important; }

/* Woodmart's rows carry generous default padding that compounds the gap. */
.whb-general-header .whb-flex-row { padding-block: 0; }

/*
 * THE reason the logo was invisible.
 *
 * Woodmart chains `max-height: inherit` down .site-logo > .wd-logo > img.
 * That value comes from the header row's configured height — and with no
 * header saved in the header builder there is nothing to inherit, so it
 * resolves to 0 and the image renders at zero pixels. The markup, the file
 * and the src were correct the whole time, which is why every check passed.
 */
.site-logo,
.site-logo .wd-logo,
.site-logo .wd-logo img,
.adv-logo-img {
  max-height: none !important;
}

.site-logo {
  display: flex;
  align-items: center;
  min-height: 1px;
}

.site-logo .wd-logo { display: inline-flex; align-items: center; }

.site-logo img,
.adv-logo-img {
  display: block;
  width: auto !important;
  max-width: 220px;
  height: auto !important;
}

@media (max-width: 1024px) {
  .whb-general-header,
  .whb-general-header .whb-flex-row { min-height: 72px; }
  .site-logo img, .adv-logo-img { max-width: 160px; }
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.btn, .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce .button,
input[type="submit"] {
  font-family: var(--adv-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--adv-radius);
  padding: 0.95em 2.1em;
  transition: background-color var(--adv-speed) var(--adv-ease),
              color var(--adv-speed) var(--adv-ease),
              border-color var(--adv-speed) var(--adv-ease);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.single_add_to_cart_button {
  background-color: var(--adv-red) !important;
  color: var(--adv-white) !important;
  border: 1px solid var(--adv-red) !important;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover {
  background-color: var(--adv-red-deep) !important;
  border-color: var(--adv-red-deep) !important;
  color: var(--adv-white) !important;
}

/* ==========================================================================
   4. PRODUCT GRID
   ========================================================================== */

.products .product-grid-item { background: transparent; }

.products .product-grid-item .product-image-link,
.products .product-grid-item .product-element-top {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--adv-paper-deep);
  display: block;
}

.products .product-grid-item .product-element-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--adv-ease);
}

.products .product-grid-item:hover .product-element-top img { transform: scale(1.04); }

.products .product-grid-item .wd-entities-title {
  font-family: var(--adv-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1.1rem;
  margin-bottom: 0.3rem;
}

.products .product-grid-item .price {
  font-family: var(--adv-font-body);
  font-size: 0.9375rem;
  color: var(--adv-ink-soft);
}

/* ==========================================================================
   5. SINGLE PRODUCT
   ========================================================================== */

.single-product div.product .product_title {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  margin-bottom: 0.5rem;
}

.single-product div.product .price {
  font-family: var(--adv-font-body);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--adv-ink);
}

.wd-swatch, .woodmart-swatch {
  border-radius: var(--adv-radius) !important;
  border: 1px solid var(--adv-line) !important;
  transition: border-color var(--adv-speed) var(--adv-ease),
              box-shadow var(--adv-speed) var(--adv-ease);
}

.wd-swatch.wd-active, .woodmart-swatch.active {
  border-color: var(--adv-red) !important;
  box-shadow: 0 0 0 1px var(--adv-red);
}

/* Disclosure that catalogue images are staged renders — see inc/woocommerce.php */
.adv-image-notice {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--adv-red);
  background: var(--adv-red-tint);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--adv-ink-soft);
}

/* ==========================================================================
   5b. PAGE TITLE BAR
   Woodmart renders this at #0a0a0a from generated CSS that the option filter
   cannot reach, so the contrast is enforced here instead. Belt and braces
   against the black-on-black it shipped with.
   ========================================================================== */

.page-title,
.wd-page-title {
  background-color: var(--adv-ink) !important;
}

/* .wd-title-wrapp is the actual container Woodmart puts the heading in —
   confirmed from the rendered markup rather than guessed. */
.page-title .wd-title-wrapp .entry-title,
.page-title .wd-title-wrapp h1,
.wd-page-title .wd-title-wrapp .entry-title,
.page-title h1.entry-title {
  color: var(--adv-white) !important;
}

/* Breadcrumbs carry two class names depending on context — .wd-breadcrumbs on
   single products (inside .single-breadcrumbs-wrapper) and
   .woocommerce-breadcrumb elsewhere. Both need lightening on the dark bar. */
.page-title .wd-breadcrumbs,
.page-title .wd-breadcrumbs a,
.page-title .wd-breadcrumbs span,
.page-title .woocommerce-breadcrumb,
.page-title .woocommerce-breadcrumb a,
.page-title .single-breadcrumbs-wrapper,
.page-title .single-breadcrumbs-wrapper a,
.page-title .wd-back-btn a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.page-title .wd-breadcrumbs a:hover,
.page-title .woocommerce-breadcrumb a:hover,
.page-title .single-breadcrumbs-wrapper a:hover { color: var(--adv-red) !important; }

/* Same treatment anywhere else a dark colour scheme wraps a breadcrumb. */
[class*="color-scheme-dark"] .wd-breadcrumbs,
[class*="color-scheme-dark"] .wd-breadcrumbs a,
[class*="color-scheme-dark"] .woocommerce-breadcrumb,
[class*="color-scheme-dark"] .woocommerce-breadcrumb a {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Category nav strip that sits under the title on shop archives.
   Its underline style draws the active marker in Woodmart's accent — the
   purple line under the current category. */
.wd-nav-product-cat > li > a { color: rgba(255, 255, 255, 0.82); }
.wd-nav-product-cat > li > a:hover,
.wd-nav-product-cat > li.wd-active > a { color: var(--adv-white); }
.wd-nav-product-cat .wd-entities-title { color: inherit; }

.wd-nav-product-cat > li > a:after,
.wd-nav-product-cat > li > a:before,
.wd-nav-product-cat > li.wd-active > a:after,
.wd-nav-product-cat > li.wd-active > a:before,
.wd-nav.wd-style-underline > li > a:after,
.wd-nav.wd-style-underline > li.wd-active > a:after {
  background-color: var(--adv-red) !important;
  border-color: var(--adv-red) !important;
}

.wd-nav-product-cat .wd-cat-count,
.wd-nav-product-cat > li > a span { color: inherit; }

/* ==========================================================================
   5c. STRAY DEFAULT COLOURS

   WooCommerce's price slider ships purple (#a46497) and Woodmart's secondary
   is orange (#fbbc34). The theme options are filtered to brand values, but
   these two are also hard-coded in plugin CSS, so they need overriding here.
   ========================================================================== */

.price_slider_wrapper .ui-slider .ui-slider-range,
.price_slider_wrapper .ui-slider .ui-slider-handle,
.wd-price-slider .ui-slider-range,
.wd-price-slider .ui-slider-handle {
  background-color: var(--adv-red) !important;
}

.price_slider_wrapper .price_label .from,
.price_slider_wrapper .price_label .to,
.widget_price_filter .price_label span {
  color: var(--adv-ink) !important;
  font-weight: 700;
}

/* WooCommerce and the block library both ship their own accent (a blue-purple
   around #6b46f0 / #7f54b3) on buttons, links and totals. Woodmart's theme
   options do not reach these, so they are pinned to brand here. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.wp-block-button__link,
.wp-element-button,
.widget button[type="submit"],
.wd-search-form button[type="submit"] {
  background-color: var(--adv-red) !important;
  border-color: var(--adv-red) !important;
  color: var(--adv-white) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--adv-red-deep) !important;
  border-color: var(--adv-red-deep) !important;
}

/* "Update cart" is a secondary action and should not shout. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="update_cart"]:disabled {
  background-color: transparent !important;
  border: 1px solid var(--adv-line) !important;
  color: var(--adv-ink-soft) !important;
}

/* Cart totals, prices and inline links */
.woocommerce .cart_totals .amount,
.woocommerce .cart-subtotal .amount,
.woocommerce .order-total .amount,
.woocommerce .product-subtotal .amount,
.woocommerce-Price-amount {
  color: var(--adv-ink) !important;
}

.woocommerce a.shipping-calculator-button,
.woocommerce-info a,
.woocommerce-message a {
  color: var(--adv-red) !important;
}

/* Checkout step indicator — the labels were dark on the black title bar */
.wd-checkout-steps li,
.wd-checkout-steps li a,
.wd-checkout-steps .wd-step-label { color: rgba(255, 255, 255, 0.7) !important; }
.wd-checkout-steps li.wd-active,
.wd-checkout-steps li.wd-active a { color: var(--adv-white) !important; }
.wd-checkout-steps li:before,
.wd-checkout-steps .wd-step-line { background-color: var(--adv-red) !important; }

/* ==========================================================================
   5d. FOOTER
   Woodmart's four columns default to equal widths with narrow gutters, which
   left the brand column cramped and a wide dead gap before "Shop".
   ========================================================================== */

.wd-footer {
  background-color: var(--adv-white) !important;
  border-top: 1px solid var(--adv-line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}

.wd-footer .container > .row,
.wd-footer .footer-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.wd-footer .footer-column { width: auto !important; max-width: none !important; }

.wd-footer .widget-title,
.wd-footer .widgettitle {
  font-family: var(--adv-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adv-ink);
  margin-bottom: 1.1rem;
}

.wd-footer .widget ul li { border: 0; padding: 0 0 0.6rem; }
.wd-footer .widget ul li a { color: var(--adv-ink-soft); }
.wd-footer .widget ul li a:hover { color: var(--adv-red); }
.wd-footer p { color: var(--adv-ink-soft); font-size: 0.9375rem; line-height: 1.6; }

.wd-copyrights {
  border-top: 1px solid var(--adv-line);
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 0.8125rem;
  color: var(--adv-muted);
}

@media (max-width: 900px) {
  .wd-footer .container > .row,
  .wd-footer .footer-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .wd-footer .container > .row,
  .wd-footer .footer-container { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. LAYOUT HELPERS
   ========================================================================== */

.adv-section { padding-block: var(--adv-section); }
.adv-section--deep { background-color: var(--adv-paper-deep); }
.adv-section--ink  { background-color: var(--adv-ink); color: var(--adv-paper); }
.adv-section--ink h1, .adv-section--ink h2, .adv-section--ink h3 { color: var(--adv-paper); }

.adv-rule {
  width: 44px;
  height: 3px;
  background: var(--adv-red);
  border: 0;
  margin: 1.5rem 0;
}

/* ==========================================================================
   7. ACCESSIBILITY
   ========================================================================== */

*:focus-visible {
  outline: 2px solid var(--adv-red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .products .product-grid-item:hover .product-element-top img { transform: none; }
}

.adv-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}