/*
Theme Name:  RicoMatrix Blog
Theme URI:   https://blog.ricomatrix.com
Description: RicoMatrix-branded child theme for Twenty Twenty-Five. Applies the
             colour system, typography and surfaces used by app.ricomatrix.com:
             near-black blue-tinted grounds, cream text, and gold accents.
Author:      RicoMatrix
Template:    twentytwentyfive
Version:     2.1.0
License:     GPL-2.0-or-later
Text Domain: ricomatrix-blog
*/

/* ---------------------------------------------------------------------------
   Tokens mirrored from app.ricomatrix.com, for the rules below that cannot be
   expressed in theme.json (form controls, scrollbars, selection, focus rings).
   The block editor reads theme.json; these cover everything else.
--------------------------------------------------------------------------- */
:root {
    --rm-bg:            #05070d;
    --rm-surface:       #0b0d12;
    --rm-elevated:      #131720;
    --rm-border:        #1f1a12;
    --rm-border-strong: #2b2517;
    --rm-text:          #f6ecd4;
    --rm-text-2:        #e4d8bd;
    --rm-muted:         #bcaa80;
    --rm-gold:          #d6a13c;
    --rm-gold-light:    #f1d285;
    --rm-gold-hover:    #e0b455;
    --rm-green:         #46d29f;
    --rm-danger:        #e5484d;
    --rm-glow:          #d6a13c1a;
    --rm-radius:        0.5rem;
}

/* The browser needs to know this is a dark surface so that form controls,
   scrollbars and the like render with matching defaults. */
:root { color-scheme: dark; }

html { background-color: var(--rm-bg); }

::selection {
    background-color: var(--rm-gold);
    color: var(--rm-bg);
}

/* --- Focus: visible and on-brand, never removed ------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--rm-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Scrollbar ---------------------------------------------------------- */
* { scrollbar-color: var(--rm-border-strong) var(--rm-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rm-bg); }
::-webkit-scrollbar-thumb {
    background: var(--rm-border-strong);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--rm-gold-deep, #a66b22); }

/* --- Inline code (the core/code block is handled in theme.json) ---------- */
:not(pre) > code {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
    padding: 0.12em 0.4em;
    font-size: 0.9em;
    color: var(--rm-gold-light);
}

/* Long code blocks must scroll inside themselves rather than widening the
   page on small screens. */
pre.wp-block-code,
pre.wp-block-preformatted {
    overflow-x: auto;
    max-width: 100%;
}

/* --- Tables ------------------------------------------------------------- */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table :where(th, td) {
    border: 1px solid var(--rm-border);
    padding: 0.6rem 0.8rem;
}
.wp-block-table thead th {
    background: var(--rm-surface);
    font-family: Syne, Inter, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.wp-block-table tbody tr:nth-child(even) { background: #0b0d1266; }
/* Wide tables scroll rather than breaking the layout. */
.wp-block-table { overflow-x: auto; }

/* --- Images and separators ---------------------------------------------- */
.wp-block-image img { border-radius: var(--rm-radius); }
.wp-block-separator { border-color: var(--rm-border-strong); opacity: 1; }

/* --- Post listings: subtle elevated cards ------------------------------- */
.wp-block-post-template.is-layout-grid > li {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wp-block-post-template.is-layout-grid > li:hover {
    border-color: var(--rm-border-strong);
    box-shadow: 0 0 0 1px var(--rm-glow), 0 8px 32px #00000059;
}

/* ---------------------------------------------------------------------------
   Plugin-rendered markup. Contact Form 7 emits plain HTML inputs that would
   otherwise render as white boxes on a dark page.
--------------------------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea,
input[type="search"],
input[type="text"].wp-block-search__input {
    width: 100%;
    background: var(--rm-surface);
    color: var(--rm-text);
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius);
    padding: 0.7rem 0.85rem;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.wpcf7 :where(input, select, textarea):focus,
input[type="search"]:focus {
    border-color: var(--rm-gold);
    box-shadow: 0 0 0 3px var(--rm-glow);
    outline: none;
}
.wpcf7 ::placeholder { color: #bcaa8099; }
.wpcf7 label {
    display: block;
    margin-bottom: 1rem;
    color: var(--rm-text-2);
    font-size: 0.95rem;
}

.wpcf7 input[type="submit"],
.wp-block-search__button {
    background: var(--rm-gold);
    color: var(--rm-bg);
    border: 0;
    border-radius: 0.375rem;
    padding: 0.7rem 1.4rem;
    font-family: Inter, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.wpcf7 input[type="submit"]:hover,
.wp-block-search__button:hover { background: var(--rm-gold-light); }

/* Form validation states, using the app's semantic colours. */
.wpcf7 .wpcf7-not-valid-tip { color: var(--rm-danger); font-size: 0.85rem; }
.wpcf7 .wpcf7-response-output {
    border-radius: var(--rm-radius);
    border-width: 1px;
    padding: 0.75rem 1rem;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--rm-green);
    color: var(--rm-green);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: var(--rm-danger);
    color: var(--rm-danger);
}

/* --- Comments ----------------------------------------------------------- */
.wp-block-post-comments-form :where(input, textarea) {
    background: var(--rm-surface);
    color: var(--rm-text);
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius);
    padding: 0.7rem 0.85rem;
}

/* --- Respect reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Headings: never break a word mid-glyph.
   Twenty Twenty-Five sets `word-break: break-word` globally, which on narrow
   viewports split long words like "reconciliation" across lines with no
   hyphen. Break between words, hyphenate properly if a word truly cannot fit,
   and balance the ragged edge.
--------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6),
.wp-block-post-title,
.wp-block-site-title,
.wp-block-query-title {
    word-break: normal;
    /* Last-resort breaking only: a word that genuinely cannot fit may break,
       but nothing hyphenates. `hyphens: auto` split display type into
       "re-search" and "be-fore", which reads worse than a short line. */
    overflow-wrap: break-word;
    hyphens: none;
    text-wrap: balance;
}

/* Body copy reads better with a slightly softer ragged edge too. */
p { text-wrap: pretty; }

/* ===========================================================================
   Layout components used by the block templates.
   Class names are applied in templates/*.html and parts/*.html.
   =========================================================================== */

/* --- Header -------------------------------------------------------------- */
.rm-header {
    border-bottom: 1px solid var(--rm-border);
    position: sticky;
    top: 0;
    z-index: 20;
    /* Slightly translucent so content scrolling underneath reads as depth. */
    background: color-mix(in srgb, var(--rm-bg) 88%, transparent);
    backdrop-filter: blur(10px);
}
.rm-header .wp-block-site-logo img { display: block; height: auto; }
.rm-nav a {
    color: var(--rm-text-2);
    font-size: 0.95rem;
    text-decoration: none;
}
.rm-nav a:hover { color: var(--rm-gold); }

/* --- Eyebrow label (category / kicker) ----------------------------------- */
:root .rm-eyebrow,
:root .rm-eyebrow a {
    font-family: Inter, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rm-gold);
    text-decoration: none;
}

/* --- Hero ---------------------------------------------------------------- */
.rm-hero h1 { margin-block: 0.4rem 0.8rem; }

/* --- Post meta ----------------------------------------------------------- */
:root .rm-meta,
:root .rm-meta * {
    font-size: 0.85rem;
    color: var(--rm-muted);
}
.rm-meta { gap: 0.4rem 1rem; }
/* A dot between meta items reads better than relying on spacing alone. */
.rm-meta > *:not(:first-child)::before {
    content: "·";
    margin-right: 0.75rem;
    color: var(--rm-border-strong);
}

/* --- Lead (most recent) post --------------------------------------------- */
.rm-lead-card img { width: 100%; height: auto; }
.rm-lead-card .wp-block-post-title { margin-block: 0.25rem; }
:root .rm-lead-card .wp-block-post-title a { color: var(--rm-text); }
.rm-lead-card .wp-block-post-title a:hover { color: var(--rm-gold); }

/* --- Card grid ----------------------------------------------------------- */
.rm-grid { gap: 2rem 1.75rem; }
.rm-grid > li {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.rm-grid .wp-block-post-featured-image { margin: 0; }
.rm-grid .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--rm-border);
    transition: border-color 160ms ease, transform 220ms ease;
}
.rm-grid > li:hover .wp-block-post-featured-image img {
    border-color: var(--rm-gold);
    transform: translateY(-2px);
}
.rm-grid .wp-block-post-title { margin: 0; line-height: 1.25; }
:root .rm-grid .wp-block-post-title a { color: var(--rm-text); text-decoration: none; }
.rm-grid > li:hover .wp-block-post-title a { color: var(--rm-gold); }
.rm-grid .wp-block-post-excerpt {
    font-size: 0.92rem;
    color: var(--rm-muted);
    margin: 0;
}
.rm-grid .wp-block-post-excerpt__more-text { display: none; }

@media (max-width: 900px) {
    .rm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .rm-grid { grid-template-columns: 1fr !important; }
}

/* --- Section headings ---------------------------------------------------- */
:root .rm-section-title {
    font-size: 0.85rem !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rm-muted) !important;
    margin-bottom: 1.5rem;
}

/* --- Article ------------------------------------------------------------- */
.rm-article-head .wp-block-post-title { margin-block: 0.4rem 0.6rem; }
.wp-block-post-featured-image img { width: 100%; height: auto; }

/* --- Tags ---------------------------------------------------------------- */
.rm-tags a {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--rm-text-2);
    background: var(--rm-surface);
    border: 1px solid var(--rm-border-strong);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    margin: 0 0.35rem 0.5rem 0;
    text-decoration: none;
}
.rm-tags a:hover { border-color: var(--rm-gold); color: var(--rm-gold); }

/* --- Author box ---------------------------------------------------------- */
.rm-authorbox {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.4rem;
}
.rm-authorbox .wp-block-group { gap: 1rem; align-items: flex-start; }
.rm-authorbox .wp-block-post-author-biography {
    font-size: 0.9rem;
    color: var(--rm-muted);
    margin: 0;
}

/* --- Reading time + share (injected by the theme) ------------------------ */
.rm-readingtime {
    font-size: 0.85rem;
    color: var(--rm-muted);
}
.rm-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rm-border);
}
.rm-share span {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rm-muted);
}
.rm-share a {
    font-size: 0.85rem;
    color: var(--rm-text-2);
    border: 1px solid var(--rm-border-strong);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    text-decoration: none;
}
.rm-share a:hover {
    border-color: var(--rm-gold);
    color: var(--rm-gold);
}

/* --- "Originally published on Medium" note ------------------------------ */
.rm-source-note {
    font-size: 0.85rem;
    color: var(--rm-muted);
    font-style: italic;
    border-left: 2px solid var(--rm-border-strong);
    padding-left: 0.9rem;
    margin-top: 2.5rem;
}

/* --- Footer -------------------------------------------------------------- */
.rm-footer,
.rm-footer a { font-size: 0.92rem; }
.rm-footer ul { list-style: none; padding: 0; margin: 0; }
.rm-footer li { margin-bottom: 0.4rem; }
.rm-footer a { color: var(--rm-text-2); text-decoration: none; }
.rm-footer a:hover { color: var(--rm-gold); }

/* --- Pagination ---------------------------------------------------------- */
.wp-block-query-pagination {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rm-border);
}
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination-numbers .current { color: var(--rm-gold); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Small-screen display sizing.

   Measured at a 375px viewport: the title box is 327px wide while the word
   "reconciliation" rendered 335px at the fluid minimum of 1.875rem, so it
   overflowed and broke mid-word. Syne is a wide face; its fluid floor is still
   too large for narrow screens. Cap it with enough headroom that the longest
   words in this blog's vocabulary fit on one line.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root .wp-block-post-title,
    :root .rm-hero h1,
    :root h1 {
        font-size: clamp(1.5rem, 6.6vw, 1.75rem) !important;
        line-height: 1.18;
    }
    :root h2 { font-size: clamp(1.3rem, 5.6vw, 1.5rem) !important; }
    :root .rm-grid .wp-block-post-title { font-size: 1.05rem !important; }
}

/* ===========================================================================
   Editorial refinement pass.
   The first cut was too sparse and too heavy: an oversized header, display
   type at maximum weight, and cards that were bare stacks of text with no
   surface. These rules give the page density and structure.
   =========================================================================== */

/* --- Header: shorter, quieter -------------------------------------------- */
:root .rm-header { padding-block: 0.9rem; }
.rm-header .wp-block-site-logo img { width: 132px !important; }
:root .rm-nav a { font-size: 0.9rem; letter-spacing: 0.005em; }

/* --- Hero: tighter, with a rule to anchor it ----------------------------- */
:root .rm-hero { padding-block: 3.5rem 2.25rem; }
:root .rm-hero h1 { max-width: 20ch; margin-block: 0.5rem 0.9rem; }
:root .rm-hero > p:last-child { max-width: 52ch; font-size: 1.05rem; }

/* --- Lead post: a two-column editorial block, not a stack ---------------- */
@media (min-width: 900px) {
    :root .rm-lead-card {
        display: grid;
        grid-template-columns: 1.12fr 1fr;
        gap: 2.75rem;
        align-items: center;
    }
    :root .rm-lead-card > .wp-block-post-featured-image { margin: 0; }
    :root .rm-lead-card > .wp-block-group { margin-top: 0; }
}
.rm-lead-card .wp-block-post-featured-image img {
    border: 1px solid var(--rm-border);
    border-radius: 12px;
}
:root .rm-lead-card .wp-block-post-excerpt {
    color: var(--rm-muted);
    font-size: 1rem;
    max-width: 46ch;
}

/* --- Cards: give them a real surface ------------------------------------- */
:root .rm-grid { gap: 1.5rem; }
:root .rm-grid > li {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: 14px;
    overflow: hidden;
    padding: 0 0 1.15rem;
    gap: 0;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
:root .rm-grid > li:hover {
    border-color: var(--rm-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px #00000059;
}
:root .rm-grid .wp-block-post-featured-image { margin: 0 0 1rem; }
:root .rm-grid .wp-block-post-featured-image img {
    border: 0;
    border-radius: 0;
    transform: none !important;
}
/* Everything below the image gets the card's inner padding. */
:root .rm-grid > li > *:not(.wp-block-post-featured-image) {
    padding-inline: 1.15rem;
}
:root .rm-grid .wp-block-post-title { margin: 0.35rem 0 0.45rem; font-size: 1.075rem; }
:root .rm-grid .wp-block-post-excerpt { font-size: 0.9rem; line-height: 1.6; margin: 0 0 0.7rem; }
:root .rm-grid > li:hover .wp-block-post-featured-image img { border-color: transparent; }

/* --- Section rule ------------------------------------------------------- */
:root .rm-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem;
}
.rm-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rm-border);
}

/* --- Article body: a comfortable measure -------------------------------- */
:root .rm-article-head { padding-top: 3rem; }
.wp-block-post-content > p { max-width: 68ch; }

/* --- Footer -------------------------------------------------------------- */
:root .rm-footer { padding-top: 3rem; }
.rm-footer .wp-block-site-logo img { width: 120px !important; }

/* Hero copy keeps a readable measure even though its container is now wide,
   so the left edge lines up with the grid without the text running long. */
:root .rm-hero h1 { max-width: 24ch; }
:root .rm-hero > p:last-child { max-width: 56ch; }