/**
 * CoinsOnline custom styles
 *
 * Destination: wp-content/themes/cusio-child/assets/css/custom.css
 * Enqueued from functions.php as handle 'co-custom' at priority 9002,
 * depending on 'chld_thm_cfg_separate' (ctc-style.css) so it prints last.
 *
 * Section IDs match _design-notes/STYLE-QUEUE.md so the CSS and the work queue
 * cross-reference. When a queue item ships, note it here.
 *
 * Selectors were captured from the rendered local site (coinsonline2.local),
 * not guessed, except where marked CONFIRM.
 */

/* ==========================================================================
   A. GLOBAL / COMPONENT
   ========================================================================== */

/* A1 — Footer: subscribe block background gold -> footer light grey.
   .footer-subscribe carries the gold rgb(164,119,0). The footer sits on the
   page group's base-2 grey (rgb(250,249,248)). Match that.
   Contrast check: the input pills (rgb(246,244,242)) and the reCAPTCHA box are
   near-white and blend into the new grey, so they get a defined border. The
   dark SUBSCRIBE button already contrasts fine. */
.footer-subscribe {
    background-color: var(--wp--preset--color--base-2, #faf9f8) !important;
}
.footer-subscribe input[type="text"],
.footer-subscribe input[type="email"],
.footer-subscribe input:not([type]) {
    border: 1px solid rgba(0, 0, 0, 0.18);
}
.footer-subscribe .ginput_recaptcha > div {
    /* keep the white reCAPTCHA card visible against the grey */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

/* A2 — Footer: copyright font-size -25% (14px -> 10.5px), and match the logo's
   20px top/bottom padding (A3) so the copyright and the COINSONLINE logo line up
   on the same baseline in the footer bottom row. */
footer p.has-text-align-right.has-xs-font-size {
    font-size: 10.5px !important; /* !important: WP's .has-xs-font-size preset sets font-size !important */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* A3 — Footer: logo padding ~20px top/bottom. CONFIRM: 20px is a guess in the
   notes; verify visually before final sign-off. */
footer .wp-block-site-logo {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* A4 — Mobile header: condense spot bar, show ALL metals (not just gold/silver).
   Markup check: all four metals (#arcc-cust-spot-prices-{gold,silver,platinum,
   palladium}) ARE present in the DOM — they were overflowing off-screen, not
   absent. So this is CSS-only after all.

   The bar lives in a text widget inside #top_bar_left, a ~355px flex container
   with overflow-x:auto that scroll-clips the content. The existing rule that
   forces the overflow lives in the block theme's Global Styles custom CSS
   (<style id="global-styles-inline-css">): at <=1024px it sets the container to
   flex/nowrap and each metal to width:25%, so long live values collide and the
   last two scroll off. That block also contains a broken selector
   (div#-cust-spot-prices-gold) worth cleaning up at the source — see NOTE below.

   Fix (per Jason: one line, use symbols instead of words, smaller is fine):
   (1) unclamp the widget width chain so the bar is bounded to the viewport;
   (2) keep all four on ONE line via flex nowrap;
   (3) replace the metal WORDS with their chemical symbols (Au/Ag/Pt/Pd) via a
       CSS content swap — this is what buys the room to stay one line and legible;
   (4) drop the day-change value (the "arrow + $delta" span). Keeping it forced
       ~7px, which is too small and overflows a 320px phone. Symbol + spot price
       fits comfortably at 11px. The change/% still lives on /spot-prices/.
       (There is no clean CSS-only way to keep JUST the arrow — the arrow and the
       $delta are one text node — so if the arrow is wanted back, that's a small
       markup change in co-live-spot-prices.php, not CSS.)

   Selectors match the source's specificity (div#arcc-cust-spot-prices ...) and
   win by load order: custom.css is enqueued after global-styles-inline-css, so
   no !important is needed except on `strong` (to zero out the word text).

   Symbol swap is safe for live values too: the live REST markup is produced by
   the same spot shortcode the skeleton mirrors (render_real -> do_shortcode), so
   #arcc-cust-spot-prices-<metal> > strong is present in both states.

   NOTE / follow-up (not CSS): the source rules in Global Styles should ideally be
   migrated here and removed there, and the broken div#-cust-spot-prices-gold
   selector fixed at the source (STYLE-QUEUE pre-flight). Left in place for now;
   this block overrides them. */
@media screen and (max-width: 1024px) {
    /* 1. bound the widget/bar to the viewport instead of letting it grow to
       content width and scroll-clip */
    #top_bar_left { overflow-x: visible; min-width: 0; }
    #top_bar_left > .widget,
    #top_bar_left .widget-wrap,
    #top_bar_left .textwidget,
    #top_bar_left .top-bar-prices { min-width: 0; max-width: 100%; width: 100%; }

    /* 2. one line, evenly spread */
    div#arcc-cust-spot-prices {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
		font-weight: 400;
        align-items: baseline;
        gap: 0;
        white-space: nowrap;
        padding: 3px 4px;
		
    }
    div#arcc-cust-spot-prices div.arcc-cust-spot-price {
        width: auto;
        flex: 0 1 auto;
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        padding: 0 3px;
        text-align: center;
    }

    /* 3./4. hide the "|" separators and the day-change span */
    div#arcc-cust-spot-prices .price-space,
    div#arcc-cust-spot-prices .yest-sprice-pos,
    div#arcc-cust-spot-prices .yest-sprice-neg { display: none; }

    /* replace metal words with chemical symbols (the "icons") */
    div#arcc-cust-spot-prices strong { font-size: 0 !important; letter-spacing: 0; margin: 0; }
    div#arcc-cust-spot-prices strong::after { font-weight: 700; }
    #arcc-cust-spot-prices-gold      strong::after { content: "Au"; }
    #arcc-cust-spot-prices-silver    strong::after { content: "Ag"; }
    #arcc-cust-spot-prices-platinum  strong::after { content: "Pt"; }
    #arcc-cust-spot-prices-palladium strong::after { content: "Pd"; }

    div#arcc-cust-spot-prices,
    div#arcc-cust-spot-prices a.ask,
    div#arcc-cust-spot-prices strong::after,
    div#arcc-cust-spot-prices .curr-sprice { font-size: 10px; letter-spacing: 0; }
}

/* A5 — Mobile menu (Max Mega Menu flyout): square corners + true-black text.
   Live-DOM capture at <=1024px: top-level rows compute color rgb(48,44,44) (the
   theme's softened near-black — the "grey-ish" in the notes) and submenu items
   rgb(85,85,85)/rgb(102,102,102). Rounding comes from megamenu-css / Global
   Styles (top-level links border-radius:30px pills, flyout panels 16-30px, some
   !important). custom.css loads after megamenu-css, so !important + these
   full-specificity selectors win. Scoped to the mobile breakpoint so the desktop
   pill nav is untouched. "My Account" (.mega-mobile-myaccount) is left as its
   intentional white-on-gold accent — "all text black" is read as the grey rows,
   not that header. */
@media only screen and (max-width: 1024px) {
    /* Square every corner in the flyout, in every state. The active/expanded
       top-level row keeps a 30px !important radius from Global Styles whose
       li.mega-align-* selector out-specifies a plain li.mega-menu-item, so the
       link selectors below repeat their classes (.mega-menu-item.mega-menu-item /
       .mega-menu-link.mega-menu-link) to raise specificity above it. */
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.mega-menu-item,
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.mega-menu-item a.mega-menu-link.mega-menu-link,
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 ul.mega-sub-menu.mega-sub-menu,
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-flyout ul.mega-sub-menu {
        border-radius: 0 !important;
    }
    /* true-black text on the grey top rows (not the gold My Account) + submenu */
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item:not(.mega-mobile-myaccount) > a.mega-menu-link,
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item ul.mega-sub-menu a.mega-menu-link {
        color: #000 !important;
    }
}

/* A6 — Unify Related Products with the category grid, 2-up on mobile.
   Finding: they already ARE the same component. The category archive and the
   single-product "Related Products" are both the WooCommerce Product Collection
   block (.wp-block-woocommerce-product-collection) — identical bordered cards
   (1px solid, 16px radius, 16px padding) and both already include the wishlist
   heart. The ONLY difference on mobile is column count: the related block
   (.related-products-custom, a columns-4 config) collapses to 1-up, while the
   category grid shows 2-up. So the whole fix is: make related 2-up on phones.

   Re: Q1 (should related cards get the wishlist heart) — moot; it's the same
   block, so the heart is already there. */
@media (max-width: 768px) {
    .related-products-custom ul.wc-block-product-template__responsive,
    .related-products-custom ul[class*="wc-block-product-template"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Add-to-cart button was position:absolute at a fixed top offset; in the
       narrow 2-up related cards a long (multi-line) title pushes the price down
       onto it, so the button covers the price. Let it flow below the price.
       (Font size is intentionally left at the theme's default 7px so related and
       category buttons match — per Jason.) */
    .related-products-custom .wp-block-button.wc-block-components-product-button {
        position: static !important;
        margin-top: 8px;
    }
}

/* A7 — Blog tile images: consistent proportions across breakpoints.
   The tiles are wp-block-cover blocks inside .blog-post-slider (a gtmt swiper
   carousel of wp-block-post items). Root cause: the cover has a HARD
   height/min-height of 190px, so as the slide width changes per breakpoint
   (308 desktop -> 212 mobile) the same-height/different-width box changes aspect
   ratio and the image (object-fit:cover, already set) crops differently.
   Fix per the note: drop the fixed height, set an aspect-ratio on the cover, let
   height follow width. Scoped to .blog-post-slider so it also covers the same
   carousel wherever else it appears. aspect-ratio is a CONFIRM value (16/10 keeps
   the desktop look ~308x192); content taller than the ratio still grows the box,
   so the overlay title is never clipped. */
.blog-post-slider .wp-block-cover {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important; /* CONFIRM ratio; !important needed to beat the block's height rules */
}

/* ==========================================================================
   B. PAGE-SPECIFIC
   ========================================================================== */

/* B1 — /learn/ : widen the content section on mobile.
   /learn/ is the posts page (body.blog). The "Precious Metals 101" content column
   measured 277px inside a 375px viewport because TWO ~24px global-padding layers
   stack: the page group (375->326) and then the cover block's inner container
   (326->277). The second ~24px layer lives on the cover block itself
   (.wp-block-cover.has-custom-content-position, not its inner container), so trim
   THAT on mobile: 24.5px -> 10px per side widens the 101 column ~277 -> ~306. The
   page-level padding is left intact so the outer rhythm is unchanged.
   CONFIRM value/reach: affects the learn page's cover sections generally; tune the
   10px or narrow the scope if the hero or another section reads too tight. */
@media (max-width: 781px) {
    body.blog .wp-block-cover.has-custom-content-position {
        padding-left: 10px;
        padding-right: 10px;
    }
    /* Sections like "Featured Products" sit in a gtmt 2-column flex layout and
       carry flex-basis:265px, so they never fill the width and leave a big gap on
       the right. On mobile, stack the columns and let each fill the row. */
    body.blog .wp-block-group.gtmt-has-2-cols-sm {
        flex-wrap: wrap !important;
    }
    body.blog .wp-block-group.gtmt-has-2-cols-sm > .wp-block-group {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}
/* B1b (review) — desktop: more space between the left text column and the tiles
   on the learn page's 2-col sections (Featured Products, Tax Guides). The row gap
   was only 8px. Mobile is untouched (it stacks, per B1 above). CONFIRM 32px. */
@media (min-width: 782px) {
    body.blog .wp-block-group.gtmt-has-2-cols-sm {
        gap: 32px;
    }
}

/* B2 — Product page mobile: price left-aligned, more space above.
   The main price is .wp-block-woocommerce-product-price.is-style-gtmt-large
   (a distinct "large" style, so card prices are not affected), centered via
   itself + inner .wc-block-components-product-price + .co-live-price (the live-
   price hole-punch span). The price BLOCK is a flex item in a
   flex-direction:column group with align-items:center — that's what centers it,
   so text-align alone can't move it; align-self:flex-start does. Add space above
   too. Scoped to single product + mobile so desktop and cards are unchanged. */
@media (max-width: 768px) {
    .single-product .wp-block-woocommerce-product-price.is-style-gtmt-large {
        align-self: flex-start !important; /* the actual left-align fix */
        text-align: left !important;
        margin-top: 24px; /* CONFIRM: was ~15px; "more space above" — tune to taste */
    }
    .single-product .wp-block-woocommerce-product-price.is-style-gtmt-large .wc-block-components-product-price,
    .single-product .wp-block-woocommerce-product-price.is-style-gtmt-large .co-live-price {
        text-align: left !important;
    }
}

/* B3 — Product page mobile: hide icons — OWNER: Jason, template-level. Not here. */

/* B4 — Recent Posts (sidebar Query Loop): larger images, everything left-aligned.
   Lives in <aside class="wp-block-template-part"> on single posts. Each post item
   is a flex COLUMN with align-items:center, so the 90px featured image is centered
   while the title/date sit at the left edge (x=24) — that's the "ragged" look.
   Fix: left-align the image (align-items:flex-start) and enlarge it to a bigger
   square thumbnail sharing the text's left edge. (Full-column width was tried but
   the block pins the image height to ~90px, producing a stretched 326x90 strip —
   so a fixed square with object-fit:cover is used instead.) Scoped to the
   single-post sidebar so other Query Loop blocks are untouched.
   CONFIRM: 150px thumbnail size — tune to taste. */
@media (max-width: 781px) {
    .single aside .wp-block-query li.wp-block-post > .wp-block-group {
        align-items: flex-start !important;
    }
    .single aside .wp-block-query .wp-block-post-featured-image {
        width: 100% !important;
        max-width: 150px !important; /* shrinks in narrow columns; never overflows */
        height: auto !important;     /* figure was pinned to 90px, so the 150px image
                                        overflowed it and the title overlapped — let
                                        the figure grow to the image height */
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .single aside .wp-block-query .wp-block-post-featured-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

/* B4-fix — Comment submit button runaway height.
   Pre-existing (present with custom.css disabled): WordPress core sets
   .wp-block-button__link { height: 100% }, and the comment form's flex column
   (.wp-block-columns.is-not-stacked-on-mobile) stretches, so the submit button
   inherits the full column height as a giant gold block. NitroPack masks it on
   production; it shows locally with NitroPack disconnected. Cap it back to auto. */
.comment-form .wp-block-button__link,
.comment-respond .wp-block-button__link {
    height: auto !important;
}

/* B5 — Checkout: more spacing around the logo.
   The checkout logo is the standard site logo (.wp-block-site-logo /
   .custom-logo-link) in the header template part; it currently sits with no
   padding. Scoped to checkout only (body.woocommerce-checkout) so the global
   header spacing is unchanged. The note couldn't tell whether the wanted spacing
   is above, below, or both (the reference was a 320x122 crop), so this adds it
   symmetrically. CONFIRM on a full checkout capture (ideally production, where the
   logo image actually renders) and adjust top/bottom independently if needed. */
body.woocommerce-checkout header .wp-block-site-logo,
body.woocommerce-checkout header .custom-logo-link {
    display: inline-block;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

/* B6 — Category toolbar: make the "Sort by" control match the "per page" pill.
   (Added during review — not in the original queue.) The products-per-page
   control draws its pill on the <form> wrapper (1px solid #b6b0ad, 30px radius,
   ~38px tall). The WooCommerce ordering <form> has no border (~34px tall), so the
   two dropdowns look mismatched. Give the ordering form the same pill and match
   the select height. Both selects already share bg/radius/padding. */
.woocommerce .woocommerce-ordering {
    border: 1px solid rgb(182, 176, 173);
    border-radius: 30px;
    background: rgb(246, 244, 242); /* the grey fill (matches the per-page pill) */
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;              /* clip the select to the pill's rounded corners */
}
.woocommerce .woocommerce-ordering select.orderby {
    min-height: 36px;
    border: 0 !important;          /* form is the single pill; no inner ring */
    border-radius: 0 !important;
    background-color: transparent !important; /* longhand so the arrow image below survives */
}
/* Dropdown arrow: replace the NATIVE arrow (which sits tight in the corner and
   reacts to padding unpredictably) with a CSS chevron, so the spacing is
   consistent and identical on both selects. background-image only — the selects'
   own background-color is left alone. */
.woocommerce .woocommerce-ordering select.orderby,
.woocommerce select.wppp-select,
.woocommerce form[class*="wppp"] select {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23302c2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 30px !important;
    padding-left: 14px !important;
}
/* The block wrapper (.wc-block-catalog-sorting / .co-catalog-sorting) ALSO draws
   its own 1px/30px-radius pill around the form — that's the "second pill" ring.
   Strip it so only the form pill (which matches the per-page control) shows. */
.woocommerce .wc-block-catalog-sorting,
.wc-block-catalog-sorting.co-catalog-sorting {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
/* Space the two pills apart — they sat ~6px apart ("right next to each other").
   The per-page form and the sort block aren't simple row siblings, so nudge the
   sort block right with a left margin. */
.wc-block-catalog-sorting {
    margin-left: 18px !important;
}

/* B7 (review) — Hide the trust-prop icons on mobile.
   The "Secure and Flexible Payments / Transparent and Honest Pricing / Backed by
   Decades of Trust" rows each pair a theme pattern SVG (lock / dollar / shield,
   in /themes/cusio-child/patterns/) inside figure.gtmt-flex-shrink-0 with a text
   group. On mobile, hide just the icon figure so the text takes the full width.
   Targeted via :has() on the pattern-SVG src so no other images are affected
   (these are the only /patterns/ images on the page). :has() is supported on iOS
   Safari 15.4+; if a much older device must be supported, say so and I'll switch
   to a non-:has() approach. */
@media (max-width: 768px) {
    figure.wp-block-image.gtmt-flex-shrink-0:has(> img[src*="/patterns/"]) {
        display: none !important;
    }
}

/* ==========================================================================
   C. BLOCKED / NOT CSS — see STYLE-QUEUE.md before adding anything here
   ========================================================================== */

/* C1 — Checkout subscription-emptied notice: filter the notice out in PHP,
   do not display:none it. Handled separately, not in this file. */

/* C2 — Product FAQ font + link colour: iPhone-only failure. Test with NitroPack
   bypassed BEFORE writing rules. Handled separately, not in this file. */