/*
Theme Name: JCOLSROCKS Theme
Theme URI: https://jcolsrocks.com
Author: Ada Ora (or your name)
Description: Custom theme for JCOLSROCKS — thoughtful quotes and stories.
Version: 1.0
Text Domain: jcolsrocks
*/
    :root {
      --ink:#0B1B2B;
      --gold:#F5B400;
      --paper:#FFFFFF;
      --wash:#F7F7F5;
      --copy:#444444;
      --ring: rgba(0,0,0,.06);
      --radius: 14px;
    }

    *,*::before,*::after { box-sizing:border-box }
    html,body { height:100% }
    body {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
      color:var(--ink);
      background:var(--paper);
      line-height:1.5;
    }
    img { max-width:100%; display:block }
    a { color:inherit; text-decoration:none }
    button,input { font:inherit }

    .container { max-width:1200px; margin-inline:auto; padding:0 20px }
    /* Improve spacing on small screens */
@media (max-width: 720px) {
  .container {
    padding-left:24px;
    padding-right:24px;
  }
/* NEW: generic wrapper for page/post content */
.content-wrap {
  padding-block:40px; /* top & bottom only, left/right handled by .container */
}
    .shadow { box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06) }
    .ring { outline:1px solid var(--ring) }
    .sr-only {
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    .skip-link:focus {
      position:fixed; left:12px; top:12px; z-index:9999;
      padding:.5rem .75rem; background:#fff; border-radius:10px;
      box-shadow:0 2px 8px rgba(0,0,0,.15)
    }

    /* HEADER */
    header {
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.8);
      backdrop-filter:saturate(180%) blur(6px);
      border-bottom:1px solid rgba(11,27,43,.1)
    }
    .nav {
      display:flex; align-items:center; justify-content:space-between;
      padding-block:12px 0;
    }
    .brand { display:flex; align-items:center; gap:10px }
    .brand-mark {
      width:32px; height:32px;
      border-radius:999px; background:var(--ink);
    }
    .brand-name {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size:22px; letter-spacing:.5px;
    }
/* Mobile-first nav: hidden by default, vertical when open */
.primary-nav {
  display:none;
  position:absolute;
  inset-inline:0;
  top:56px; /* just below the header bar */
  padding:10px 20px 16px;
  background:#fff;
  border-bottom:1px solid rgba(11,27,43,.1);
  flex-direction:column;
  gap:10px;
}

.primary-nav.is-open {
  display:flex;
}

.primary-nav a {
  font-size:14px;
  color:var(--copy);
  padding:4px 0;
}

.primary-nav a:hover {
  color:var(--ink);
}
@media (max-width: 720px) {
  .primary-nav {
    padding-left:24px;
    padding-right:24px;
  }
}
.menu-toggle {
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  cursor:pointer;
}

/* Keep header layout tidy on small screens */
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:12px 0;
  gap:8px;
}


/* Desktop: show nav inline and hide burger */
@media (min-width: 720px) {
  .menu-toggle {
    display:none;
  }

 .primary-nav {
    position:static;
    display:flex;
    flex-direction:row;
    background:transparent;
    border-bottom:0;
    padding:0;
    gap:24px;
  }
}

    /* HERO */
    .hero { background:var(--wash) }
    .hero-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  padding-block:48px; /* top & bottom only */
}
    .hero h1 {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size:36px; line-height:1.15; margin:0;
    }
    .hero p {
      color:var(--copy); font-size:18px; margin:14px 0 0;
    }
    .btn-primary {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--ink); color:#fff;
      padding:.8rem 1.1rem; margin-top:18px;
      border-radius:999px;
    }

    /* Hero image card */
    .media-card {
      border-radius:20px;
      overflow:hidden;
      position:relative;
    }
    .media-card img {
      width:100%;
      height:100%;
      object-fit:cover;
    }

    /* Hero name under image – match "Latest Stories" */
    .hero-name {
      text-align:center;
      font-size:28px; /* same as h2.section-title */
      margin-top:10px;
      font-weight:700;
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    }

    .meta { display:flex; align-items:center; gap:10px; margin-top:14px }
    .pill {
      display:inline-flex; align-items:center;
      padding:.25rem .6rem; border-radius:999px;
      background:var(--wash); color:var(--ink);
      font-size:12px; border:1px solid rgba(11,27,43,.12);
    }
    .meta-small {
      display:inline-flex; align-items:center;
      gap:6px; color:var(--copy); font-size:14px;
    }
    .post-title {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size:24px; margin:8px 0 2px;
    }
    .post-dek { color:var(--copy) }

    /* SECTIONS & GRID */
    section { scroll-margin-top:100px }
    .section-head {
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:16px; margin-bottom:14px;
    }
    h2.section-title {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size:28px; margin:0;
    }
    .section-sub { color:var(--copy) }
    .grid { display:grid; gap:22px }

    .card { display:block }
    .card .thumb {
      aspect-ratio:3/2;
      border-radius:16px;
      overflow:hidden;
      position:relative;
    }
    .card .thumb img {
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .card-title {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      font-size:20px; margin:8px 0 4px; line-height:1.25;
    }
    .card-ex {
      font-size:14px; color:var(--copy); margin:0;
    }
    .link-more {
      display:inline-block; font-size:14px;
      color:var(--ink); margin-top:2px;
    }

    /* ABOUT */
    .about-grid { display:grid; grid-template-columns:1fr; gap:24px }
    .about-pic {
      width:220px; aspect-ratio:1/1;
      border-radius:18px; object-fit:cover;
    }
    .btn-outline {
      display:inline-block; border:1px solid rgba(11,27,43,.22);
      border-radius:999px; padding:.55rem .9rem; color:var(--ink);
    }

    /* NEWSLETTER */
    .subscribe {
      background:var(--ink); color:#fff;
      border-radius:24px; padding:28px;
    }
    .subscribe h2 {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      margin:0 0 6px;
    }
    .form {
      display:flex; flex-direction:column; gap:10px;
    }
    .field {
      border:0; border-radius:999px;
      padding:.8rem 1rem; width:100%; color:var(--ink);
    }
    .btn-gold {
      background:var(--gold); color:var(--ink);
      border:0; border-radius:999px;
      padding:.8rem 1rem; font-weight:700;
    }

    /* TABS (left for future use) */
    .tabs {
      display:inline-flex; background:var(--wash);
      border:1px solid rgba(11,27,43,.12);
      border-radius:999px; padding:4px;
    }
    .tabs button {
      border:0; background:transparent;
      padding:.5rem .9rem; border-radius:999px;
      color:var(--copy);
    }
    .tabs button[aria-selected="true"] {
      background:#fff; color:var(--ink);
      box-shadow:0 1px 2px rgba(0,0,0,.06);
    }

    /* FOOTER */
    footer {
      border-top:1px solid rgba(11,27,43,.1);
      margin-top:20px;
    }
    .f-grid { display:grid; gap:20px }
    .fine {
      display:flex; align-items:center; justify-content:space-between;
      border-top:1px solid rgba(11,27,43,.1);
      padding-top:12px; font-size:12px; color:var(--copy);
    }
.footer-inner {
  padding-top:24px;
  padding-bottom:24px;
}

    /* RESPONSIVE */
    @media (min-width: 720px) {
      .primary-nav { display:flex }
      .hero-grid {
        grid-template-columns:1fr 1fr;
        padding-block:56px;
      }
      .hero h1 { font-size:46px }
      .grid.cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
      .about-grid {
        grid-template-columns:220px 1fr;
        align-items:center;
      }
      .form { flex-direction:row }
    }

    @media (min-width: 1000px) {
      .f-grid { grid-template-columns:1.2fr 1fr 1fr 1fr }
    }
.post-content {
  font-size: 16px;
  color: var(--copy);
}

.post-content p {
  margin: 0 0 1.1em;
}

.post-content h2,
.post-content h3 {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}
@media (max-width: 600px) {
  .fine {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}
@media (max-width: 480px) {
  .hero h1 {
    font-size:28px;
  }

  .hero p {
    font-size:16px;
  }

  .subscribe {
    padding:22px;
  }
}