/*
 * V3 "Ivory & Navy" - shared rules for the "Resources" nav group's CMS
 * pages (who-is-lady-fortuna, why-buy-physical,
 * which-gold-and-silver-bullion-to-buy, videos-to-watch,
 * testing-gold-silver-purity, custom-minting, getting-help, faq) plus
 * selling-silver-gold's neighbours. One shared file rather than one
 * per-page file (product.css/live-price.css/sell.css's own pattern) since
 * these 8 pages are all the same species - long-form article or list
 * content - and splitting each into its own near-identical stylesheet
 * would just be the same handful of rules copied eight times instead of
 * once. Loaded on top of core.css.
 *
 * .v3-section, .v3-section-header, .v3-alert*, .v3-tnum are already in
 * core.css - not redefined here.
 */

/* ============================================================
   HERO - same shape as sell.css/live-price.css's own eyebrow/title/sub,
   copied rather than shared (each page-specific stylesheet carries its
   own copy of this pattern - see live-price.css:10-15's note on the
   convention this follows).
   ============================================================ */
.v3-res-hero { padding-top: 32px; }
/* .v3-banner-slot's own top margin (core.css, 48px) assumes it follows
   real page content - here it's the hero's first element, so the hero's
   own padding-top above is the only gap needed. Same fix as
   order.css/product.css's own copy of this pattern. */
.v3-res-hero > .v3-inner > .v3-banner-slot:first-child { margin-top: 0; }

.v3-res-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.v3-res-title { font-size: 34px; line-height: 1.2; color: var(--ink); margin-bottom: 10px; max-width: 26ch; }
.v3-res-sub { font-size: 15px; color: var(--ink-soft); margin: 0; max-width: 62ch; }

/* Section subtitle under a .v3-section-header h2 - copied from
   live-price.css/sell.css's own copy of this pattern (how-to-order's
   bonus "Difficulty placing an order" section uses it). */
.v3-lp-h2-sub { font-size: 13.5px; color: var(--ink-soft); margin: -20px 0 24px; }
@media (max-width: 640px) {
    .v3-res-title { font-size: 26px; }
}

/* jump-to nav - identical markup/behaviour to sell.css's .v3-sell-toc,
   copied under this file's own prefix (faq.php is the one page here that
   uses it). */
.v3-res-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.v3-res-toc a {
    display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--plate); color: var(--ink);
    font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.v3-res-toc a:hover { border-color: var(--accent); color: var(--accent); }
.v3-res-anchor { scroll-margin-top: 100px; }

/* ============================================================
   ARTICLE PROSE - long-form body copy: who-is-lady-fortuna,
   why-buy-physical, which-gold-and-silver-bullion-to-buy,
   testing-gold-silver-purity.
   ============================================================ */
/* Every page here puts this class directly on the same div as .v3-inner
   (never nested separately) rather than nesting a narrower column
   inside it. A max-width on .v3-article itself would fight .v3-inner's
   own max-width:1200/margin:0 auto on that same box: the margin:auto
   stays (unchallenged) but now centers a 760px box instead of sitting
   flush-left like the hero title and every other section - two
   different "centered width" roles can't coexist on one element.
   Leaving .v3-article's own box exactly as wide as .v3-inner (no
   max-width/margin override here) and instead capping each *child*
   keeps the outer box's centering intact while still giving prose a
   readable measure, left-aligned within it like everything else. */
.v3-article { font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
.v3-article > * { max-width: 760px; }
.v3-article > * + * { margin-top: 18px; }
/* The bottom banner rail sometimes sits inside .v3-article as a trailing
   child (see pages that pass banners_bot through this same div) - excluded
   from both rules above so it spans the full .v3-inner width like the top
   banner instead of being capped to the 760px prose measure, and keeps
   core.css's own 48px top margin instead of the 18px paragraph spacing. */
.v3-article > .v3-banner-slot { max-width: none; margin-top: 48px; }
.v3-article h2 { font-size: 22px; color: var(--ink); margin-top: 40px; }
.v3-article h2:first-child { margin-top: 0; }
.v3-article h3 { font-size: 16.5px; font-weight: 700; font-family: Manrope, sans-serif; color: var(--ink); margin-top: 32px; }
.v3-article h3:first-child { margin-top: 0; }
.v3-article strong { color: var(--ink); }
.v3-article a { color: var(--accent); font-weight: 600; text-decoration: none; }
.v3-article a:hover { text-decoration: underline; }
.v3-article ul, .v3-article ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.v3-article li::marker { color: var(--accent); font-weight: 700; }
.v3-article img { max-width: 100%; height: auto; border-radius: 14px; display: block; }

/* Inline float images (align="left"/"right" in the legacy source) - a
   fixed width keeps body text from being squeezed to a sliver next to a
   full-bleed image on a 760px-wide column; stacks full-width on mobile
   since floats at this column width don't leave enough text to wrap. */
.v3-article .v3-figure-side { max-width: 260px; border-radius: 14px; margin-bottom: 4px; }
.v3-article .v3-figure-side.is-left { float: left; margin: 4px 20px 14px 0; }
/* float:right resolves against .v3-article's own box, which (per that
   class's docblock above) is left at .v3-inner's full width rather than
   760px - without this, a right-floated image hugs the far edge of that
   full-width box instead of the 760px text column, landing in the empty
   margin well past where the paragraphs actually end. Reserving that gap
   (100% of the box minus the column, floored at 0 once the box itself
   shrinks below 760px on narrower viewports) pulls it back to the
   column's true right edge instead. */
.v3-article .v3-figure-side.is-right { float: right; margin: 4px 0 14px 20px; margin-right: max(0px, calc(100% - 760px)); }
@media (max-width: 640px) {
    .v3-article .v3-figure-side { float: none; max-width: 100%; margin: 0; }
}

.v3-article figure { margin: 0; }
/* .v3-article figure's own margin:0 above has higher specificity than the
   generic .v3-article > * + * prose-spacing rule, so it silently wins and
   two stacked figures (storage-for-silver-gold, testing-gold-silver-purity)
   end up flush against each other. Restore the gap for that one case. */
.v3-article > figure + figure { margin-top: 18px; }
.v3-article figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; font-style: italic; }

.v3-fact-card {
    margin: 0; padding: 18px 22px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 14px; max-width: 420px; display: flex; flex-direction: column; gap: 8px;
}
/* Each row is <div><strong>Label</strong> value text</div> - a flex row
   keeps the label a fixed-width column so a long value (e.g. a full
   street address) wraps within its own space instead of an inline-block
   label letting the wrapped line fall back to the row's left edge,
   underneath the label. Flex here has no wrapper needed: bare text
   content directly inside a flex container is auto-boxed into an
   anonymous flex item per spec, so the trailing value text becomes the
   second column on its own. */
.v3-fact-card div { display: flex; gap: 8px; font-size: 14px; color: var(--ink); }
.v3-fact-card strong { flex: 0 0 130px; color: var(--ink-soft); font-weight: 700; }
.v3-fact-card--wide { max-width: none; }
@media (max-width: 480px) {
    .v3-fact-card div { flex-direction: column; gap: 2px; }
    .v3-fact-card strong { flex-basis: auto; }
}

/* contact-us: address + phone/email/WhatsApp cards side by side. */
.v3-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 640px) { .v3-contact-grid { grid-template-columns: 1fr; } }
/* Email & Social Media (the .v3-article block below the map/cards) is now
   this same section's second .v3-inner rather than its own .v3-section -
   restores the inter-section gap lost when they merged into one .v3-section.
   Not nested inside the first .v3-inner because .v3-article > * { max-width:
   760px } would otherwise clamp the 2-column card grid down to article-prose
   width. */
.v3-contact-article { margin-top: 48px; }

/* contact-us: Google Maps embed - fixed height, not the 16:9 aspect-ratio
   .v3-video-embed uses for YouTube, so it gets its own rule rather than
   reusing that class with inline overrides. Lives in the hero section
   (v3-res-hero) right after the office-hours paragraph, so it needs its
   own top spacing rather than relying on a preceding section's padding. */
.v3-res-sub + .v3-map-embed { margin-top: 32px; }
.v3-map-embed { position: relative; width: 100%; height: 320px; border-radius: 14px; overflow: hidden; }
.v3-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.v3-pull-quote {
    font-family: Newsreader, serif; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink);
    border-left: 3px solid var(--accent); padding-left: 20px; margin: 32px 0;
}

/* Responsive 16:9 iframe embed - legacy's .video_frame had a fixed
   pixel width/height baked into 01-*.css (not ported to V3), which broke
   on any viewport narrower than that; wrapping the iframe keeps it fluid
   instead. */
.v3-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--panel); }
.v3-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v3-article .v3-video-embed { max-width: 640px; }

/* ============================================================
   VIDEO GRID - videos-to-watch.
   ============================================================ */
.v3-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
@media (max-width: 900px) { .v3-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .v3-video-grid { grid-template-columns: 1fr; } }
.v3-video-card-title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; margin: 12px 0 4px; }
.v3-video-card-meta { font-size: 12.5px; color: var(--ink-soft); }

/* ============================================================
   NUMBERED PROCESS LIST - custom-minting. Copied from sell.css's
   .v3-sell-steps under this file's own prefix (same duplication
   convention as the hero block above).
   ============================================================ */
.v3-cms-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 30px; max-width: 720px; }
.v3-cms-step { display: flex; gap: 20px; align-items: flex-start; }
.v3-cms-step-num {
    flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
    display: flex; align-items: center; justify-content: center; font-family: Newsreader, serif; font-size: 18px; font-weight: 600;
}
.v3-cms-step-body h3 { margin: 0 0 6px; font-size: 17px; font-family: Newsreader, serif; color: var(--ink); }
.v3-cms-step-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.v3-cms-step-body li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.v3-cms-step-body li::marker { color: var(--accent); }

.v3-note-card {
    padding: 18px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    max-width: 720px; font-size: 14px; line-height: 1.7; color: var(--ink-soft);
}
.v3-note-card strong { color: var(--ink); }
.v3-note-card ul { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.v3-note-card li::marker { color: var(--accent); }

/* ============================================================
   HELP LIST - getting-help.
   ============================================================ */
.v3-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 720px; }
.v3-help-row {
    display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.v3-help-row:first-child { padding-top: 0; }
.v3-help-row:last-child { border-bottom: 0; }
.v3-help-icon {
    flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--panel); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.v3-help-row-body { flex: 1 1 auto; color: inherit; text-decoration: none; }
.v3-help-row-q { font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.v3-help-row-a { font-size: 13.5px; color: var(--accent); font-weight: 600; }
.v3-help-row-arrow { flex: none; color: var(--ink-soft); font-size: 13px; transition: transform .15s ease; }
.v3-help-row:hover .v3-help-row-a { text-decoration: underline; }
.v3-help-row:hover .v3-help-row-arrow { transform: translateX(3px); color: var(--accent); }

/* ============================================================
   FAQ - grouped .v3-disclosure accordion. .v3-disclosure copied
   verbatim from cart.css/order.css/sell.css's identical copies (see
   sell.css's own note - core.css doesn't define this despite
   live-price.css's docblock claiming it does).
   ============================================================ */
.v3-disclosure { border: 1px solid var(--line); border-radius: 14px; background: var(--plate); margin-bottom: 14px; overflow: hidden; }
.v3-disclosure summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
    cursor: pointer; list-style: none;
}
.v3-disclosure summary::-webkit-details-marker { display: none; }
.v3-disclosure-title { font-family: Manrope, sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.v3-disclosure-icon { color: var(--ink-soft); font-size: 13px; transition: transform .2s ease; flex: none; }
.v3-disclosure[open] .v3-disclosure-icon { transform: rotate(180deg); }
.v3-disclosure-body { padding: 0 20px 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.v3-disclosure-body p { margin: 14px 0 0; }
.v3-disclosure-body a { color: var(--accent); font-weight: 600; text-decoration: none; }
.v3-disclosure-body a:hover { text-decoration: underline; }

.v3-faq-group { max-width: 760px; }
.v3-faq-group + .v3-faq-group { margin-top: 8px; }

/* ============================================================
   TIMELINE - milestones. Single-column (not legacy's alternating
   left/right zig-zag) so every entry reads left-aligned like the
   rest of the v3 CMS pages, per the standardization pass that
   introduced this file's timeline/gallery/testimonial rules.
   ============================================================ */
.v3-timeline { list-style: none; margin: 0; padding: 0; max-width: 720px; position: relative; }
.v3-timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.v3-timeline-item { position: relative; padding: 0 0 36px 30px; }
.v3-timeline-item:last-child { padding-bottom: 0; }
.v3-timeline-dot { position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--page); border: 2px solid var(--accent); }
.v3-timeline-year { font-family: Newsreader, serif; font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .03em; margin-bottom: 4px; }
.v3-timeline-title { font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.v3-timeline-body { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.v3-timeline-img { margin-top: 12px; max-width: 320px; width: 100%; border-radius: 12px; display: block; }

/* ============================================================
   PHOTO GALLERY - photos. Grouped sections (one per event/year),
   each a responsive grid of image + caption cards.
   ============================================================ */
.v3-photo-group { margin-bottom: 40px; }
.v3-photo-group:last-child { margin-bottom: 0; }
.v3-photo-group-title { font-size: 17px; font-family: Newsreader, serif; color: var(--ink); margin: 0 0 6px; }
.v3-photo-group-sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.6; max-width: 760px; }
/* No align-items:start - grid's default stretch is wanted here, so every
   card in a row grows to the tallest one and their bottom edges line up. */
.v3-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.v3-photo-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.v3-photo-card a { display: block; }
/* No fixed height/object-fit - gallery photos span very different aspect
   ratios (portrait event shots, wide group photos, square logos), so each
   image renders at its own natural ratio and the border hugs the real
   photo edges, rather than cropping it (cover) or leaving padding around
   a letterboxed image (contain). Row height evens out via the stretch
   above: the slack sits below the caption as plain card background. */
/* border-radius:0 - on pages where .v3-photo-card sits inside .v3-article
   (e.g. certification-of-authenticity), the generic .v3-article img rule
   above also rounds the image itself, double-rounding it against the
   card's own overflow:hidden clip and rounding the image's bottom corners
   right above the caption. The card alone should own the rounding. */
.v3-photo-card img { width: 100%; height: auto; display: block; border-radius: 0; }
.v3-photo-card-caption { padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* ============================================================
   TESTIMONIAL GRID - testimonials.
   ============================================================ */
.v3-testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .v3-testimonial-grid { grid-template-columns: 1fr; } }
.v3-testimonial-card { padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; }
.v3-testimonial-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 0; }
.v3-testimonial-quote { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); font-style: italic; margin: 0; }
.v3-testimonial-quote::before { content: '\201C'; }
.v3-testimonial-quote::after { content: '\201D'; }
.v3-testimonial-author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.v3-testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
.v3-testimonial-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.v3-testimonial-role { font-size: 12px; color: var(--ink-soft); }
.v3-testimonial-role a { color: var(--accent); text-decoration: none; }
.v3-testimonial-role a:hover { text-decoration: underline; }