/* Rooted — brand tokens + custom cursor, SITE-WIDE.  v1.1.0
 *
 * Maps the Rooted palette + typography onto Astra's global CSS variables, so
 * the 7 pages that were running Astra defaults (Services, Blog, Contact, Shop,
 * Store List, Cart, My Account) inherit the brand instead.
 *
 * BEFORE: Playfair Display / Libre Baskerville / Rubik, greens #223b37 +
 *         #355c56, white background.
 * AFTER:  Cormorant Garamond / Cinzel / DM Sans, forest #1D3D2A, cream #FAF6EE.
 *
 * Tokens only — deliberately no WooCommerce/Dokan template surgery here.
 * Fully reversible: dequeue this one file and Astra's own settings return.
 */

/* 1) Brand tokens, available on every page (homepage.css defines these too,
      but only loads on the homepage). */
:root {
  --forest:     #1D3D2A;
  --gold:       #C9A84C;
  --gold-lt:    #E2C97E;
  --gold-dk:    #A07830;
  --cream:      #FAF6EE;
  --parchment:  #F0E9D8;
  --text:       #2A2010;
  --text-mid:   #5A4A30;
  --text-lt:    #8A7A60;
}

/* 2) Remap Astra's global palette to the brand palette.
      Astra generates its entire stylesheet from these nine variables, so
      overriding them rebrands headings, links, buttons, borders and the
      WooCommerce/Dokan chrome in one move. */
:root {
  --ast-global-color-0: #1D3D2A;  /* was #223b37 — primary / links / buttons  */
  --ast-global-color-1: #2A4D37;  /* was #355c56 — hover state                */
  --ast-global-color-2: #2A2010;  /* was #020202 — headings                   */
  --ast-global-color-3: #5A4A30;  /* was #353535 — body text                  */
  --ast-global-color-4: #FAF6EE;  /* was #ffffff — page background (cream)    */
  --ast-global-color-5: #FFFFFF;  /*   unchanged — cards/surfaces stay white  */
  --ast-global-color-6: #DCD2BC;  /* was #c0c0c0 — borders, warmed to parchment */
  --ast-global-color-7: #1D3D2A;  /* was #011114 — dark surfaces / footer     */
  --ast-global-color-8: #000000;  /*   unchanged                              */
}

/* 3) Typography. Astra sets Rubik/Playfair via generated CSS with high
      specificity, so these need to be explicit. */
body,
.ast-container,
button, input, select, textarea,
.woocommerce-page, .dokan-store {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product_title,
.dokan-store-name, .store-name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--text);
  letter-spacing: .01em;
}

/* The display face — reserved for top-level page titles, as on the homepage. */
h1, .entry-title, .page-title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  letter-spacing: .04em;
}

/* 4) Buttons — match the homepage .btn treatment (uppercase, wide tracking). */
.ast-button, .button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.dokan-btn, .dokan-btn-theme {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* 5) Page background — Astra paints white on several templates directly. */
body,
.ast-separate-container,
.woocommerce-page .ast-separate-container {
  background-color: var(--cream);
}


/* ==========================================================================
   CUSTOM CURSOR (merged in from cursor.css in v1.1.0 — one request, not two)
   ========================================================================== */

html, body { cursor: none; }

a, button, .btn, [role="button"], input[type="submit"], input[type="button"],
label, summary, select { cursor: none; }

/* Text fields too — the UA stylesheet sets cursor:text on these and beats an
   inherited value, so without naming them explicitly you get BOTH the OS
   I-beam and the branded dot. Measured and confirmed in-browser. */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
[contenteditable="true"] { cursor: none; }

#cur {
  position: fixed; width: 9px; height: 9px;
  background: var(--forest, #1D3D2A);
  border-radius: 50%; pointer-events: none;
  z-index: 9999; top: 0; left: 0; will-change: transform;
  opacity: 0; transition: opacity .18s ease;
}

#cur-ring {
  position: fixed; width: 32px; height: 32px;
  border: 1.5px solid rgba(29,61,42,.28);
  border-radius: 50%; pointer-events: none;
  z-index: 9998; top: 0; left: 0; will-change: transform;
  opacity: 0;
  transition: width .25s, height .25s, border-color .25s, opacity .18s ease;
}

/* G1 fix: the dot used to render at (-4,-4) — a stray mark in the top-left
   corner of every page — until the visitor first moved the mouse. It now
   starts invisible and fades in once we know where the pointer actually is. */
body.cursor-ready #cur,
body.cursor-ready #cur-ring { opacity: 1; }

body.hovering #cur-ring {
  width: 44px; height: 44px; border-color: rgba(160,120,48,.4);
}

/* Touch devices and any pointer that can't hover get the real cursor back.
   The homepage never had this; About and Join always did. */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  html, body,
  a, button, .btn, [role="button"], input[type="submit"], input[type="button"],
  label, summary, select,
  input:not([type="submit"]):not([type="button"]), textarea,
  [contenteditable="true"] { cursor: auto; }
  #cur, #cur-ring { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #cur-ring { transition: opacity .18s ease; }
}

@media print { #cur, #cur-ring { display: none !important; } }

/* ── OPT-OUT (R-13 / checkout conversion) ──
   Site-wide cursor:none was the explicit call, including over form fields.
   If checkout conversion ever suffers, uncomment this to hand the real cursor
   back on the checkout only. No other change needed.
.woocommerce-checkout, .woocommerce-checkout * { cursor: auto !important; }
.woocommerce-checkout #cur, .woocommerce-checkout #cur-ring { display: none; }
*/


/* ==========================================================================
   v1.2.0 — BACKGROUNDS, GLOBAL MARQUEE, IMAGE FIT
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) BACKGROUNDS — one canvas colour across the whole site.
   Measured before this: header cream #FAF6EE, page canvas WHITE (painted by
   .ast-plain-container, not by body), footer GREY #F5F5F5. Setting body alone
   did nothing because the container paints over it — so the container is
   named explicitly here.
   -------------------------------------------------------------------------- */
html,
body,
.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container,
.woocommerce-page .ast-plain-container,
.woocommerce-page .ast-separate-container,
.ast-separate-container .ast-woocommerce-container {
  background-color: var(--cream);
}

/* Cards and panels stay white so they still read as raised surfaces. */
.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container #secondary .widget,
.ast-separate-container .ast-archive-description {
  background-color: #ffffff;
}

/* Footer — was #F5F5F5, the last grey on the page.
   Astra's footer builder sets this with an ATTRIBUTE selector
   (.site-primary-footer-wrap[data-section="section-primary-footer-builder"]),
   which outranks a plain class selector — so the attribute form is matched
   here deliberately. A class-only rule silently loses. */
.site-footer,
.ast-footer-copyright,
.site-primary-footer-wrap,
.site-above-footer-wrap,
.site-below-footer-wrap,
.site-primary-footer-wrap[data-section],
.site-above-footer-wrap[data-section],
.site-below-footer-wrap[data-section] {
  background-color: var(--cream);
}

/* Keep the footer readable as a separate zone without a colour change. */
.site-primary-footer-wrap,
.site-below-footer-wrap {
  border-top: 1px solid var(--parchment);
}

/* --------------------------------------------------------------------------
   2) GLOBAL MARQUEE — the scrolling bar, now on every page.
   Home, About and Join keep their own copy in page content (different word
   lists); functions.php skips those three so nothing doubles up.
   This one sits between the header and the content, matching where theirs is.
   -------------------------------------------------------------------------- */
.rooted-global-marquee {
  position: relative;
  z-index: 50;
  width: 100%;
  background: var(--forest);
  padding: 9px 0;
  overflow: hidden;
}

.rooted-global-marquee .rooted-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: rooted-marquee 22s linear infinite;
  will-change: transform;
}

.rooted-global-marquee .rooted-marquee-track span {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-lt);
  padding: 0 1.6rem;
}

.rooted-global-marquee .rooted-mdot { color: var(--gold); opacity: .4; }

/* The page-level copies define this too; harmless to repeat, and it means the
   global bar works even on pages with no inline CSS of their own. */
@keyframes rooted-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rooted-global-marquee .rooted-marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   3) IMAGE FIT — stop pictures being cut off inside their boxes.
   Dokan ships `.store-banner img { object-fit: cover }`, which fills the box
   and crops whatever doesn't fit. `contain` shows the whole image; the
   parchment behind it makes the letterboxing look deliberate.
   -------------------------------------------------------------------------- */
.store-banner img,
.dokan-single-seller .store-wrapper .store-header .store-banner img,
.store-wrapper .store-header .store-banner img {
  object-fit: contain !important;   /* !important: Dokan's own rule is deeply nested */
  object-position: center;
  background-color: var(--parchment);
}

/* Product thumbnails: uniform square boxes with the WHOLE picture visible,
   so a portrait or landscape photo is letterboxed rather than cropped or
   squashed. (Astra/Woo default here is object-fit:fill, which distorts any
   non-square image.) */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #ffffff;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   4) LINK HOVER — green to gold, like the homepage wordmark.
   
   HOVER ONLY, deliberately: base link colours are left alone. Some links sit
   on dark surfaces (Dokan store cards use a rgba(0,0,0,.45) overlay with white
   text), and forcing a base colour would make those unreadable. Astra already
   renders normal links in forest via --ast-global-color-0.

   On the colour: the wordmark uses --gold #C9A84C, but that measures 2.12:1 on
   cream — well under the 4.5:1 needed for text. --gold-link below is the same
   gold deepened just enough to pass AA (4.59:1 on cream, 4.95:1 on white).
   To match the wordmark exactly instead, swap --gold-link to var(--gold) —
   one line, at the cost of contrast.
   -------------------------------------------------------------------------- */
:root { --gold-link: #8E6A2A; }

a {
  transition: color .18s ease, border-color .18s ease;
}

a:hover,
a:focus-visible,
.main-header-menu a:hover,
.ast-header-break-point .main-header-menu a:hover,
.site-footer a:hover,
.entry-content a:hover,
.woocommerce-loop-product__title:hover,
li.product a:hover .woocommerce-loop-product__title {
  color: var(--gold-link);
}

/* Buttons keep their own treatment — they signal hover with their background,
   and recolouring the label would fight it. */
a.button:hover, a.btn:hover, a.ast-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.dokan-btn:hover, .dokan-btn-theme:hover {
  color: inherit;
}

/* Links inside body copy also get an underline on hover, so the state isn't
   signalled by colour alone (WCAG 1.4.1). */
.entry-content a:not(.button):not(.btn):not(.wp-block-button__link):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5) Normalise the three page-level marquees to one speed.
   Home and Join run their inline bars at 22s, About at 24s — so the bar visibly
   changes pace as you move between them. This matches all three to the global
   bar's 22s WITHOUT touching their wording, which stays page-specific.
   `body .marquee-track` (0,1,1) outranks their inline `.marquee-track` (0,1,0).
   -------------------------------------------------------------------------- */
body .marquee-track { animation-duration: 22s; }


/* --------------------------------------------------------------------------
   6) BRANDS LIST BAR — search promoted out of the filter panel.

   Target layout:
     Total stores showing: 6              [ Search vendors... ]
     [ Filter ]                Sort by: [Most Recent]  [grid|list]

   The count and search share row 1; Filter sits left on row 2 with sort and
   the view toggle staying right. functions.php item 8 moves the standalone
   search form into this container so it can take part in the grid.
   -------------------------------------------------------------------------- */
#dokan-store-listing-filter-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "count    search"
    "controls controls";
  align-items: center;
  gap: .65rem 1rem;
}

#dokan-store-listing-filter-wrap > .left {
  grid-area: count;
  justify-self: start;
  margin: 0;
}

#dokan-store-listing-filter-wrap > .dokan-seller-search-form {
  grid-area: search;
  justify-self: end;
  margin: 0;
  /* Explicit width, not 100%: the grid column is auto-sized, so a percentage
     would collapse the field to the input's intrinsic ~162px. */
  width: 260px;
  max-width: 100%;
}

/* Row 2: Filter pushed left, everything else stays right. */
#dokan-store-listing-filter-wrap > .right {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

#dokan-store-listing-filter-wrap > .right > .item:first-child {
  margin-right: auto;
}

/* The search field itself — deliberately compact. Dokan wraps it in a 33%
   grid column (.dokan-w4) which has to be unwound first. */
#dokan-store-listing-filter-wrap .dokan-seller-search-form .dokan-row,
#dokan-store-listing-filter-wrap .dokan-seller-search-form .dokan-w4 {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

.dokan-seller-search-form input.dokan-seller-search {
  width: 100%;
  height: auto;
  padding: 7px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--parchment);
  border-radius: 3px;
  box-shadow: none;
}

.dokan-seller-search-form input.dokan-seller-search:focus {
  border-color: var(--gold);
  outline: none;
}

/* The panel keeps Featured / Open Now / Rating — but not a second search box. */
#dokan-store-listing-filter-form-wrap .store-search { display: none; }

@media (max-width: 600px) {
  #dokan-store-listing-filter-wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "count" "search" "controls";
  }
  #dokan-store-listing-filter-wrap > .dokan-seller-search-form {
    justify-self: stretch;
    max-width: none;
  }
  #dokan-store-listing-filter-wrap > .right { flex-wrap: wrap; }
}


/* --------------------------------------------------------------------------
   7) NAV + FOOTER MENU HOVER — green to gold, matching the wordmark.

   The generic `a:hover` rule above never reached these. Astra styles menus with
   heavier selectors, so each is matched at its own weight:

     .ast-builder-menu-1 .menu-link:hover          (0,3,0)  vs mine (0,2,1) -> lost
     #astra-footer-menu .menu-item:hover > a       (1,2,0)  ID, lost harder

   These match that weight exactly and win on load order (brand.css comes after
   Astra's inline CSS). The current-page item needs one extra step, because
   Astra's .current-menu-item rule (0,4,0) would otherwise beat a plain hover.
   -------------------------------------------------------------------------- */

/* Desktop header nav — Home, Shop, Services, Join, About, Blog, Brands */
.ast-builder-menu-1 .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu-1 .sub-menu .menu-link:hover,
/* The current page's own item, so it highlights like the rest */
.ast-builder-menu-1 .menu-item.current-menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu .menu-item.current-menu-item:hover > .menu-link,
/* Mobile nav */
.ast-builder-menu-mobile .main-navigation .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item:hover > .menu-link,
/* Footer menu — Astra targets this by ID */
#astra-footer-menu .menu-item:hover > a,
#astra-footer-menu a:hover {
  color: var(--gold-link);
}

/* Match the wordmark's easing so the two feel like the same interaction. */
.ast-builder-menu-1 .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-link,
#astra-footer-menu a {
  transition: color .18s ease;
}


/* --------------------------------------------------------------------------
   8) BRANDS PAGE — breathing room under the banner.

   The title sat flush against the scrolling banner (measured gap: 0px), while
   Shop leaves 118px on desktop and 105px at 390px. These match Shop, so the two
   pages open the same way.
   -------------------------------------------------------------------------- */
body.rooted-store-listing .entry-header {
  padding-top: 118px;
}

@media (max-width: 768px) {
  body.rooted-store-listing .entry-header {
    padding-top: 105px;
  }
}


/* --------------------------------------------------------------------------
   9) BRANDS PAGE — typography matched to Shop.

   Measured differences before this:
     page title   Shop 54px Cinzel      vs  Brands 32px
     card title   Shop 18px Cormorant   vs  Brands 36px PLAYFAIR (Astra default)

   The Playfair leak is the interesting one. Astra sets headings with
   `h2, .entry-content :where(h2)`. `:where()` adds no specificity, but
   `.entry-content` still counts — so that selector is (0,1,0) and beats the
   element-level `h1,h2,...` rule in section 3, which is only (0,0,1). Any
   heading inside page content therefore stayed on Astra's font. Fixed globally
   just below, not only on this page.
   -------------------------------------------------------------------------- */

/* Page title — Astra's own h1 scale, so it steps at the same breakpoints Shop does.
   The selector has to be this long: Astra pins page titles to 32px with
   `header.entry-header:not(.related-entry-header) .entry-title` = (0,3,1) — the
   :not() argument counts toward specificity. A plain
   `body.rooted-store-listing .entry-title` is only (0,2,1) and silently loses. */
body.rooted-store-listing header.entry-header:not(.related-entry-header) .entry-title {
  font-size: 54px;
  line-height: 1.2em;
}
@media (max-width: 921px) {
  body.rooted-store-listing header.entry-header:not(.related-entry-header) .entry-title {
    font-size: 45px;
  }
}
@media (max-width: 544px) {
  body.rooted-store-listing header.entry-header:not(.related-entry-header) .entry-title {
    font-size: 32px;
  }
}

/* Store card names — match Shop's product titles exactly. */
body.rooted-store-listing .dokan-single-seller h2,
body.rooted-store-listing .dokan-single-seller h2 a,
body.rooted-store-listing .store-name,
#dokan-seller-listing-wrap .dokan-single-seller h2,
#dokan-seller-listing-wrap .dokan-single-seller h2 a {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
}

@media (max-width: 544px) {
  body.rooted-store-listing .dokan-single-seller h2,
  body.rooted-store-listing .dokan-single-seller h2 a,
  #dokan-seller-listing-wrap .dokan-single-seller h2 a { font-size: 16px; }
}

/* Bar controls — Shop's ordering control is 16px; match it. */
body.rooted-store-listing #dokan-store-listing-filter-wrap .sort-by label,
body.rooted-store-listing #dokan-store-listing-filter-wrap #stores_orderby {
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   10) Brand headings inside page content — beats Astra's `.entry-content
   :where(hN)` (0,1,0). Without this, every heading in page content across the
   site renders in Playfair Display instead of the brand serif.
   -------------------------------------------------------------------------- */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

.entry-content h1 { font-family: 'Cinzel', Georgia, serif; }