/* Mexperience Article / Page restyle — PREVIEW (admins only)
 * ---------------------------------------------------------------------------
 * Loaded only for logged-in admins on singular posts & pages (see functions.php:
 * `mex-article`, gated by current_user_can('manage_options')). Public visitors
 * do NOT get this file, so the live site is unchanged until we drop the gate.
 *
 * Builds on the tokens already declared in mex-cards.css:
 *   --mex-red #ce1126 · --mex-red-dark #a50e1f · --mex-red-light #e5384d
 *   --mex-gold #E88B00 · --mex-stone #FAF9F7 · --mex-grey #6f6f6f
 *   --mex-ink #191919 · --mex-border #e7e3df
 * Type system (locked): titles/UI = Open Sans; body/excerpt = Libre Baskerville.
 * ------------------------------------------------------------------------- */

:root {
    --mex-radius: 8px;
    --mex-radius-lg: 12px;
}

/* ===========================================================================
   1. FEATURED IMAGE — rounded (all corners) + slim red top accent (EPN-style)
   Posts use .entry-thumbnail; pages use .entry_mast_image.
   =========================================================================== */
/* EPN-style: image rounded on all four corners, with a slim red accent along
   the top edge that follows the rounded corners, plus a soft shadow for depth.
   The accent is a top border on the image itself (curves into the top radius),
   so it needs no pseudo-element and never clashes with the ribbon label. */
.single-post .entry-thumbnail img,
.entry_mast_image:not(.entry_mast_image_225_narrow) img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mex-radius-lg);
    border-top: 4px solid var(--mex-red);
    /* "Lifted print" elevation: a deeper but CONTAINED shadow (negative spread,
       offset downward) so the image visibly floats above the page yet stays
       crisp and elegant rather than a washed-out diffuse blur. Slightly warm to
       stay on-palette with the stone/sand tones. */
    /* Warm-black shadow: essentially neutral with the faintest warmth. */
    box-shadow: 0 18px 30px -14px rgba(38, 34, 34, 0.34),
                0 6px 12px -6px rgba(38, 34, 34, 0.22);
}

/* The post thumbnail is wrapped in a link — kill the theme's underline border
   and let the anchor wrap the rounded image cleanly. */
.single-post .entry-thumbnail a {
    display: block;
    border-bottom: 0 !important;
    border-radius: var(--mex-radius-lg);
}

/* ===========================================================================
   2. HEADER — remove the "by [author]" byline (preview: hidden via CSS)
   =========================================================================== */
.single-post .entry-header .entry-author,
.entry-header.entry-header-content-single .entry-author {
    display: none !important;
}

/* ===========================================================================
   3. HEADER CHIP — small label above the headline, left, opposite the date.
   Rendered (admin-gated) as <span class="entry-chip"> at the top of the header.
   =========================================================================== */
.entry-chip {
    float: left;
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.5;
    color: var(--mex-clay);
    background: var(--mex-stone);
    border: 1px solid var(--mex-border);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(38, 34, 34, 0.10);
}

/* Keep the title on its own line below the chip/date row. */
.entry-header .entry-chip + .entry-cats,
.entry-header .entry-chip ~ .entry-title {
    clear: both;
}
.single-post .entry-header .entry-title,
.entry-header.entry-header-content-single .entry-title {
    clear: both;
}

/* Header spacing — tighten the gaps around the headline.
   A: chip -> headline (halved).  B: headline -> excerpt (snug, not choked). */
.single-post .entry-header-content-single h1.entry-title {
    padding-top: 6px;      /* was ~15px: space A */
    padding-bottom: 8px;   /* was 20px: space B — a touch more breathing room to the excerpt */
}
.single-post .entry-header-content-single .page-summary.deck {
    margin-top: 0;
}

/* Pages — tighten the space between the page title and the mast image. The theme
   piles on several rules: `.page .entry-header h1.entry-title { margin:0 0 20px }`
   and, at desktop, `{ margin:0 0 30px }`, plus `.entry-header h1.entry-title
   { padding-bottom:10px !important }`. We zero the padding and set a snug margin,
   with !important so it beats the theme's !important padding. All breakpoints. */
.page .entry-header h1.entry-title {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}

/* Sidebar-label alignment (PREVIEW / admin-only, lives here not in the public
   sidebar-cards.css). On desktop the content column and sidebar start on the
   same top row, but the header chip's border+padding+leading push its text ~6px
   below the column top, whereas the bare eyebrow label has almost none — so the
   label reads too high. Drop the first sidebar card group so its LABEL font-top
   lines up with the chip / date text. Only inside the 2-column desktop layout;
   on mobile the sidebar stacks below, so this is scoped to the float breakpoint. */
@media screen and (min-width: 1023px) {
    .single-post #blog-sidebar .mex-sidebar-cards:first-of-type,
    .page #blog-sidebar .mex-sidebar-cards:first-of-type {
        margin-top: 6px;
    }
}
/* Tablet range (iPad landscape, 1023–1259px): still the 2-column layout, but the
   theme's max-width:1259 rules shift the header, so the label needs a bit more
   drop than the wide-desktop 6px to line up with the chip / date. */
@media screen and (min-width: 1023px) and (max-width: 1259px) {
    .single-post #blog-sidebar .mex-sidebar-cards:first-of-type,
    .page #blog-sidebar .mex-sidebar-cards:first-of-type {
        margin-top: 11px;
    }
}

/* Date — deliberately quiet metadata (no chip): small grey Open Sans, preceded
   by a subtle calendar glyph, floated to the right so it balances the author
   chip without competing with it. Vertically centred on the chip's box height
   (12px * 1.5 + 4px*2 padding + 1px*2 border ~= 28px) so the two read level. */
.single-post .entry-header-content-single .entry-date {
    float: right;
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    font-style: normal !important;
    color: var(--mex-grey) !important;
    /* Divider drawn as a 1px-wide, 15px-tall terracotta line on the left edge,
       vertically centred — a touch taller than the text so it reads as a
       deliberate rule, but shorter than the full chip height. */
    background: linear-gradient(var(--mex-clay), var(--mex-clay)) no-repeat left center / 1px 13px;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 10px;
    box-shadow: none;
    line-height: 28px;
    /* Nudge up so the date text-top aligns with the chip / sidebar label (the
       right float otherwise drops a few px below the chip's text baseline). */
    margin: -8px 0 0;
}

/* ===========================================================================
   4. FOOTER — refined section headings, card-style tag chips, red newsletter
   pill. Share icons left at plugin default. All toggles (suppress_*) untouched.
   =========================================================================== */

/* --- "Read more articles about" heading — light, refined muted-grey label
       with wide tracking and a delicate accent rule. The !important flags beat
       a legacy rule (.single-post .post .entry-meta .entry-tags span) that
       forces bold + letter-spacing:inherit. --- */
.single-post footer.entry-meta .entry-tags span,
.page footer.entry-meta .entry-tags span {
    display: block;
    position: relative;
    flex: 0 0 100%;         /* heading on its own line; chips wrap beneath */
    margin: 0 0 12px;
    padding: 0 0 9px;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    color: var(--mex-grey) !important;
}
.single-post footer.entry-meta .entry-tags span::after,
.page footer.entry-meta .entry-tags span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--mex-red);
}
.single-post footer.entry-meta .entry-tags span br,
.page footer.entry-meta .entry-tags span br {
    display: none;
}

/* --- Tag chips laid out orderly beneath the heading. --- */
.single-post footer.entry-meta .entry-tags,
.page footer.entry-meta .entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* --- Tag links → same look as the search-page card chips (.mex-card .card-tag
       in mex-cards.css: stone fill, 1px border, 0.2px tracking) but sized up
       ~25–30% for these post/page footers: 14px text (vs 11px), 4px 12px padding
       (vs 2px 9px), 5px radius.
       The whole `border` is set `!important` to beat a legacy rule
       (".entry-tags a { border-bottom:1px solid #CE1126 !important }" in
       mexperience.css) that otherwise paints a lone red underline on each chip.
       Hover is `!important` to beat the global ".entry-meta a:hover {color:red}"
       rule that would otherwise make the text red-on-red. --- */
.single-post footer.entry-meta .entry-tags a,
.page footer.entry-meta .entry-tags a {
    display: inline-block;
    margin: 0;
    padding: 4px 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: var(--mex-grey);
    background: var(--mex-stone);
    border: 1px solid var(--mex-border) !important;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.single-post footer.entry-meta .entry-tags a:hover,
.page footer.entry-meta .entry-tags a:hover {
    background: var(--mex-red) !important;
    color: #fff !important;
    border-color: var(--mex-red) !important;
    text-decoration: none;
}

/* --- Newsletter: remove the "Mexico Newsletter - Free" heading, left-align,
       and make the button a terracotta rounded pill. --- */
.newsletter-footer-widget .topics_label {
    display: none !important;
}
.newsletter-footer-widget {
    text-align: left !important;
}
.newsletter-footer-widget a.standard-btn,
.newsletter-footer-widget a.standard-btn.green-btn {
    background: var(--mex-clay);
    color: #fff;
    border-radius: 999px;
    padding: 14px 28px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: none;
    box-shadow: 0 3px 10px rgba(181, 98, 60, 0.28);
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.newsletter-footer-widget a.standard-btn:hover,
.newsletter-footer-widget a.standard-btn.green-btn:hover {
    background: #9a5233;
    color: #fff;
    box-shadow: 0 5px 16px rgba(181, 98, 60, 0.34);
    transform: translateY(-1px);
}

/* --- Share icons: original plugin styling kept; remove the "Share This:"
       heading and let the icons sit left. --- */
footer .simple-social-icons .topics_label,
.simple-social-icons.widget .topics_label {
    display: none !important;
}
footer .simple-social-icons ul.alignleft {
    float: none;
    margin: 0;
}

/* --- Footer + comments left-alignment. Root cause (diagnosed via headless
       DevTools): mobile-menus.css is a stale FULL duplicate of the main
       stylesheet that loads AFTER mexperience.css and still carries a desktop
       (@media min-width:1023px) "padding-left:24px" on ".post .entry-meta" and
       "#comments" — the same rule that was commented out in mexperience.css
       (mobile-menus.css lines 3672/5473/7454). ".entry-content" escapes it via a
       later ".post .entry-content{padding-left:0}" reset, so the body sits flush
       while the footer (tags, invite box, social icons) and comments get pushed
       24px to the right. Re-flush them so they line up with the body. Admin-only
       (this file is admin-gated), so public still shows the legacy indent until
       roll-out — at which point the three padding-left lines in mobile-menus.css
       can simply be commented out for everyone. --- */
.single-post footer.entry-meta,
.page footer.entry-meta,
.single-post #comments,
.page #comments {
    padding-left: 0 !important;
}
/* The share-icons plugin sets "margin:0 6px 12px !important" on every <li>,
       leaving the first icon 6px in from the flush edge — zero its left margin. */
footer.entry-meta .simple-social-icons ul li:first-child {
    margin-left: 0 !important;
}
/* The article body (.post .entry-content) is max-width:750px, but the footer
   (.single-post .entry-meta) is only 680px — so the invite box, now living in
   the footer, came out ~70px narrower than when it was inline. Match the footer
   width to the body so the box spans the same width it did originally. */
.single-post footer.entry-meta {
    max-width: 750px !important;
}

/* ===========================================================================
   5. "MEXICO IN YOUR INBOX" newsletter invite (Page 26482, wrapped in
   .mex-nl-invite). It is a .white-box internally. We give the CONTAINER a
   distinct CTA treatment (stone fill, terracotta outline, dark-gold left
   accent, envelope icon) but deliberately do NOT restyle the text — so the
   type matches the generic color-box styling exactly.
   In the preview the box is rendered in the footer (footer.entry-meta), below
   the tags, by mex_footer_newsletter_invite(); the .entry-content selector is
   kept only so the styling still applies if the box is ever left inline.
   =========================================================================== */
/* Symmetric margins so the invite box sits centred between the tags (above)
   and the social icons (below). The gap above is purely this margin-top (the
   .entry-tags has margin-bottom:0); the gap below is this margin-bottom PLUS the
   social widget's own top padding — which we zero just below — so equal margins
   here yield equal visual gaps on both sides. */
.mex-nl-invite {
    margin: 30px 0 30px;
}
/* The footer social-icons widget (.simple-social-icons) carries a 30px
   padding-top by default (theme/plugin), which pushed the icons ~30px further
   from the invite box than the box sits from the tags — making the box look
   closer to the tags. Zero it here (admin-only file) so the box's own
   margin-bottom is the sole, symmetric gap.
   NB: the padding actually comes from ".single-post .entry-meta .entry-cats
   { padding-top:30px !important }" (mexperience.css:9417) — the widget also
   carries the .entry-cats class — whose (0,3,0) specificity beat the original
   "footer.entry-meta .simple-social-icons" (0,2,1) in the !important tie, so
   the icons stayed 60px below the box. The first selector below matches the
   widget's full class list for (0,3,1), which wins. (Verified in headless
   Chrome: gaps tags->box and box->icons are now both exactly 30px.) */
footer.entry-meta .entry-cats.widget.simple-social-icons,
footer.entry-meta .simple-social-icons {
    padding-top: 0 !important;
}
.entry-content .mex-nl-invite .white-box,
footer.entry-meta .mex-nl-invite .white-box {
    position: relative;
    background: var(--mex-stone);
    border: 1px solid var(--mex-clay);
    border-left: 4px solid var(--mex-gold-dark);
    border-radius: var(--mex-radius-lg);
    padding: 22px 26px 18px 70px; /* extra left padding makes room for the icon */
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
}
/* --- Restore the box's top padding in the footer placement. Root cause
   (diagnosed via headless DevTools): the legacy rule
   "footer.entry-meta div:first-of-type { padding-top:0px !important }"
   (mexperience.css:9413 / mobile-menus.css:9410) was written to strip the top
   padding off the FIRST block in the footer, but ":first-of-type" is a
   descendant match — it hits every div that is the first div among its own
   siblings anywhere inside the footer. The .white-box is the only div inside
   .mex-nl-invite, so it matches and the !important zeroes the 22px top padding
   set above, collapsing the space over "Mexico in your inbox". Both
   declarations are !important, so specificity decides: (0,3,1) here beats the
   legacy rule's (0,2,1). (The title <p> itself has margin-top:0 in BOTH
   placements — the global reset zeroes it and theme rules only add
   margin-bottom — so this was never a margin issue.) */
footer.entry-meta .mex-nl-invite .white-box {
    padding-top: 22px !important;
}
/* Inline, the paragraphs picked up line-height:1.8 from an .entry-content
   -scoped rule that no longer reaches them in the footer (they fall back to
   1.65) — re-assert it for pixel-parity with the original inline rendering. */
footer.entry-meta .mex-nl-invite .white-box p {
    line-height: 1.8;
}

/* Elegant line-style envelope ("newsletter") icon, top-left, in dark gold. */
.entry-content .mex-nl-invite .white-box::before,
footer.entry-meta .mex-nl-invite .white-box::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 24px;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C77400' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='M3 6.5l9 6 9-6'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
/* The box now sits in the footer, not .entry-content, so the generic
   ".entry-content .white-box p:last-child" trim (section 6) no longer reaches
   it — re-trim only the trailing paragraph margin here so the box hugs its text
   like it did inline (otherwise the trailing paragraph leaves a gap at the
   bottom). A first-child margin trim is NOT needed: the title <p> has
   margin-top:0 in both placements (see the padding-top restoration above for
   the real cause of the lost space over the title). */
footer.entry-meta .mex-nl-invite .white-box > :last-child {
    margin-bottom: 0;
}

/* ===========================================================================
   6. COLOR BOXES — [blue_box] et al. Rounded, elegant, coloured left accent,
   no forced italic. Site-wide (they only appear inside article/page content).
   =========================================================================== */
.entry-content .white-box,
.entry-content .blue-box,
.entry-content .yellow-box,
.entry-content .red-box,
.entry-content .green-box,
.entry-content .lightgrey-box,
.entry-content .grey-box,
.entry-content .dark-box,
.entry-content .mex-colored-box {
    border-radius: var(--mex-radius-lg);
    padding: 18px 22px;
    font-style: normal;
    border-left: 4px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
/* Trim the trailing paragraph margin so the box hugs its content nicely. */
.entry-content .white-box p:last-child,
.entry-content .blue-box p:last-child,
.entry-content .yellow-box p:last-child,
.entry-content .red-box p:last-child,
.entry-content .green-box p:last-child,
.entry-content .lightgrey-box p:last-child,
.entry-content .grey-box p:last-child,
.entry-content .dark-box p:last-child {
    margin-bottom: 0;
}
/* Per-hue accent bars */
.entry-content .white-box     { border-left-color: var(--mex-border); }
.entry-content .blue-box      { border-left-color: #4a90d9; }
.entry-content .red-box       { border-left-color: var(--mex-red); }
.entry-content .yellow-box    { border-left-color: #e0b400; }
.entry-content .green-box     { border-left-color: #5a9e3f; }
.entry-content .lightgrey-box { border-left-color: #c9bda6; }
.entry-content .grey-box      { border-left-color: #b8b0a4; }
.entry-content .dark-box      { border-left-color: #000; }

/* ===========================================================================
   7. COMMENTS — card-based, contemporary. Each top-level comment is a stone
   card; nested replies are lighter (white) cards, indented under a vertical
   thread line and marked with a terracotta left accent. Heading = speech-bubble
   icon + "Comments" + a red count pill. (The new heading markup is admin-gated
   in comments.php to match this admin-only preview stylesheet.)
   =========================================================================== */

/* --- Heading: speech-bubble icon + label + red count pill --- */
#comments h3.comments-title.mex-comments-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mex-ink);
}
#comments .mex-comments-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce1126' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
#comments .mex-comments-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--mex-red);
    border-radius: 999px;
}

/* --- List reset: drop default <ol> numbering/indent at both levels --- */
#comments ol.commentlist,
#comments ol.commentlist ol.children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Spacing between cards lives on the <li> (theme sets 30px). Halve it, for both
   the gap between top-level cards and the gap from a card to its replies. */
#comments ol.commentlist li.comment {
    margin: 0 0 12px !important;
}
#comments ol.commentlist li.comment ul.children {
    margin-top: 12px !important;
}

/* --- Comment card (top level): avatar in a gutter, author + text + reply
       stacked in the right column. --- */
#comments article.comment {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    margin: 0;
    padding: 20px 22px;
    background: var(--mex-stone);
    border: 1px solid var(--mex-border);
    border-left: 3px solid var(--mex-red);
    border-radius: var(--mex-radius-lg);
    box-shadow: 0 2px 10px rgba(38, 34, 34, 0.05);
}
#comments .comment-avatar {
    grid-column: 1;
    grid-row: 1;
}
#comments .comment-avatar img.avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
#comments .comment-details {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
}
#comments .comment-author,
#comments .comment-author a,
#comments .comment-author cite,
#comments .comment-author .fn {
    /* !important beats the theme's 'Karla' link/author rules in mobile-menus.css */
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 15px;
    /* !important needed: theme sets '#comments .comment-author {font-weight:bold}'
       later in mobile-menus.css. Semibold reads cleaner than the theme's bold. */
    font-weight: 600 !important;
    color: var(--mex-ink);
}
#comments .comment-author .says {
    display: none;
}
#comments ul.comment-meta {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}
#comments ul.comment-meta a {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    color: var(--mex-grey);
}
#comments .comment-text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 8px;
}
#comments .comment-text,
#comments .comment-text p {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}
#comments .comment-text p:last-child {
    margin-bottom: 0;
}

/* --- Nested replies: indented under a vertical thread line; lighter (white)
       cards carrying a terracotta left accent to signal the hierarchy. --- */
#comments ol.commentlist .children {
    position: relative;
    margin-left: 26px;
    padding-left: 22px;
}
#comments ol.commentlist .children::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 22px;
    width: 2px;
    border-radius: 2px;
    background: var(--mex-border);
}
#comments ol.commentlist .children article.comment {
    background: #fff;
    border-left: 3px solid var(--mex-clay);
}
/* "Reply to …" → ghost chip that fills in on hover (reads on stone & white) */
#comments .comment-reply {
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
    /* theme sets padding:0 0 25px here — kill it so the gap below the button
       equals the card's top padding above the name. */
    padding: 0 !important;
}
#comments .comment-reply a.comment-reply-link {
    display: inline-block;
    padding: 6px 14px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    /* !important beats the site-wide "a.comment-reply-link {color:#7f171f}" and
       "#comments a:hover {color:red}" rules in mobile-menus.css/mexperience.css. */
    color: var(--mex-red) !important;
    background: #fff;
    border: 1px solid var(--mex-border);
    border-bottom-width: 1px; /* kill the legacy 1px #ccc underline on the link */
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#comments .comment-reply a.comment-reply-link:hover {
    background: var(--mex-red) !important;
    color: #fff !important;
    border-color: var(--mex-red) !important;
}
/* --- Reply form: a card that chimes with the comment cards (stone fill, soft
       border + shadow, red left accent to match a top-level comment). --- */
#comments #respond {
    margin-top: 8px;
    padding: 26px 28px 24px;
    background: var(--mex-stone);
    border: 1px solid var(--mex-border);
    border-left: 3px solid var(--mex-red);
    border-radius: var(--mex-radius-lg);
    box-shadow: 0 2px 10px rgba(38, 34, 34, 0.05);
}
#comments #respond h3#reply-title {
    margin: 0 0 4px;
    font-size: 20px;
}
#comments #respond h3#reply-title,
#comments #respond h3#reply-title-actual-reply {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600; /* semibold, matching the comment name labels */
    color: var(--mex-ink);
}
/* --- Replying to a comment: show the WP "Reply to <name>" heading and drop
       both the legacy static "Reply:" line and the transparent 1px title sliver
       (the faint "line" that used to sit above it). --- */
#comments .comment #respond h3#reply-title {
    color: var(--mex-ink);
    font-size: 20px !important;
    height: auto;
    margin: 0 0 4px;
}
#comments .comment #respond h3#reply-title-actual-reply {
    display: none !important;
}
/* --- "Cancel reply" → a small, light, red chip: rectangular (rounded), light
       weight, sat on its own line beneath the "Reply to <name>" heading.
       Overrides the legacy floated/underlined link (mexperience.css /
       mobile-menus.css). The <small> wrapper is forced to block so the chip
       drops below the title text rather than sitting inline beside it. --- */
#comments #respond h3#reply-title small {
    display: block;
}
#comments #respond a#cancel-comment-reply-link {
    display: block;
    float: none !important;
    width: fit-content !important;
    margin: 8px 0 0 !important;
    padding: 3px 11px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--mex-red) !important;
    background: rgba(206, 17, 38, 0.08);
    border: 1px solid rgba(206, 17, 38, 0.25) !important;
    border-radius: 5px;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#comments #respond a#cancel-comment-reply-link:hover {
    background: var(--mex-red);
    color: #fff !important;
    border-color: var(--mex-red) !important;
}
/* --- "Comments are Closed" → a Mexperience-red chip, sized/shaped to match the
       header .entry-chip (4px 12px padding, 12px text, 0.6px tracking, 5px radius),
       with breathing space above. --- */
#comments p.nocomments,
.site-content p.nocomments {
    display: inline-block;
    margin: 34px 0 60px !important;
    padding: 4px 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.5;
    color: #fff;
    background: var(--mex-red);
    border: 1px solid var(--mex-red);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(38, 34, 34, 0.10);
}
/* The theme's logged-in / "required fields" note — quiet Open Sans meta line. */
#comments #respond .logged-in-as,
#comments #respond .comment-notes {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    color: var(--mex-grey);
}
/* Fields sit on white so they lift off the stone card. */
#comments #respond input[type="text"],
#comments #respond input[type="email"],
#comments #respond input[type="url"],
#comments #respond textarea {
    background: #fff;
}
#comments #respond input[type="text"],
#comments #respond input[type="email"],
#comments #respond input[type="url"],
#comments #respond textarea {
    border: 1px solid var(--mex-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'Open Sans', Arial, sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#comments #respond input[type="text"]:focus,
#comments #respond input[type="email"]:focus,
#comments #respond input[type="url"]:focus,
#comments #respond textarea:focus {
    border-color: var(--mex-red);
    box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.12);
    outline: none;
}
/* "Post Comment" → Mexperience dark-gold pill, white text. !important beats the
   theme's site-wide gold/black button rules (mobile-menus.css / mexperience.css),
   which set the submit background + colour with !important on hover. */
#comments #respond input#submit,
#comments #respond .form-submit input,
#comments #respond .form-submit button {
    background: var(--mex-gold-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    padding: 13px 30px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: none;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
}
#comments #respond input#submit:hover,
#comments #respond .form-submit input:hover,
#comments #respond .form-submit button:hover {
    background: #a86200 !important;
    color: #fff !important;
    transform: translateY(-1px);
}