/* =============================================================
   Wrapmate v3 — monochrome restyle (theme-level implementation)
   Loaded AFTER style.css (see inc/scripts.php `base-theme`), so it
   overrides the base orange/blue theme with a clean black / white +
   orange-accent system. Precise BEM selectors; !important is used
   only where a same-specificity base rule would otherwise win.
   ============================================================= */

:root {
    --wm-black:        #000000;
    --wm-white:        #ffffff;
    --wm-orange:       #ffb100; /* accent ONLY */
    --wm-orange-hover: #e09e00;
    --wm-border-gray:  #e5e5e5;
    --wm-light-gray:   #f7f7f7;
    --wm-hover-gray:   #6b6b6b; /* card title hover */
    --wm-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- 9. Inter sitewide (font enqueued in inc/scripts.php) ---- */
body,
button, input, select, textarea,
.btn,
h1, h2, h3, h4, h5, h6,
.post-card__title,
.heading, .heading h1, .heading h2 {
    font-family: var(--wm-sans);
}

/* ---- 1. Monochrome color pass ---- */
/* Default links -> black (neutralizes the theme's orange <a>). */
a {
    color: var(--wm-black);
}
a:hover,
a:focus {
    color: var(--wm-hover-gray);
}
/* Headings, section heading, meta, listing text -> black. */
h1, h2, h3, h4, h5, h6,
.heading, .heading h1, .heading h2,
.post-card__title,
.post-card__name,
.post-card__time {
    color: var(--wm-black);
}
/* Icons / inline SVGs follow text color (black). The grafted v4 nav/footer icons
   are exempted separately in the v4 chrome section below. */
svg {
    fill: currentColor;
    color: var(--wm-black);
}

/* Inline body-text links in single-post content -> orange. */
.content-post a {
    color: var(--wm-orange);
}
.content-post a:hover {
    color: var(--wm-orange-hover);
}
/* ...but category labels, tags, and byline stay black (not body copy). */
.content-post a[rel~="category"],
.content-post .tags-list a,
.content-post .post-card__footer a {
    color: var(--wm-black);
    -webkit-text-fill-color: var(--wm-black);
}
.content-post a[rel~="category"]:hover,
.content-post .tags-list a:hover {
    color: var(--wm-hover-gray);
    -webkit-text-fill-color: var(--wm-hover-gray);
}
/* Content headings can carry an inline color baked in by the block editor — e.g.
   the blue #377ef9 "Ready to get your graphics?" headline in the shared CTA block.
   Force them black to match the monochrome design; !important beats the inline
   style. (The staged content scrub removes the blue at the source on activation;
   this covers the preview and any future inline-colored headings.) Targeted to
   headings so it can't touch the black-pill button, whose blue was a background. */
.content-post h1,
.content-post h2,
.content-post h3,
.content-post h4,
.content-post h5,
.content-post h6 {
    color: var(--wm-black) !important;
    -webkit-text-fill-color: var(--wm-black);
}

/* Article tag pills — the v3 theme gives them a pale-orange fill (#FEF3E2) and
   orange text. Make them monochrome: light-grey chip with a subtle border and a
   black hover (matches the button language). Text is already black (grouped rule
   above); this handles the fill/border and hover. */
.content-post .tags-list a {
    background: var(--wm-light-gray);
    border-color: var(--wm-border-gray);
}
.content-post .tags-list a:hover {
    color: var(--wm-white);
    -webkit-text-fill-color: var(--wm-white);
    background: var(--wm-black);
    border-color: var(--wm-black);
}

/* =============================================================
   Uniform 16:9 featured-image framing — force every post image into one
   standard blog ratio with a fit-to-frame (center) crop, so cards and the
   single-post hero all look consistent regardless of the source ratio.
   ============================================================= */

/* All post-card preview images (homepage lead card, 3-up row, category grids). */
.post-card__visual {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.post-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single-post hero image (rounded to match the card system). */
.featured-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.featured-image picture {
    display: block;
    height: 100%;
}
.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

/* ---- 2. Buttons: black pill, white label ----
   The theme sets -webkit-text-fill-color, so we MUST set it too or the
   white label renders invisible on the black pill. */
.btn,
.btn-default,
.btn-primary,
.btn-primary--line {
    color: var(--wm-white);
    -webkit-text-fill-color: var(--wm-white);
    background: var(--wm-black);
    border-color: var(--wm-black);
    border-radius: 999px;
}
.btn:hover,
.btn-default:hover,
.btn-primary:hover,
.btn-primary--line:hover {
    color: var(--wm-white);
    -webkit-text-fill-color: var(--wm-white);
    background: var(--wm-hover-gray);
    border-color: var(--wm-hover-gray);
}

/* In-content WordPress button blocks (e.g. the "Get your exact price" CTA
   inside articles). These are .wp-block-button__link, NOT the theme .btn, and
   the block editor bakes an inline style="background-color:#377ef9" (blue)
   into each one. Inline styles can only be beaten with !important — the only
   alternative is editing every post's content, which we won't do. The white
   label needs -webkit-text-fill-color set too, and beats .content-post a
   (0,2,0 > 0,1,1) so the CTA text isn't the orange body-link color. */
.content-post .wp-block-button__link {
    background-color: var(--wm-black) !important;
    color: var(--wm-white);
    -webkit-text-fill-color: var(--wm-white);
    border-radius: 999px;
}
.content-post .wp-block-button__link:hover,
.content-post .wp-block-button__link:focus {
    background-color: var(--wm-hover-gray) !important;
    color: var(--wm-white);
    -webkit-text-fill-color: var(--wm-white);
}

/* MailPoet newsletter "Subscribe!" submit — a bare <input type="submit"> the
   theme colors orange via input[type=submit]. Bring it into the black-pill
   system. .mailpoet_form .mailpoet_submit (0,2,0) beats input[type=submit] (0,1,1). */
.mailpoet_form .mailpoet_submit {
    background-color: var(--wm-black);
    color: var(--wm-white);
    -webkit-text-fill-color: var(--wm-white);
    border: none;
    border-radius: 999px;
    font-weight: 600;   /* match the theme's other buttons (.btn) */
}
.mailpoet_form .mailpoet_submit:hover {
    background-color: var(--wm-hover-gray);
}

/* ---- 3. Post cards (listing + single "Similar stories" share the partial) ---- */
.post-card,
.post-card:hover {
    border-radius: 18px;
    background: var(--wm-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);   /* tight, matches v4 house style. :hover repeats the
                                                    same value to override the base theme's wide soft
                                                    hover shadow (style.css: 0 24px 64px -4px #EB96101A)
                                                    so the shadow is constant — no hover effect. */
}
/* Only the OUTER card casts a shadow — kill any nested shadow. */
.post-card *,
.post-card__body,
.post-card__visual {
    box-shadow: none;
}
/* Remove the byline entirely (avatar + author + read-time) AND its divider line,
   EVERYWHERE it appears: post cards (inside .post-card) and the single-post
   article header (.content-post .post-card__footer). We don't distinguish who
   wrote an article, so no byline shows on any post. */
.post-card__footer {
    display: none;
}
/* The byline's border used to separate the article title from the body. With the
   byline hidden, restore that separation as a divider under the single-post title
   (h1). Single posts only (.content-post) — post-card titles stay clean. */
.content-post h1 {
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wm-border-gray);
}

/* ---- 4. Typography ---- */
.post-card__title {
    font-weight: 700;
    font-size: 1.25rem;   /* 20px — card title size (was 1.5rem/24px via global h2). Adjust here. */
    line-height: 1.3;
    margin-bottom: 0;     /* the byline this margin separated is now hidden */
}
/* Tighten the card's bottom whitespace (was 13px mobile / 19px desktop). */
.post-card__body {
    padding-bottom: 24px;
}
/* Section heading ("Wrapmate News") stays heavier so it isn't flattened. */
.heading h2 {
    font-weight: 800;
}
/* Category section icons are <img>-embedded SVGs (blue) — CSS fill/color can't
   reach inside an <img>, so brightness(0) renders them as a solid black
   silhouette to match the monochrome heading. */
.heading .icon img {
    filter: brightness(0);
}
h2 { font-size: 1.5rem; line-height: 120%; }
h3 { font-size: 1.2rem; line-height: 150%; }

/* ---- 5. Card title hover ----
   The whole card is one <a> (.post-card); recolor ONLY the title on hover.
   NOT .gallery-posts:hover (lights all 3) and NOT a:hover * (bleeds to surface). */
.post-card:hover .post-card__title {
    color: var(--wm-hover-gray);
    -webkit-text-fill-color: var(--wm-hover-gray);
    transition: color 0.15s ease;
}

/* =============================================================
   v4 chrome integration — grafted header (.v4-nav-wrapper) + footer (.v4-footer)
   Keeps the monochrome globals above from leaking into the v4 regions, and
   clears the fixed nav. v4 nav.css/footer.css otherwise own these regions.
   ============================================================= */

/* Fixed floating nav clearance — push page content below it. */
#main { padding-top: 5rem; }
@media (min-width: 768px)  { #main { padding-top: 6rem; } }
@media (min-width: 1024px) { #main { padding-top: 6.5rem; } }

/* v4 icons are stroke-based (fill=none stroke=currentColor). My global
   svg{fill:currentColor;color:#000} would fill them solid and blacken the
   footer's icons invisibly. Let the v4 regions control their own icons. */
.v4-nav-wrapper svg,
.v4-nav-overlay svg,
.v4-mobile-menu svg,
.v4-footer svg {
    fill: none;
    color: inherit;
}

/* Dark footer: don't let my global a{color:#000} make links invisible. */
.v4-footer a { color: inherit; }
.v4-footer a:hover { color: #fff; }

/* Header nav text colors — match wrapmate.com exactly. On the main site, hovering
   a nav item ONLY changes the background (to --muted); the text stays dark
   (--foreground). On the blog, the legacy theme's global button{} rule and my
   monochrome a:hover were leaking white/grey text (and -webkit-text-fill-color)
   into the v4 nav links and dropdown-trigger <button>s. Pin them to the v4 palette
   in every state so only the hover background changes. */
.v4-nav-wrapper .v4-nav-link,
.v4-nav-wrapper .v4-nav-link:hover,
.v4-nav-wrapper .v4-nav-link:focus,
.v4-nav-wrapper .v4-nav-dropdown-trigger,
.v4-nav-wrapper .v4-nav-dropdown-trigger:hover,
.v4-nav-wrapper .v4-nav-dropdown-trigger:focus,
.v4-nav-wrapper .v4-nav-dropdown-menu a,
.v4-nav-wrapper .v4-nav-dropdown-menu a:hover,
.v4-nav-wrapper .v4-mobile-link,
.v4-nav-wrapper .v4-mobile-accordion-trigger,
.v4-nav-wrapper .v4-mobile-accordion-panel a:hover {
    color: var(--foreground);
    -webkit-text-fill-color: var(--foreground);
}
/* Mobile accordion sub-links are intentionally muted at rest (dark on hover above). */
.v4-nav-wrapper .v4-mobile-accordion-panel a {
    color: var(--muted-foreground);
    -webkit-text-fill-color: var(--muted-foreground);
}

/* Nav logo: keep nav.css's size, but hard-center it vertically. An inline <img>
   sits on the text baseline (descender gap beneath it), so it reads as too high
   in the flex bar. inline-flex on the link + a block img centers it cleanly
   without changing the size. */
.v4-nav .v4-nav-logo {
    display: inline-flex;
    align-items: center;
}
.v4-nav .v4-nav-logo img {
    display: block;
}

/* =============================================================
   Blog breadcrumb trail (blocks/breadcrumbs.php)
   Sits just under the floating v4 nav (top of #main), on the grey canvas,
   aligned to the content .container. Hidden on the home page (partial returns).
   ============================================================= */
.wm-subnav {
    padding-top: 1.75rem;     /* push the trail clear of the floating header */
    margin-bottom: 1.75rem;
}

/* Breadcrumb trail */
.wm-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--wm-hover-gray);
}
.wm-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.wm-breadcrumbs li + li::before {
    content: "/";
    color: #c4c4c4;
}
.wm-breadcrumbs a {
    color: var(--wm-hover-gray);
    text-decoration: none;
    white-space: nowrap;
}
.wm-breadcrumbs a:hover {
    color: var(--wm-black);
}
.wm-breadcrumbs [aria-current="page"] {
    color: var(--wm-black);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* Floating header: the fixed white nav card sits over the page canvas. Match
   the canvas to the content sections' light grey (#fafafa) so the header reads
   as floating instead of sitting on a white strip. #wrapper (ID) beats the
   theme's [id='wrapper']{background:#fff} attribute selector. */
body,
.page-holder,
#wrapper {
    background: #fafafa;
}