/* Clay County Restoration -- Newspaper Local stylesheet
   Cascade @layer semantic classes, CSS multi-column + Grid, em/rem units,
   breakpoints 40em / 60em / 80em, column-rule dividers, drop-cap lead paragraph. */

@layer reset, base, layout, components, utilities;

@layer reset {
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img { max-width: 100%; display: block; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  a { text-decoration: none; color: inherit; }
  button { font: inherit; }
}

@layer base {
  :root {
    --newsprint: #f5f2ea;
    --ink: #1a1a1a;
    --masthead-red: #a3382c;
    --link-blue: #2451c4;
    --rule-gray: #cbcfc3;
    --white: #fffdf8;
  }

  html { color-scheme: light; }

  body {
    background: var(--newsprint);
    color: var(--ink);
    font-family: "Source Serif 4", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.55;
  }

  h1, h2, h3, h4 {
    font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.6em 0;
  }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1.02rem; }

  p { margin: 0 0 1em 0; }

  a { color: var(--link-blue); }
  a:hover { text-decoration: underline; }

  strong { font-weight: 700; }

  ::selection { background: var(--masthead-red); color: var(--white); }
}

@layer layout {
  .wrap {
    max-width: 68rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.1rem;
  }

  .rule { border: none; border-top: 0.09em solid var(--ink); margin: 0; }
  .ruleThin { border: none; border-top: 0.06em solid var(--rule-gray); margin: 0; }
  .ruleRed { border: none; border-top: 0.22em solid var(--masthead-red); margin: 0; }

  .section { padding: 2.6rem 0; }
  .sectionAlt { background: var(--white); border-top: 0.06em solid var(--rule-gray); border-bottom: 0.06em solid var(--rule-gray); }
  .sectionTight { padding: 1.6rem 0; }

  body.hasStickyBar { padding-bottom: 4.2rem; }

  @media (min-width: 60em) {
    .section { padding: 3.6rem 0; }
  }
}

@layer components {

  /* ---------- Masthead ---------- */
  .mastBar {
    background: var(--ink);
    color: var(--newsprint);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4em 0;
  }
  .mastBarRow { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4em; }

  .masthead { background: var(--newsprint); padding: 1.1em 0 0.7em; }
  .mastheadInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15em;
  }
  .nameplate {
    font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 0.01em;
    color: var(--ink);
    line-height: 1;
  }
  .nameplateAccent { color: var(--masthead-red); }
  .nameplateSub {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 0.35em;
  }
  .datelineRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    padding: 0.6em 0 0.5em;
  }
  .datelineText { color: #4a4a42; }
  .headerPhoneBox { text-align: right; }
  .headerPhoneLabel {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a4a42;
  }
  .headerPhoneNumber {
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--masthead-red);
  }

  .sectionNav { background: var(--newsprint); }
  .sectionNavList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.1em;
    padding: 0.55em 0;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .sectionNavList a { color: var(--ink); }
  .sectionNavList a:hover { color: var(--masthead-red); text-decoration: none; }

  /* ---------- Breadcrumb ---------- */
  .breadcrumbNav {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.76rem;
    color: #4a4a42;
    padding: 0.9em 0;
  }
  .breadcrumbNav a { color: var(--link-blue); }
  .breadcrumbNav span { margin: 0 0.4em; }

  /* ---------- Lead story hero ---------- */
  .leadStory { padding: 1.4em 0 2em; }
  .leadKicker {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--masthead-red);
    font-weight: 700;
    margin-bottom: 0.5em;
    display: inline-block;
  }
  .leadHeadline { font-size: 2.05rem; margin-bottom: 0.35em; }
  .leadDek {
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
    font-size: 1.12rem;
    color: #3a3a34;
    margin-bottom: 0.7em;
  }
  .byline {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.76rem;
    color: #4a4a42;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: 0.06em solid var(--rule-gray);
    border-bottom: 0.06em solid var(--rule-gray);
    padding: 0.5em 0;
    margin-bottom: 1.2em;
  }
  .leadPhotoCaption {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    color: #5a5a52;
    padding: 0.4em 0.1em;
    border-bottom: 0.06em solid var(--rule-gray);
    margin-bottom: 1.3em;
  }

  .leadBody { column-gap: 2em; }
  .leadBody p:first-of-type::first-letter {
    font-family: "Libre Caslon Display", Georgia, serif;
    float: left;
    font-size: 3.6em;
    line-height: 0.85;
    font-weight: 700;
    padding: 0.03em 0.08em 0 0;
    color: var(--masthead-red);
  }
  @media (min-width: 40em) {
    .leadBody { column-count: 2; }
  }
  @media (min-width: 60em) {
    .leadBody { column-count: 3; }
  }

  .pullQuote {
    font-family: "Libre Caslon Display", Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    border-top: 0.15em solid var(--ink);
    border-bottom: 0.15em solid var(--ink);
    padding: 0.7em 0;
    margin: 1em 0;
    break-inside: avoid;
  }

  .heroCtaRow { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 1.3em; }

  /* ---------- Buttons ---------- */
  .btnPrimary {
    display: inline-block;
    background: var(--masthead-red);
    color: var(--white);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0.75em 1.4em;
    border: 0.09em solid var(--masthead-red);
  }
  .btnPrimary:hover { background: #8a2e24; text-decoration: none; }
  .btnOutline {
    display: inline-block;
    background: transparent;
    color: var(--ink);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75em 1.4em;
    border: 0.12em solid var(--ink);
  }
  .btnOutline:hover { background: var(--ink); color: var(--newsprint); text-decoration: none; }

  /* ---------- Trust bar ---------- */
  .trustBar {
    background: var(--ink);
    color: var(--newsprint);
    padding: 0.9em 0;
  }
  .trustBarGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6em;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8rem;
    text-align: center;
  }
  @media (min-width: 40em) {
    .trustBarGrid { grid-template-columns: repeat(2, 1fr); text-align: left; }
  }
  @media (min-width: 60em) {
    .trustBarGrid { grid-template-columns: repeat(4, 1fr); }
  }
  .trustChip { border-left: 0.18em solid var(--masthead-red); padding-left: 0.6em; }
  @media (max-width: 39.99em) {
    .trustChip { border-left: none; border-top: 0.18em solid var(--masthead-red); padding-left: 0; padding-top: 0.4em; }
  }

  /* ---------- Section headings ---------- */
  .sectionHeading { margin-bottom: 1.4em; }
  .sansLabel {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--masthead-red);
    font-weight: 700;
    display: inline-block;
    margin-bottom: 0.4em;
  }

  /* ---------- Service article grid ---------- */
  .articleGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6em;
  }
  @media (min-width: 40em) {
    .articleGrid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 60em) {
    .articleGrid { grid-template-columns: repeat(4, 1fr); }
  }
  .articleCard {
    border-top: 0.22em solid var(--masthead-red);
    padding-top: 0.7em;
  }
  .articleCard h3 { font-size: 1.15rem; }
  .articleCard p { font-size: 0.95rem; color: #2c2c28; }
  .articleCard a { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

  /* ---------- Town section cards ---------- */
  .townGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4em;
  }
  @media (min-width: 40em) {
    .townGrid { grid-template-columns: repeat(2, 1fr); }
  }
  .townCard {
    background: var(--white);
    border: 0.06em solid var(--rule-gray);
  }
  .townCardTab {
    background: var(--masthead-red);
    color: var(--white);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.4em 0.8em;
  }
  .townCardBody { padding: 1em 1.1em 1.2em; }
  .townCardBody h3 { margin-bottom: 0.3em; }
  .townCardBody p { font-size: 0.94rem; }
  .townCardBody a { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; }

  /* ---------- Editor note / About ---------- */
  .editorNote { display: grid; grid-template-columns: 1fr; gap: 1.6em; }
  @media (min-width: 60em) {
    .editorNote { grid-template-columns: 2fr 1fr; }
  }
  .editorNote .leadBody p:first-of-type::first-letter { font-size: 3.2em; }
  .editorSig { font-family: "Libre Caslon Display", Georgia, serif; font-style: italic; font-size: 1.05rem; margin-top: 0.6em; }
  .limitNote {
    background: var(--white);
    border-left: 0.22em solid var(--ink);
    padding: 0.8em 1em;
    font-size: 0.9rem;
  }

  /* ---------- Endorsement trio (no fake reviews) ---------- */
  .endorsementRow { display: grid; grid-template-columns: 1fr; gap: 1.2em; }
  @media (min-width: 40em) {
    .endorsementRow { grid-template-columns: repeat(3, 1fr); }
  }
  .endorsementBox {
    background: var(--white);
    border: 0.06em solid var(--rule-gray);
    padding: 1.1em 1.2em;
  }
  .endorsementBox h4 { color: var(--masthead-red); }
  .endorsementBox p { font-size: 0.93rem; }

  /* ---------- Process steps ---------- */
  .processGrid { display: grid; grid-template-columns: 1fr; gap: 1.3em; }
  @media (min-width: 40em) {
    .processGrid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 60em) {
    .processGrid { grid-template-columns: repeat(1, 1fr); gap: 0; }
    .processGrid { display: block; column-count: 1; }
  }
  .processStep {
    display: flex;
    gap: 0.9em;
    padding: 0.8em 0;
    border-bottom: 0.06em solid var(--rule-gray);
  }
  .processStep:last-child { border-bottom: none; }
  .processNum {
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--masthead-red);
    min-width: 1.6em;
  }
  .processStep h4 { margin-bottom: 0.2em; }
  .processStep p { margin-bottom: 0; font-size: 0.94rem; }

  /* ---------- Classified-style rate card / coverage list ---------- */
  .classifieds {
    column-gap: 1.6em;
    font-size: 0.94rem;
  }
  @media (min-width: 40em) {
    .classifieds { column-count: 2; column-rule: 0.06em solid var(--rule-gray); }
  }
  @media (min-width: 60em) {
    .classifieds { column-count: 3; }
  }
  .classifiedItem {
    break-inside: avoid;
    border-bottom: 0.06em dotted var(--rule-gray);
    padding: 0.5em 0;
  }
  .classifiedItem strong { display: block; color: var(--ink); }
  .classifiedItem span { color: var(--masthead-red); font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 700; }

  table.rateTable { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
  table.rateTable th, table.rateTable td { text-align: left; padding: 0.55em 0.6em; border-bottom: 0.06em solid var(--rule-gray); }
  table.rateTable th { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 0.12em solid var(--ink); }

  .tableScroll { overflow-x: auto; }

  /* ---------- FAQ ---------- */
  .faqBlock { border-top: 0.12em solid var(--ink); }
  .faqBlock details {
    border-bottom: 0.06em solid var(--rule-gray);
    padding: 0.9em 0;
  }
  .faqBlock summary {
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
  }
  .faqBlock p { margin: 0.6em 0 0; font-size: 0.95rem; }

  /* ---------- Quote form ---------- */
  .quotePanel { display: grid; grid-template-columns: 1fr; gap: 1.8em; }
  @media (min-width: 60em) {
    .quotePanel { grid-template-columns: 1.3fr 1fr; }
  }
  .quoteForm {
    background: var(--white);
    border: 0.06em solid var(--rule-gray);
    padding: 1.4em;
  }
  .formRow { margin-bottom: 0.9em; }
  .formRow label {
    display: block;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3em;
  }
  .formRow input, .formRow select, .formRow textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: 0.6em 0.7em;
    border: 0.09em solid var(--ink);
    background: var(--newsprint);
    color: var(--ink);
  }
  .formRow textarea { min-height: 5em; resize: vertical; }
  .formSubmit {
    width: 100%;
    background: var(--masthead-red);
    color: var(--white);
    border: none;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: 0.85em;
    cursor: pointer;
  }
  .formSubmit:hover { background: #8a2e24; }
  .quoteInfoCol p { font-size: 0.95rem; }
  .quoteInfoCol .btnPrimary { margin: 0.4em 0; }

  /* ---------- Sticky mobile bar ---------- */
  .stickyBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 40;
  }
  .stickyCall, .stickyQuote {
    flex: 1;
    text-align: center;
    padding: 0.85em 0;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    min-height: 3em;
  }
  .stickyCall { background: var(--masthead-red); color: var(--white); }
  .stickyQuote { background: var(--ink); color: var(--newsprint); border-left: 0.09em solid var(--newsprint); }
  @media (min-width: 56.25em) {
    .stickyBar { display: none; }
  }

  /* ---------- Footer ---------- */
  .siteFooter {
    background: var(--ink);
    color: var(--newsprint);
    padding: 2.2em 0 1.4em;
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  }
  .footerInner { display: flex; flex-direction: column; gap: 1em; }
  .footerNameplate {
    font-family: "Libre Caslon Display", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
  }
  .footerNav { display: flex; flex-wrap: wrap; gap: 0.3em 1em; font-size: 0.82rem; }
  .footerNav a { color: var(--newsprint); }
  .footerNav a:hover { color: var(--masthead-red); }
  .footerContact { font-size: 0.85rem; color: #cfcfc7; }
  .footerContact a { color: var(--newsprint); font-weight: 700; }
  .footerBottom { font-size: 0.74rem; color: #8f8f86; border-top: 0.06em solid #3a3a34; padding-top: 0.9em; }
}

@layer utilities {
  .mt0 { margin-top: 0; }
  .textCenter { text-align: center; }
  .noBreak { break-inside: avoid; }
}