/*
Theme Name: SPiDER Extrusion (Astra Child)
Theme URI: https://spider.com.tw
Description: Astra child theme for spider.com.tw — reproduces the Weebly-era chrome (green brand, Montserrat/Roboto, overlay/solid header, light footer) on native WordPress. Scaffold for the replatform-spider-native-wp change; visual parity tuned on staging (Phase 1.3).
Author: SPiDER EXTRUSION
Template: astra
Version: 0.1.0
Text Domain: spider-astra-child
*/

/* =====================================================================
   Brand tokens — mirrored from sites/spider-extrusion/site.yaml.
   Keep these in sync with site.yaml; every rule below references them.
   ===================================================================== */
:root{
  --spider-brand:#7CC206;        /* primary/accent — headings, links, CTA */
  --spider-brand-dark:#508D24;   /* highlight — hovers */
  --spider-ink:#2A2A2A;          /* body/heading text */
  --spider-bg:#FFFFFF;           /* page background */
  --spider-border:#EDEDED;       /* hairlines */
  --spider-radius:4px;           /* button / input radius */
  --spider-footer-bg:#F2F2F2;    /* light footer (parity: Weebly footer is light gray) */
  --spider-footer-ink:#555555;   /* footer body text */
  --spider-container:1240px;     /* content container width */
}

/* Back-compat aliases so styling ported from spider-style.css keeps reading */
:root{
  --brand:var(--spider-brand);
  --brand-dark:var(--spider-brand-dark);
  --cta:var(--spider-brand);
  --cta-dark:var(--spider-brand-dark);
  --ink:var(--spider-ink);
}

/* =====================================================================
   Typography — Montserrat headings / Roboto body (self-hosted; see
   assets/fonts.css enqueued ahead of this file).
   ===================================================================== */
body{ font-family:'Roboto',Arial,sans-serif; color:var(--ink); }
h1,h2,h3,h4,h5,h6,.site-title,.entry-title{
  font-family:'Montserrat',sans-serif; font-weight:700; color:var(--ink); letter-spacing:-.005em;
}
/* Prominent section titles are green like the original; deeper sub-headings stay
   dark. The scale must run all the way to h6: inside a wp:cover, a heading with
   no colour rule of its own resolves to the cover's white default, which on a
   light section background is invisible — measured on the converted home, where
   h3 "Breaker plate" read black while h4 "By-Pass module&Flange" read
   rgb(255,255,255) on light gray. `:not(.has-text-color)` is what lets a block
   that DOES state its colour (the white text on the dark bands) still win. */
.entry-content h1:not(.has-text-color),
.entry-content h2:not(.has-text-color){ color:var(--brand); }
.entry-content h3:not(.has-text-color),
.entry-content h4:not(.has-text-color),
.entry-content h5:not(.has-text-color),
.entry-content h6:not(.has-text-color){ color:var(--ink); }
.entry-content h1{ font-size:2.1rem; margin:.2em 0 .6em; }
.entry-content h2{ font-size:1.6rem; margin:1.4em 0 .5em; }
.entry-content h3{ font-size:1.25rem; margin:1.1em 0 .4em; }

/* links — original green */
a{ color:var(--brand); }
a:hover{ color:var(--brand-dark); }
.entry-content a{ color:var(--brand); text-decoration:underline; font-weight:600; }
.entry-content a:hover{ color:var(--brand-dark); }

/* content rhythm */
.entry-content{ font-size:1.02rem; line-height:1.7; overflow-wrap:break-word; }
.entry-content > div{ margin-bottom:.25rem; }
.entry-content img{ max-width:100%; height:auto; display:inline-block; }
.entry-content iframe{ width:100%; max-width:600px; aspect-ratio:16/9; height:auto;
  border:0; display:block; margin:6px 0 18px; }
.entry-content table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.entry-content td,.entry-content th{ border:1px solid #e6e6e6; padding:10px; vertical-align:top; }

/* =====================================================================
   Legacy Weebly column layouts. Weebly built every mirror page out of
   `wsite-multicol-table` scaffolding, which conversion carries through as a
   real <table> — so the theme styles page LAYOUT as if it were DATA. The
   converter marks these (convert_page.LEGACY_COLS_CLASS) precisely so they can
   be exempted here; a genuine data table carries no marker and is untouched
   (the native article posts have those, converted mirror pages have none).
     - the data-table hairlines boxed every layout cell; Weebly drew none.
     - the columns never collapsed on a phone. Measured at 390px on the
       converted breaker-plates page: the text column was squeezed to 109px
       (3-5 characters per line) and the gallery photos to 88px, where live
       gives each column the full ~380px.
   ===================================================================== */
.entry-content .spider-legacy-cols table{ border:0; }
.entry-content .spider-legacy-cols td,
.entry-content .spider-legacy-cols th{ border:0; padding:0 12px; }

@media (max-width:767px){
  .entry-content .spider-legacy-cols table,
  .entry-content .spider-legacy-cols tbody,
  .entry-content .spider-legacy-cols tr,
  .entry-content .spider-legacy-cols td,
  .entry-content .spider-legacy-cols th{ display:block; width:100%; }
  .entry-content .spider-legacy-cols td,
  .entry-content .spider-legacy-cols th{ padding:0 0 18px; }
}

/* A recovered Weebly slideshow (convert_page.SLIDESHOW_CLASS). The original
   rotated one photo at a time via JavaScript that does not survive the
   replatform; every frame is laid out at once instead, so nothing is lost. */
.entry-content .spider-legacy-slideshow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; align-items:center; }
.entry-content .spider-legacy-slideshow img{ width:100%; height:auto; display:block; }

/* container */
.ast-container{ max-width:var(--spider-container); }

/* =====================================================================
   Full-bleed alignment — Astra boxes content to 1240px, so the converter's
   align:full covers (spider-hero) must break out to the viewport edges.
   width:auto + symmetric negative margins avoids forcing a 100vw box (no
   horizontal scrollbar).
   ===================================================================== */
.entry-content .alignfull{
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  max-width:100vw; width:auto; }
/* the converted hero opens the page flush under the (overlay) header */
.entry-content > .spider-hero.wp-block-cover:first-child,
.entry-content > .alignfull:first-child{ margin-top:0; }

/* Legacy heroes on a phone: show the WHOLE image, do not crop it.
   Weebly baked each hero's headline INTO the image, so `object-fit: cover` —
   which fills a 390x500 box by scaling to height and cropping the sides — cuts
   the headline off mid-word. Measured at 390px on the converted breaker-plates
   page: "Precision Engineered Breaker Plates - Ensuring Quality, Efficiency,
   and Durability in Every Extrusion" rendered as "...bility in Every Extrusion".
   Live scales the same image to fit the width instead, so this restores live's
   behaviour rather than inventing one.
   Scoped to `.spider-hero` (the converter's page heroes, which have an empty
   inner container) and NOT to the home page's `.spider-section-cover` bands,
   whose headings are real text laid over the image and must stay overlaid.
   `!important` is load-bearing and not laziness: wp_cover_hero() writes
   `min-height:500px` as an INLINE style, which a stylesheet rule cannot
   otherwise beat. The image is taken out of absolute positioning so it
   contributes its own height and the band ends where the picture ends.
   Showing the whole image makes the band short (390x122 at 390px, from a
   1920x600 source), and the overlay header is 99px tall — so the fix is only
   complete if the header stops covering it. On a legacy-hero page at phone
   width the header therefore returns to the solid, in-flow bar this theme
   already defines for hero-less templates, and the hero opens below it.
   The whole block is gated on `:has()` support: where the selector does not
   resolve, nothing applies and the page keeps TODAY's rendering rather than
   getting a short band hidden behind an overlay header. */
@supports selector(:has(*)){
  @media (max-width:767px){
    .entry-content .spider-hero.wp-block-cover{
      min-height:0 !important; padding:0; }
    .entry-content .spider-hero.wp-block-cover
      > .wp-block-cover__image-background{
      position:relative; width:100%; height:auto;
      object-fit:contain; }
    .entry-content .spider-hero.wp-block-cover
      > .wp-block-cover__inner-container:empty{ display:none; }

    /* header back in flow + solid, so it sits ABOVE the band, not over it.
       `!important` because Astra positions the header through `#masthead`, and
       an ID selector outranks any number of classes. */
    body:has(.entry-content > .spider-hero.wp-block-cover) .site-header{
      position:static !important; }
    body:has(.entry-content > .spider-hero.wp-block-cover).ast-theme-transparent-header .site-header,
    body:has(.entry-content > .spider-hero.wp-block-cover).ast-theme-transparent-header .ast-primary-header-bar{
      background:var(--spider-bg) !important;
      border-bottom:1px solid var(--spider-border); }
    body:has(.entry-content > .spider-hero.wp-block-cover).ast-theme-transparent-header .main-header-menu .menu-link,
    body:has(.entry-content > .spider-hero.wp-block-cover).ast-theme-transparent-header .site-title a{
      color:var(--ink) !important; }
  }
}

/* =====================================================================
   Primary header + nav (Astra native header builder).
   v4 behavior: single-row desktop from 993px, hamburger below; per-template
   contrast (overlay+scrim on hero pages, solid bar elsewhere) driven by
   inc/header.php via Astra's transparent-header + body classes.
   ===================================================================== */

/* nav labels — uppercase Montserrat, sized to hold one row (v4). */
.main-header-menu .menu-link,.ast-builder-menu .menu-link{
  text-transform:uppercase; font-family:'Montserrat',sans-serif;
  font-weight:600; font-size:13.5px; letter-spacing:0;
  padding-left:9px; padding-right:9px;
}
.main-header-menu .menu-link:hover,.ast-builder-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link{ color:var(--brand); }
/* step the nav down across laptop/tablet bands so the (long, freeze-parity)
   labels never wrap to a 2nd row. NOTE: bands must carry the SAME dual selector
   as the base rule — Astra renders .ast-builder-menu, so a .main-header-menu-only
   media rule silently no-ops and the nav wraps. */
@media (max-width:1199px) and (min-width:993px){
  .main-header-menu .menu-link,.ast-builder-menu .menu-link{
    font-size:11.5px; padding-left:6px; padding-right:6px; letter-spacing:0; }
  .custom-logo,.site-logo-img .custom-logo{ max-width:150px; }
}
@media (max-width:992px) and (min-width:922px){
  .main-header-menu .menu-link,.ast-builder-menu .menu-link{
    font-size:11px; padding-left:6px; padding-right:6px; letter-spacing:0; }
  .custom-logo,.site-logo-img .custom-logo{ max-width:150px; }
}

/* logo cap — the wordmark ships large; cap it so the menu keeps its row. */
.custom-logo,.site-logo-img .custom-logo{ max-width:184px; width:auto; height:auto; }
.ast-site-identity{ padding:8px 0; }
/* text wordmark fallback (renders only if no custom logo is set in Customizer) */
.site-title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:25px;
  line-height:1; letter-spacing:-.01em; margin:0; white-space:nowrap; text-transform:uppercase; }
.site-title a,.site-title a:hover{ color:var(--ink); opacity:1; }

/* --- SOLID bar (default, hero-less templates: single posts, archives, blog) --- */
.site-header,.ast-primary-header-bar{ background:var(--spider-bg); border-bottom:1px solid var(--spider-border); }
.ast-primary-header-bar .main-header-menu .menu-link{ color:var(--ink); }

/* --- OVERLAY header (hero pages: front page + pages that open with a cover) --- */
/* Astra adds .ast-theme-transparent-header when transparent header is active. */
.ast-theme-transparent-header .site-header,
.ast-theme-transparent-header .ast-primary-header-bar{
  background:transparent !important; border-bottom:none;
}
/* readability scrim under the white nav, only before scroll (Astra drops the
   transparent class / adds .ast-header-break-point sticky classes on scroll) */
.ast-theme-transparent-header .ast-primary-header-bar{
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.15) 100%) !important;
}
.ast-theme-transparent-header .main-header-menu .menu-link,
.ast-theme-transparent-header .site-title a{ color:#fff !important; }
.ast-theme-transparent-header .main-header-menu .menu-link:hover{ color:var(--brand) !important; }

/* comments never existed on the Weebly mirror — suppress the whole area for
   parity (comments_open is also filtered false in functions.php). */
.comments-area,#comments,#respond,.comment-respond,.ast-comment-list{ display:none !important; }

/* focus cues — no dotted boxes; soft brand tint for keyboard users */
.ast-menu-toggle,.main-header-menu-toggle,.menu-toggle{ border:none !important; }
.ast-menu-toggle:focus,.main-header-menu-toggle:focus,.menu-toggle:focus,
.ast-menu-toggle:focus-visible,.menu-toggle:focus-visible,
.main-header-menu .menu-link:focus{
  outline:none !important; box-shadow:none !important; border-color:transparent !important; }
.ast-menu-toggle:focus-visible,.menu-toggle:focus-visible{
  background:rgba(124,194,6,.14) !important; border-radius:6px; }

/* mobile dropdown polish (hamburger < 922px) */
@media (max-width:921px){
  .main-header-menu.stack-on-mobile > .menu-item,
  .main-header-menu.stack-on-mobile .sub-menu > .menu-item{ border-top:1px solid var(--spider-border); }
  .main-header-menu.stack-on-mobile .menu-link{ padding:14px 20px; font-size:13.5px; font-weight:600; }
  .main-header-menu.stack-on-mobile .sub-menu .menu-link{
    padding-left:40px; background:#fafafa; font-weight:500; text-transform:none; }
  .main-header-menu.stack-on-mobile .ast-menu-toggle{
    color:var(--ink); width:54px; height:48px; display:flex; align-items:center; justify-content:center; }
  .main-header-menu.stack-on-mobile .ast-menu-toggle:hover{ color:var(--brand); }
  .main-header-menu.stack-on-mobile .menu-item:hover > .menu-link,
  .main-header-menu.stack-on-mobile .current-menu-item > .menu-link{ color:var(--brand); }
}

/* =====================================================================
   Buttons / CTA — green fill, dark text, 4px radius (site.yaml).
   ===================================================================== */
.wp-block-button__link,.wp-block-button__link.wp-element-button,.wp-block-button__link:visited{
  background:var(--cta) !important; color:var(--ink) !important; border:none; border-radius:var(--spider-radius);
  padding:.7em 1.5em; text-transform:uppercase; font-family:'Montserrat',sans-serif;
  font-weight:700; letter-spacing:.03em; }
.wp-block-button__link:hover,.wp-block-button__link.wp-element-button:hover{
  background:var(--cta-dark) !important; color:var(--ink) !important; }
button,input[type=submit]{
  background:var(--cta); color:var(--ink); border:none; border-radius:var(--spider-radius); padding:.7em 1.4em;
  text-transform:uppercase; font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.03em; }
button:hover,input[type=submit]:hover{ background:var(--cta-dark); }
.wp-block-cover a{ color:#fff; }
.wp-block-cover .wp-block-button__link{ background:var(--cta); color:var(--ink); }

/* =====================================================================
   Footer — PARITY: current Weebly footer is a LIGHT GRAY band with green
   section headings (diverges from spider-style.css's dark footer; the
   screenshot baseline is the parity target per Frank). Structure/markup
   in template-parts/footer-content.php, wired from inc/footer.php.
   ===================================================================== */
.spider-footer{
  background:var(--spider-footer-bg); color:var(--spider-footer-ink);
  border-top:1px solid var(--spider-border); font-size:14px; }
.spider-footer a{ color:var(--spider-footer-ink); }
.spider-footer a:hover{ color:var(--brand-dark); }
.spider-footer__inner{
  max-width:var(--spider-container); margin:0 auto; padding:60px 40px 24px; box-sizing:border-box; }
.spider-footer__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:36px; }
.spider-footer__brand img{ max-width:200px; height:auto; }
.spider-footer__social a{ display:inline-block; margin-left:16px; color:var(--ink); font-size:20px; }
.spider-footer__social a:hover{ color:var(--brand-dark); }
.spider-footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.spider-footer__cols h2{
  font-family:'Montserrat',sans-serif; font-size:16px; font-weight:700;
  text-transform:uppercase; color:var(--brand); letter-spacing:.02em; margin:0 0 16px; }
.spider-footer__cols ul{ list-style:none; margin:0; padding:0; }
.spider-footer__cols li{ margin:0 0 10px; }
.spider-footer__cols li a::before{ content:"\00BB\00a0"; color:var(--brand); }
.spider-footer__cols p{ margin:0 0 10px; line-height:1.6; }
.spider-footer__hours-open{ color:#c0392b; }
.spider-footer__qr{ display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 4px; }
.spider-footer__qr img{ width:88px; height:88px; object-fit:contain; background:#fff;
  border:1px solid var(--spider-border); border-radius:var(--spider-radius); }
.spider-footer__certs{ margin-top:20px; }
.spider-footer__certs img{ max-width:120px; height:auto; }
.spider-footer__copyright{
  text-align:center; font-size:13px; color:#8a8a8a;
  padding:22px 20px 0; margin-top:36px; border-top:1px solid var(--spider-border); }
@media (max-width:900px){
  .spider-footer__cols{ grid-template-columns:1fr; gap:28px; }
  .spider-footer__inner{ padding:36px 20px 20px; }
}
/* collapse Astra's own footer bar — the child theme renders its own footer
   (inc/footer.php on astra_footer_before). Staging may instead switch to
   Astra's Footer Builder widgets; if so, delete this rule + that hook. */
.site-footer.spider-native-footer-active .site-primary-footer-wrap,
.site-footer.spider-native-footer-active .site-below-footer-wrap{ display:none; }

/* =====================================================================
   Content helpers carried from spider-style.css (useful once Weebly blobs
   are converted to blocks in Phase 2): in-page anchors + empty-div cleanup.
   ===================================================================== */
.wp-section-anchor{ display:block; height:0; width:0; scroll-margin-top:110px; }
.entry-content [id]{ scroll-margin-top:110px; }
.entry-content div:empty{ display:none; }
.entry-content br + br{ display:none; }
.entry-content p:empty,.entry-content h1:empty,.entry-content h2:empty{ display:none; }