/*
Theme Name: SeanNoCode
Theme URI: https://seannocode.com
Author: iClickSee
Author URI: https://iclicksee.com
Description: SeanNoCode blog theme. A child of Twenty Twenty-Five that carries the "Trust" design system from the main seannocode.com Laravel site — warm paper, navy authority, gold restraint, serif display — so the blog at /blog feels like the same site.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seannocode
*/

/* ─────────────────────────────────────────────────────────────────────────
   SeanNoCode blog — Design System v2.0 "Trust"
   Navy authority · warm paper · gold restraint · mono keeps the receipts.

   theme.json carries the palette, fonts and global element styles (they also
   apply inside the block editor). This stylesheet owns the two things
   theme.json can't express cleanly: the ported Laravel chrome (announcement
   bar, sticky nav, navy footer) and the blog card grid.

   Colour reference (kept in sync with theme.json + the Laravel tailwind config):
     --paper #FAF7F1  --cream #F3EEE2  --card #FFFFFF  --sand #E3DCCB
     --sand-deep #C9C0AC  --ink #1C2B3A  --ink-soft #44556B  --ink-dim #6E7B8C
     --navy #0E2238  --navy-2 #16324F  --gold #A8853B  --gold-deep #8C6E2E
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --snc-paper: #FAF7F1;
    --snc-cream: #F3EEE2;
    --snc-card: #FFFFFF;
    --snc-sand: #E3DCCB;
    --snc-sand-deep: #C9C0AC;
    --snc-ink: #1C2B3A;
    --snc-ink-soft: #44556B;
    --snc-ink-dim: #6E7B8C;
    --snc-navy: #0E2238;
    --snc-navy-2: #16324F;
    --snc-navy-ink: #E9EEF4;
    --snc-navy-ink-dim: #B7C4D4;
    --snc-navy-rule: #24405E;
    --snc-gold: #A8853B;
    --snc-gold-deep: #8C6E2E;
    --snc-teal: #2E7D74;
    --snc-red: #B3423A;

    --snc-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --snc-font-sans: 'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --snc-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --snc-shell: 1120px;
    --snc-r-card: 12px;
    --snc-r-btn: 6px;
    --snc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Match the Laravel site's text rendering exactly: antialiased smoothing and a
   400 base weight (WordPress/TT5 was inheriting a 300 "light" weight, which made
   body + banner text look lighter than the Laravel site). */
body {
    font-weight: 400;
    letter-spacing: normal; /* Laravel body is normal; TT5 was applying a slight negative tracking */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mono "receipt" label — uppercase, tracked, gold on paper. */
.snc-mono-label {
    font-family: var(--snc-font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--snc-gold-deep);
}

/* ============================ ANNOUNCEMENT BAR ============================ */
.snc-announce {
    background: var(--snc-navy);
    color: var(--snc-navy-ink);
    font-family: var(--snc-font-sans);
}
.snc-announce__inner {
    max-width: var(--snc-shell);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5; /* matches Laravel/Tailwind default — sets banner height, pill height, and underline position */
}
.snc-announce__tag {
    font-family: var(--snc-font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    color: var(--snc-gold);
    border: 1px solid rgba(168, 133, 59, 0.5);
    border-radius: var(--snc-r-btn);
    padding: 2px 8px;
    white-space: nowrap;
}
.snc-announce__link {
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid var(--snc-gold);
    text-decoration: none;
    white-space: nowrap;
    transition: color 240ms var(--snc-ease);
}
.snc-announce__link:hover { color: var(--snc-gold); }

/* ================================= HEADER ================================= */
.snc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--snc-sand);
    background: rgba(250, 247, 241, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.snc-header__inner {
    max-width: var(--snc-shell);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.5; /* matches Laravel (body line-height 1.5) so the Sign-up button + header height line up exactly */
}
.snc-wordmark {
    font-family: var(--snc-font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--snc-navy);
    text-decoration: none;
    white-space: nowrap;
}
.snc-wordmark__dot { color: var(--snc-gold); }

.snc-nav {
    display: flex;
    align-items: center;
    gap: 32px; /* matches Laravel's sm:gap-8 (2rem) */
    font-family: var(--snc-font-sans);
    font-size: 14.5px;
    font-weight: 500;
}
.snc-nav a { text-decoration: none; transition: color 240ms var(--snc-ease); }
.snc-nav__link { color: var(--snc-ink-soft); }
.snc-nav__link:hover { color: var(--snc-navy); }
.snc-nav__link.is-active { color: var(--snc-navy); font-weight: 600; }
.snc-nav__login { color: var(--snc-navy); }
.snc-nav__login:hover { color: var(--snc-gold-deep); }
.snc-nav__cta {
    background: var(--snc-navy);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: var(--snc-r-btn);
    font-weight: 600;
    transition: background-color 240ms var(--snc-ease);
}
.snc-nav__cta:hover { background: var(--snc-navy-2); }

@media (max-width: 860px) {
    .snc-nav { gap: 18px; }
    .snc-nav__hide-sm { display: none; }
}
@media (max-width: 620px) {
    .snc-announce__inner { font-size: 12.5px; padding: 8px 18px; }
    .snc-header__inner { padding: 14px 18px; }
    .snc-nav__hide-xs { display: none; }
}

/* ================================= FOOTER ================================= */
.snc-footer { background: var(--snc-navy); }
.snc-footer__inner {
    max-width: var(--snc-shell);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 40px 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.snc-footer__mark {
    font-family: var(--snc-font-display);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}
.snc-footer__mark .snc-wordmark__dot { color: var(--snc-gold); }
.snc-footer__meta { font-size: 13px; color: var(--snc-navy-ink-dim); font-family: var(--snc-font-sans); }
.snc-footer__links { display: flex; gap: 20px; font-size: 13px; font-family: var(--snc-font-sans); }
.snc-footer__links a { color: var(--snc-navy-ink-dim); text-decoration: none; transition: color 240ms var(--snc-ease); }
.snc-footer__links a:hover { color: #fff; }
@media (max-width: 620px) {
    .snc-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================== BLOG CONTENT ============================== */

/* Page intro block above the post grid. */
.snc-blog-intro { text-align: center; }
.snc-blog-intro .snc-mono-label { display: inline-block; margin-bottom: 12px; }

/* Post card (used in the query loop on the blog index + archives). */
.snc-card {
    background: var(--snc-card);
    border: 1px solid var(--snc-sand);
    border-radius: var(--snc-r-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 34, 56, 0.04);
    transition: box-shadow 240ms var(--snc-ease), transform 240ms var(--snc-ease), border-color 240ms var(--snc-ease);
    height: 100%;
}
.snc-card:hover {
    box-shadow: 0 10px 30px -22px rgba(14, 34, 56, 0.5);
    border-color: var(--snc-sand-deep);
    transform: translateY(-2px);
}
.snc-card .wp-block-post-featured-image { margin: 0; }
.snc-card .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
/* Padding wrapper for the text inside a card is applied in the template. */
.snc-card__body { padding: 20px 22px 24px; }

.snc-card .wp-block-post-title {
    font-family: var(--snc-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
    font-size: 1.3125rem;
    margin: 8px 0 10px;
}
.snc-card .wp-block-post-title a { color: var(--snc-navy); text-decoration: none; transition: color 240ms var(--snc-ease); }
.snc-card .wp-block-post-title a:hover { color: var(--snc-gold-deep); }
.snc-card .wp-block-post-excerpt { color: var(--snc-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.snc-card .wp-block-post-excerpt__more-text { display: none; }
.snc-card .wp-block-post-date,
.snc-card .wp-block-post-terms {
    font-family: var(--snc-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--snc-ink-dim);
}
.snc-card .wp-block-post-terms a { color: var(--snc-gold-deep); text-decoration: none; }
.snc-card .wp-block-post-date { margin-top: 14px; }

/* Single post readability + brand type. */
.snc-single .wp-block-post-title {
    font-family: var(--snc-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--snc-navy);
}
.snc-single .wp-block-post-featured-image img { border-radius: var(--snc-r-card); }
.snc-single .wp-block-post-content { font-size: 1.0625rem; line-height: 1.7; color: var(--snc-ink); }
.snc-single .wp-block-post-content a { color: var(--snc-navy); text-decoration: underline; text-decoration-color: var(--snc-sand-deep); text-underline-offset: 3px; }
.snc-single .wp-block-post-content a:hover { color: var(--snc-gold-deep); text-decoration-color: var(--snc-gold); }
.snc-single .wp-block-post-content blockquote {
    border-left: 3px solid var(--snc-gold);
    background: var(--snc-cream);
    padding: 16px 22px;
    border-radius: var(--snc-r-btn);
    font-style: normal;
    color: var(--snc-ink-soft);
}
.snc-single .wp-block-post-content :where(code, pre) { font-family: var(--snc-font-mono); }
.snc-single .wp-block-post-content pre {
    background: var(--snc-navy);
    color: var(--snc-navy-ink);
    border-radius: var(--snc-r-btn);
    padding: 18px 20px;
    font-size: 0.85rem;
}

/* Pagination + query-no-results. */
.wp-block-query-pagination { font-family: var(--snc-font-mono); font-size: 13px; }
.wp-block-query-pagination a { color: var(--snc-ink-soft); text-decoration: none; }
.wp-block-query-pagination a:hover { color: var(--snc-navy); }
.wp-block-query-pagination .wp-block-query-pagination-numbers .current { color: var(--snc-gold-deep); font-weight: 600; }

/* Buttons (any core button on blog pages) → navy authority. */
.wp-block-button__link {
    border-radius: var(--snc-r-btn);
    font-family: var(--snc-font-sans);
    font-weight: 600;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--snc-navy);
    color: #fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--snc-navy-2); }

/* ============================ RESPONSIVE GUARDS ===========================
   The post grid must never force the page wider than the viewport. Using
   min(18rem, 100%) as the column floor keeps a single card from overflowing
   on narrow screens (the raw minmax(18rem,1fr) does overflow below ~19rem). */
.wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}
@media (max-width: 781px) {
    /* One clean column on phones. */
    .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
    /* Let the hero headline wrap instead of running off-screen. */
    .snc-blog-intro h1 { font-size: 2rem !important; }
}
/* Belt-and-braces: nothing on the blog should cause horizontal scroll.
   Use `clip` (not `hidden`) — `overflow-x: hidden` on html/body silently breaks
   `position: sticky` on descendants like the header; `clip` prevents stray
   horizontal scroll without creating a scroll container, so sticky still works. */
html, body { overflow-x: clip; }

/* ============================== STICKY FOOTER =============================
   On short pages (e.g. a blog index with only a couple of posts) the content
   doesn't fill the screen. Make the whole page a full-height flex column so
   the main region grows to absorb the slack and the footer sits flush at the
   bottom of the viewport instead of leaving the paper background showing
   below it. Tall pages are unaffected. */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}
.wp-site-blocks > main {
    flex: 1 0 auto;
}

/* Sticky header (matches Laravel). The header's template-part wrapper is only
   as tall as the banner + header, which would bound `position: sticky` and make
   the header un-stick after ~85px. `display: contents` removes that wrapper box
   so the sticky header is instead bound by the full-height `.wp-site-blocks`,
   staying pinned to the top for the whole page while the banner scrolls away. */
.wp-site-blocks > header.wp-block-template-part { display: contents; }
.snc-announce, .snc-header { margin-block: 0; }