/*
Theme Name: GiddyGadget
Description: GiddyGadget child theme of Astra — brand tokens, storefront sections, and blog presentation for the "Everyday problem-solving gadgets" store. All customization lives here; Astra stays stock and updatable.
Author: GiddyGadget
Template: astra
Version: 2.1.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: giddygadget
*/

/* ── Brand tokens ─────────────────────────────────────────────────────────
   These ALIAS Astra's global palette rather than redeclaring hex values.
   The palette is written by scripts/16-theme.php, which makes that script the
   single source of colour truth — rebrand there and everything below follows,
   including the POTW plugin, which already consumes these --gg-* tokens.
   The literal hexes are fallbacks only, for the split second before Astra's
   dynamic CSS lands (and if the parent theme ever changes its variable names).
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --gg-accent:      var(--ast-global-color-0, #ff6b35);
  --gg-accent-dark: var(--ast-global-color-1, #e2551f);
  --gg-ink:         var(--ast-global-color-2, #21313c);
  --gg-muted:       var(--ast-global-color-3, #6b7a86);
  --gg-paper:       var(--ast-global-color-4, #fffdf9);
  --gg-surface:     var(--ast-global-color-5, #ffffff);
  --gg-border:      var(--ast-global-color-6, #e7dfd3);
  --gg-subtle:      var(--ast-global-color-7, #ece4d8);
  --gg-section:     var(--ast-global-color-8, #f7f1e7);

  --gg-radius:   10px;
  --gg-radius-l: 16px;
  --gg-shadow:   0 1px 2px rgba(33, 49, 60, .04), 0 8px 24px rgba(33, 49, 60, .06);
  --gg-shadow-h: 0 2px 4px rgba(33, 49, 60, .06), 0 16px 40px rgba(33, 49, 60, .10);
  --gg-gap:      clamp(1rem, 2.5vw, 2rem);
  --gg-section-y: clamp(2.5rem, 6vw, 4.5rem);
}

/* ── Buttons / CTAs ───────────────────────────────────────────────────────
   Astra styles its own buttons from the palette; these rules cover the
   WooCommerce and block buttons it does not reach, and add the lift on hover. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link,
.ast-button {
  border-radius: var(--gg-radius);
  font-weight: 600;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--gg-shadow);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--gg-accent);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--gg-accent-dark);
}

/* Sale badge: make the POTW / sales pop. */
.woocommerce span.onsale {
  background: var(--gg-accent);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ── Home: hero ───────────────────────────────────────────────────────── */
/* Class doubled to TIE Astra's `.entry-content > .wp-block-group` padding
   rule at (0,2,0) — one class alone loses outright; the tie then falls to
   source order, which this sheet wins by enqueuing after Astra's inline CSS. */
.gg-hero.gg-hero {
  padding: var(--gg-section-y) 0 calc(var(--gg-section-y) * .6);
  /* Category-tile illustration, right-anchored: the copy owns the left ~60%
     of the band, so the image must never cross under it at any width.
     The ?v= query must stay in lockstep with the Version header above AND
     the preload in functions.php — nginx serves theme assets with a 1-year
     immutable Cache-Control, so a bare URL would pin stale art for a year. */
  background-image: url(assets/img/hero-gadget-grid.svg?v=2.1.6);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: auto 400px;
}
@media (max-width: 1200px) {
  .gg-hero.gg-hero { background-size: auto 280px; }
}
@media (max-width: 960px) {
  /* Stack below the copy before the POTW band. 960, not the usual 921: the
     56px h1's first line reaches ~660px from the container edge, and between
     922 and ~940px the right-anchored 280px image starts under it. */
  .gg-hero.gg-hero {
    padding-bottom: calc(var(--gg-section-y) * .6 + 264px);
    background-position: center bottom;
    background-size: auto 240px;
  }
}
.gg-hero h1 {
  margin: 0 0 .5em;
  max-width: 18ch;              /* keeps the headline to two strong lines */
}
/* The constrained group layout centers any width-capped child via core's
   auto-margin rule (also !important, equal specificity — the :where() zeroes
   its :not chain — so this sheet's later print order breaks the tie); pin
   the copy to the left edge so it never drifts under the illustration. */
.gg-hero h1,
.gg-hero__sub {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.gg-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--gg-muted);
  max-width: 52ch;    /* clears the right-anchored hero illustration */
  margin-bottom: 1.75rem;
}
.gg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
}
.gg-hero__actions .wp-block-button__link { padding: .85em 1.75em; }

/* ── Section rhythm + headings ────────────────────────────────────────── */
.gg-section { padding-block: var(--gg-section-y); }
.gg-section--tint {
  background: var(--gg-section);
  /* Full-bleed tint inside Astra's constrained container. */
  box-shadow: 0 0 0 100vmax var(--gg-section);
  clip-path: inset(0 -100vmax);
}
.gg-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.gg-section__head h2 { margin: 0; }
.gg-section__more {
  font-weight: 600;
  white-space: nowrap;
}

/* ── Product + category cards ─────────────────────────────────────────── */
.woocommerce ul.products li.product,
.wc-block-product-template li.product {
  border-radius: var(--gg-radius-l);
  transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--gg-shadow-h);
}
.woocommerce ul.products li.product img { border-radius: var(--gg-radius); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  line-height: 1.35;
}

/* Category tiles: the storefront's primary navigation, so give them presence
   even when a category has no product image yet. */
.woocommerce ul.products li.product-category > a {
  display: block;
  background: var(--gg-surface);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-l);
  padding: 1rem 1rem 1.25rem;
  height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product-category > a:hover {
  border-color: var(--gg-accent);
  box-shadow: var(--gg-shadow-h);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category h3 {
  font-size: 1rem !important;
  margin: .75rem 0 .1rem;
  color: var(--gg-ink);
}
.woocommerce ul.products li.product-category mark.count {
  background: none;
  color: var(--gg-muted);
  font-size: .8rem;
}

/* ── Trust strip (rendered by functions.php, above the footer) ────────── */
.gg-trust {
  background: var(--gg-ink);
  color: #cfd8de;
  padding: 1rem;
  font-size: .9rem;
}
.gg-trust__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.gg-trust a { color: #fff; text-decoration: none; }
.gg-trust a:hover { text-decoration: underline; }
.gg-trust__secure::before { content: "🔒 "; }

/* ── Footer columns (Astra footer builder) ────────────────────────────── */
.site-footer .ast-builder-html-element strong {
  display: block;
  color: var(--gg-ink);
  font-family: var(--ast-heading-font-family, inherit);
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.site-footer .ast-builder-html-element p { margin-bottom: .75rem; }
.site-footer .footer-nav-wrap .ast-builder-menu-1 .menu-item > a { padding: .3rem 0; }

/* ── Newsletter CTA ([gg_newsletter]) ─────────────────────────────────── */
.gg-cta {
  background: var(--gg-ink);
  color: var(--gg-surface);
  border-radius: var(--gg-radius-l);
  padding: clamp(1.75rem, 4vw, 3rem);
  margin-block: var(--gg-section-y);
}
.gg-cta__inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.gg-cta__heading { color: var(--gg-surface); margin: 0 0 .5rem; }
.gg-cta__text { color: #cfd8de; margin: 0 0 1.5rem; }
/* MailPoet renders its own form styling; keep it centred and readable here. */
.gg-cta__form .mailpoet_form { max-width: 30rem; margin: 0 auto; padding: 0 !important; background: none !important; }
.gg-cta__form .mailpoet_paragraph { margin-bottom: .75rem; }
.gg-cta__form .mailpoet_text { border-radius: var(--gg-radius); }

/* ── Blog: archive cards ──────────────────────────────────────────────── */
.ast-article-post .ast-blog-featured-section img { border-radius: var(--gg-radius); }
.blog .ast-article-post,
.archive .ast-article-post {
  border-radius: var(--gg-radius-l);
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog .ast-article-post:hover,
.archive .ast-article-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--gg-shadow-h);
}
.ast-blog-single-element.ast-taxonomy-container a {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gg-accent);
}

/* ── Blog: single guide ───────────────────────────────────────────────── */
.single-post .entry-content > * { margin-bottom: 1.5em; }
.single-post .entry-content h2 { margin-top: 2em; }
.single-post .entry-content h3 { margin-top: 1.6em; }
.single-post .entry-content ul,
.single-post .entry-content ol { padding-left: 1.25em; }
.single-post .entry-content li { margin-bottom: .5em; }
.single-post .entry-content a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
/* Long-form copy earns a measure; Astra's 1200px content width does not apply
   to prose. blog-single-max-width handles the container, this handles the rest. */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol { max-width: 68ch; }

/* "Shop this guide" — the commercial payload of every post. */
.gg-shop-guide {
  background: var(--gg-section);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-l);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2.5em;
}
.gg-shop-guide__head { margin: 0 0 .35rem; font-size: 1.35rem; }
.gg-shop-guide__note { margin: 0 0 1.25rem; color: var(--gg-muted); font-size: .95rem; }
.gg-shop-guide .woocommerce ul.products { margin-bottom: 0; }
.gg-shop-guide ul.products li.product { background: var(--gg-surface); border-radius: var(--gg-radius); }
.gg-shop-guide__all { display: inline-block; margin-top: .5rem; font-weight: 600; }

/* Related guides (functions.php, after single posts). */
.gg-related { margin-block: 3rem 1rem; }
.gg-related__head { font-size: 1.35rem; margin-bottom: 1rem; }
.gg-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gg-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gg-related__item {
  background: var(--gg-surface);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-l);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gg-related__item:hover {
  border-color: var(--gg-accent);
  box-shadow: var(--gg-shadow-h);
  transform: translateY(-3px);
}
.gg-related__item img { display: block; width: 100%; height: 9rem; object-fit: cover; }
.gg-related__body { padding: .9rem 1rem 1.1rem; }
.gg-related__title { font-size: 1rem; line-height: 1.35; margin: 0 0 .35rem; }
.gg-related__title a { color: var(--gg-ink); text-decoration: none; }
.gg-related__item:hover .gg-related__title a { color: var(--gg-accent); }
.gg-related__excerpt { font-size: .9rem; color: var(--gg-muted); margin: 0; }

/* Latest-posts block on the homepage ("From the blog").
   Core lays the grid out with flex + percentage widths, which Astra's content
   width then rounds down into 2 columns. Grid is explicit and honours the
   block's own columns-N class. */
.wp-block-latest-posts.is-grid {
  display: grid;
  gap: var(--gg-gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* Core drops the list indent itself, but only as `:root :where(.is-grid)`,
     and :where() contributes no specificity — so that reset scores (0,1,0) and
     Astra's prose rule `.entry-content ul` (0,1,1) outranks it, pushing the
     whole row 20px right of the heading it belongs to. (0,2,0) beats both. */
  padding-left: 0;
}
.wp-block-latest-posts.is-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 921px) {
  .wp-block-latest-posts.is-grid.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 544px) {
  .wp-block-latest-posts.is-grid.columns-3 { grid-template-columns: 1fr; }
}
/* Switching the list to grid above left core's child sizing behind: it still
   ships `width: calc(33.3333% - .83333em)` on `.columns-N li`, a figure that
   only makes sense when every card shares one flex row. Under grid each card
   is alone in its track, so that 33% re-resolves against the track instead of
   the row and the card collapses to a third of its own column — the cause of
   the one-word-per-line wrap. `ul` + `>` outspecifies core's `.columns-N li`
   whichever sheet lands last, and `auto` lets the item stretch to its track. */
ul.wp-block-latest-posts.is-grid > li { width: auto; max-width: none; margin: 0; }
.wp-block-latest-posts.wp-block-latest-posts__list li { margin-bottom: 0; }
.wp-block-latest-posts__featured-image img {
  border-radius: var(--gg-radius);
  width: 100%;
  height: 11rem;
  object-fit: cover;
}
.wp-block-latest-posts__post-title {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--ast-heading-font-family, inherit);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gg-ink);
  text-decoration: none;
}
.wp-block-latest-posts__post-title:hover { color: var(--gg-accent); }
.wp-block-latest-posts__post-date { font-size: .85rem; color: var(--gg-muted); }
.wp-block-latest-posts__post-excerpt { font-size: .93rem; color: var(--gg-muted); }

/* ── Motion preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product-category > a,
  .blog .ast-article-post,
  .archive .ast-article-post,
  .gg-related__item,
  .woocommerce a.button,
  .woocommerce button.button,
  .wp-block-button__link {
    transition: none;
  }
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product-category > a:hover,
  .blog .ast-article-post:hover,
  .archive .ast-article-post:hover,
  .gg-related__item:hover,
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .wp-block-button__link:hover {
    transform: none;
  }
}