/**
 * Product page assets — terpene flavor chart + FAQ accordion.
 * New file: product pages had no dedicated stylesheet before this
 * (only master.css loads globally). Enqueued in functions.php via
 * dft_product_page_assets(), only on is_product().
 *
 * Colors below (#0C0C0C dark base, #EE312F red accent) pulled from the
 * actual site palette (confirmed via blog.css's --dft-red).
 */

/* ==========================================================================
   Scoped headings for body copy
   Real <h2>/<h3> tags in product descriptions inherit the site's
   full-page heading scale from master.css (h3 alone is 91px), rendering
   way oversized. This scopes them down specifically inside the
   product's INFO copy. Use real headings in product descriptions (not
   <p> substitutes) — they render properly with this in place.
   ========================================================================== */
.packshot-content h2,
.packshot-content h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 32px 0 12px;
    text-transform: none;
}

.packshot-content h2:first-child,
.packshot-content h3:first-child {
    margin-top: 0;
}

/* ==========================================================================
   Product description links
   No link-color rule exists for this content area, so links were
   falling back to plain browser-default blue. Switching to brand red;
   keeping the underline as-is per request.
   ========================================================================== */
.packshot-content a {
    color: #fff;
    text-decoration: underline;
}

.packshot-content a:hover {
    color: #EE312F;
}

/* ==========================================================================
   Section labels (INFO / Resources / Flavor Profile / FAQs)
   Matches the site's existing small-label pattern used elsewhere in
   blog.css (.dft-shop h4 / .dft-related h4) — monospace, letter-spaced,
   red, with a small glowing dot — rather than inventing a new treatment.
   ========================================================================== */
.packshot-content .content-title,
.product-faqs .content-title,
.terpene-chart .content-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "DotGothic16", monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #EE312F;
    margin-bottom: 12px;
}

.packshot-content .content-title::before,
.product-faqs .content-title::before,
.terpene-chart .content-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EE312F;
    box-shadow: 0 0 8px #EE312F;
    flex-shrink: 0;
}

/* ==========================================================================
   Terpene Flavor Chart
   ========================================================================== */
.terpene-chart {
    margin-top: 40px;
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.terpene-chart.is-visible {
    opacity: 1;
    transform: none;
}

.terpene-chart__svg {
    width: 100%;
    max-width: 560px;
    display: block;
    margin: 24px auto 0;
}

.terpene-chart__grid {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}

.terpene-chart__spoke {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}

.terpene-chart__shape {
    fill: rgba(238, 49, 47, 0.35);
    stroke: #EE312F;
    stroke-width: 2;
    /* stroke-dasharray/dashoffset are set inline by product-faq.js using
       the shape's real path length, then animated to 0 on scroll-into-view
       via this transition. */
    transition: stroke-dashoffset 1.2s ease, fill-opacity 1s ease;
}

.terpene-chart__label {
    fill: currentColor;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Product FAQ Accordion
   Matches .dft-faq .q from the blog template: bordered rounded box per
   question, red outline, same plus/minus icon construction, max-height
   slide transition instead of an abrupt display:none/block toggle.
   max-height itself is set inline by product-faq.js (measuring real
   content height) — a CSS-only max-height animation needs a hardcoded
   cap that would either clip long answers or transition too slowly on
   short ones.
   ========================================================================== */
.product-faqs {
    padding: 60px 0 20px;
}

.faq-accordion {
    max-width: 780px;
    margin: 20px auto 0;
}

.faq-accordion__item {
    border: 1px solid #EE312F;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    background: rgba(238, 49, 47, 0.03);
    transition: background-color 0.2s ease;
}

.faq-accordion__item:hover {
    background: rgba(238, 49, 47, 0.08);
}

.faq-accordion__question {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: "Akshar", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #EE312F;
    font-size: clamp(16px, 2.2vw, 21px);
}

.faq-accordion__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    position: relative;
    transition: transform 0.3s;
}

.faq-accordion__icon::before,
.faq-accordion__icon::after {
    content: "";
    position: absolute;
    background: #EE312F;
    border-radius: 2px;
}

.faq-accordion__icon::before {
    top: 10px;
    left: 0;
    width: 22px;
    height: 2px;
}

.faq-accordion__icon::after {
    left: 10px;
    top: 0;
    height: 22px;
    width: 2px;
    transition: transform 0.3s;
}

.faq-accordion__item.is-open .faq-accordion__icon::after {
    transform: scaleY(0);
}

.faq-accordion__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-accordion__answer p {
    padding: 0 22px 22px;
    color: #e9e9e9;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Pack-shot layout fix
   .pack-shot .container uses align-items:center (see master.css), which
   vertically centers the image next to the text column. That worked when
   descriptions were short. Now that INFO includes headings, a bullet
   list, and the flavor chart, the text column runs much taller than the
   image, and centering leaves a big empty gap above/below it. Pinning
   the image to the top and letting it stick while the longer text
   scrolls past fixes the mismatch without editing master.css directly.
   Scoped to the same 640px breakpoint where master.css switches this
   layout from stacked (mobile) to side-by-side (desktop).
   ========================================================================== */
@media (min-width: 640px) {
    .pack-shot .container {
        align-items: flex-start;
    }

    .pack-shot .container .packshot-image {
        position: sticky;
        top: 100px; /* matches the site's existing scroll-padding-top offset for the fixed header */
    }
}

/* ==========================================================================
   Product description list spacing
   master.css sets global ul/ol/li spacing (line-height:1.75em,
   li margin-bottom:1em) meant for general page copy — reads as too
   airy/bulky for a compact terpene list inside product body copy.
   Tightened here, scoped to product descriptions only.
   ========================================================================== */
.packshot-content ul,
.packshot-content ol {
    margin-bottom: 20px;
    margin-left: 1.1em;
    line-height: 1.4;
}

.packshot-content li {
    margin-bottom: 6px;
}

.packshot-content li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Description body text color
   body{} sets a site-wide base text color of red (#EE312F) — fine for
   headings/accents, too heavy for long paragraph copy. Headings stay
   red (untouched); paragraph text goes to the same off-white the blog
   template already uses for its own body copy (.dft-body p), so this
   matches an existing site convention rather than inventing a new one.
   Links inside stay red (see .packshot-content a above) as an accent
   against the lighter paragraph text, same pattern the blog uses.
   ========================================================================== */
.packshot-content p {
    color: #e9e9e9;
}

/* ==========================================================================
   Hardcoded trust block — "Why Buy From Duty Free Terpenes"
   Styled to match .dft-cta from the blog template (bordered card +
   radial-gradient inner glow) since that's the site's existing
   "glowing card" pattern — with an added pulsing outer glow for extra
   presence, since this block is meant to stand out a bit more than a
   quiet content section.
   ========================================================================== */
.dft-trust-block {
    padding: 20px 0 60px;
}

.dft-trust-block .container {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto;
}

.dft-trust-block__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 32px;
    border: 2px solid #EE312F;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: dft-trust-glow 3s ease-in-out infinite;
}

.dft-trust-block__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 50% 0%, rgba(238, 49, 47, 0.14), transparent);
    pointer-events: none;
}

@keyframes dft-trust-glow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(238, 49, 47, 0.25);
    }
    50% {
        box-shadow: 0 0 28px rgba(238, 49, 47, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dft-trust-block__inner {
        animation: none;
        box-shadow: 0 0 16px rgba(238, 49, 47, 0.3);
    }
}

.dft-trust-block__inner h3 {
    font-family: "Akshar", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #EE312F;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.1;
    margin: 0 0 16px;
    position: relative;
}

.dft-trust-block__inner p {
    color: #e9e9e9;
    font-size: 17px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}