/**
 * ══════════════════════════════════════════════════════════════════════════════
 * PLAT STREET - PRINT STYLESHEET
 * Newspaper-style print layout for home page and articles
 * Uses exact same Pangram Pangram fonts as the app
 * ══════════════════════════════════════════════════════════════════════════════
 */

@media print {
  
  /* ═══════════════════════════════════════════════════════════════════════════
     FONT VARIABLES (matching styles.css)
     ═══════════════════════════════════════════════════════════════════════════ */
  
  :root {
    --f-masthead: 'PP Hatton', Georgia, serif;
    --f-serif: 'PP Editorial New', Georgia, serif;
    --f-serif-old: 'PP Editorial Old', Georgia, serif;
    --f-body: 'PP Fragment Serif', Georgia, serif;
    --f-ui: 'PP Neue Machina', system-ui, sans-serif;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     BASE PRINT SETTINGS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  @page {
    size: letter;
    margin: 0.75in 0.5in;
  }
  
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  html, body {
    font-size: 10pt !important;
    line-height: 1.4 !important;
    color: #000 !important;
    background: #fff !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     HIDE NON-PRINT ELEMENTS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  /* Navigation & Interactive Elements */
  .section-nav,
  .nav-wordmark,
  .nav-subscribe,
  .section-tabs,
  .read-toggle,
  .topic-bar,
  .ticker,
  .fr-ticker,
  .gd-ticker,
  .mobile-nav,
  .mobile-nav-btn,
  button,
  .btn,
  .nl,
  .fr-nl,
  .gd-nl,
  form,
  input,
  select,
  .chip,
  .nav-search,
  .masthead-nav,
  .fr-nav,
  .gd-nav,
  .write-box,
  .fr-write,
  .gd-write,
  .bot-band .nl,
  .fr-bot .fr-nl,
  .gd-bot .gd-nl,
  footer form,
  .subscribe-form,
  [x-cloak],
  [x-show],
  script,
  noscript,
  iframe {
    display: none !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     NEWSPAPER MASTHEAD
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .masthead {
    display: block !important;
    border-bottom: 3px double #000 !important;
    padding-bottom: 12pt !important;
    margin-bottom: 18pt !important;
    text-align: center !important;
    page-break-after: avoid !important;
  }
  
  .masthead-meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 8pt !important;
    font-family: Georgia, serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5pt !important;
    border-bottom: 1px solid #000 !important;
    padding-bottom: 6pt !important;
    margin-bottom: 12pt !important;
  }
  
  .masthead-logo {
    margin: 12pt 0 !important;
  }
  
  .masthead-logo .logo-text,
  .logo-text {
    font-family: var(--f-masthead) !important;
    font-size: 36pt !important;
    font-weight: 700 !important;
    letter-spacing: -1pt !important;
    color: #000 !important;
  }
  
  .masthead-logo .logo-sub,
  .logo-sub {
    font-family: var(--f-ui) !important;
    font-size: 9pt !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-top: 4pt !important;
    color: #333 !important;
  }
  
  /* Frontage & Good Deeds Headers */
  .fr-head,
  .gd-head {
    display: block !important;
    border-bottom: 3px double #000 !important;
    padding-bottom: 12pt !important;
    margin-bottom: 18pt !important;
    text-align: center !important;
  }
  
  .fr-logo,
  .gd-logo {
    font-family: var(--f-masthead) !important;
    font-size: 36pt !important;
    font-weight: 700 !important;
    color: #000 !important;
  }
  
  .fr-tagline,
  .gd-tagline {
    font-family: var(--f-ui) !important;
    font-size: 9pt !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #333 !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     NEWSPAPER GRID LAYOUT
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .wrap,
  .fr-wrap,
  .gd-wrap {
    background: #fff !important;
    padding: 0 !important;
  }
  
  .grid,
  .fr-content,
  .gd-content {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    gap: 18pt !important;
    align-items: start !important;
  }
  
  /* Column Rules (vertical lines between columns) */
  .col-rule,
  .fr-rule,
  .gd-rule {
    display: block !important;
    width: 1px !important;
    background: #000 !important;
    height: 100% !important;
    min-height: 200pt !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SIDEBARS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .sl, .sr,
  .fr-sl, .fr-sr,
  .gd-sl, .gd-sr {
    font-size: 8pt !important;
  }
  
  .sb-sec,
  .fr-sb-sec,
  .gd-sb-sec {
    margin-bottom: 12pt !important;
    padding-bottom: 12pt !important;
    border-bottom: 1px solid #ccc !important;
  }
  
  .sb-head,
  .fr-sbh,
  .gd-sbh {
    font-family: var(--f-ui) !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 4pt !important;
    margin-bottom: 8pt !important;
  }
  
  .ri,
  .fr-ri,
  .gd-ri {
    display: block !important;
    margin-bottom: 8pt !important;
    padding-bottom: 8pt !important;
    border-bottom: 1px dotted #ccc !important;
    text-decoration: none !important;
    color: #000 !important;
  }
  
  .ri-num,
  .fr-ri-n,
  .gd-ri-n {
    font-family: var(--f-serif) !important;
    font-size: 14pt !important;
    font-weight: 800 !important;
    float: left !important;
    margin-right: 6pt !important;
    color: #000 !important;
  }
  
  .ri-title,
  .fr-ri-t,
  .gd-ri-t {
    font-family: var(--f-serif) !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #000 !important;
  }
  
  .ri-meta,
  .fr-ri-m,
  .gd-ri-m {
    font-family: var(--f-ui) !important;
    font-size: 7pt !important;
    color: #666 !important;
    letter-spacing: 0.02em !important;
  }
  
  /* Stat Box */
  .stat-box,
  .fr-stat,
  .gd-stat {
    background: #f5f5f5 !important;
    border: 1px solid #000 !important;
    padding: 10pt !important;
    margin: 12pt 0 !important;
    text-align: center !important;
  }
  
  .sn {
    font-family: var(--f-serif) !important;
    font-size: 24pt !important;
    font-weight: 800 !important;
    color: #000 !important;
  }
  
  .sl2, .sl {
    font-family: var(--f-ui) !important;
    font-size: 8pt !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
  }
  
  .sd {
    font-size: 7pt !important;
    color: #333 !important;
    margin-top: 4pt !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     MAIN CONTENT AREA
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .sm,
  .fr-sm,
  .gd-sm {
    grid-column: 2 !important;
  }
  
  /* Kicker / Section Label */
  .kicker,
  .fr-kicker,
  .gd-kicker {
    font-family: var(--f-ui) !important;
    font-size: 7pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    color: #666 !important;
    margin-bottom: 4pt !important;
  }
  
  /* Feature Headlines */
  .feat-head,
  .fr-feat-h,
  .gd-feat-h {
    font-family: var(--f-serif) !important;
    font-size: 24pt !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    margin-bottom: 8pt !important;
    color: #000 !important;
  }
  
  .feat-head a,
  .fr-feat-h a,
  .gd-feat-h a {
    color: #000 !important;
    text-decoration: none !important;
  }
  
  .feat-head em,
  .fr-feat-h em,
  .gd-feat-h em {
    font-style: italic !important;
  }
  
  /* Article Meta */
  .art-meta,
  .fr-ameta,
  .gd-ameta {
    font-family: var(--f-ui) !important;
    font-size: 8pt !important;
    color: #666 !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    padding: 6pt 0 !important;
    margin-bottom: 12pt !important;
    display: flex !important;
    gap: 12pt !important;
    letter-spacing: 0.06em !important;
  }
  
  .by {
    font-weight: 600 !important;
  }
  
  /* Body Text */
  .body,
  .fr-body,
  .gd-body {
    font-family: var(--f-body) !important;
    font-size: 10pt !important;
    line-height: 1.78 !important;
    color: #000 !important;
    column-count: 2 !important;
    column-gap: 18pt !important;
    column-rule: 1px solid #ccc !important;
    text-align: justify !important;
    hyphens: auto !important;
  }
  
  .body p,
  .fr-body p,
  .gd-body p {
    margin-bottom: 8pt !important;
    text-indent: 12pt !important;
  }
  
  .body p:first-child,
  .fr-body p:first-child,
  .gd-body p:first-child {
    text-indent: 0 !important;
  }
  
  /* Pull Quotes */
  .pq,
  .fr-pq,
  .gd-pq {
    column-span: all !important;
    font-family: var(--f-serif) !important;
    font-size: 14pt !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 12pt 24pt !important;
    margin: 12pt 0 !important;
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
    color: #000 !important;
  }
  
  /* Verdict Box */
  .fr-verdict {
    background: #f5f5f5 !important;
    border: 2px solid #000 !important;
    padding: 10pt !important;
    margin: 12pt 0 !important;
    column-span: all !important;
  }
  
  .vl {
    font-family: var(--f-ui) !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 4pt !important;
  }
  
  .vr {
    font-family: var(--f-body) !important;
    font-size: 9pt !important;
    line-height: 1.4 !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     SECONDARY ARTICLES GRID
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .sec-grid,
  .fr-sec-grid,
  .gd-sec-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12pt !important;
    margin: 12pt 0 !important;
    padding-top: 12pt !important;
    border-top: 1px solid #ccc !important;
  }
  
  .sec-art,
  .fr-sec-c,
  .gd-sec-c {
    text-decoration: none !important;
    color: #000 !important;
  }
  
  .sec-h,
  .fr-sec-h,
  .gd-sec-h {
    font-family: var(--f-serif) !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 4pt !important;
  }
  
  .sec-d,
  .fr-sec-d,
  .gd-sec-d {
    font-size: 8pt !important;
    line-height: 1.4 !important;
    color: #333 !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     CARDS (From the Field)
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .card,
  .fr-card,
  .gd-card {
    display: block !important;
    text-decoration: none !important;
    color: #000 !important;
    padding: 10pt 0 !important;
    border-bottom: 1px dotted #ccc !important;
    margin-bottom: 8pt !important;
    page-break-inside: avoid !important;
  }
  
  .card-k,
  .fr-card-k,
  .gd-card-k {
    font-family: var(--f-ui) !important;
    font-size: 7pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: #666 !important;
    margin-bottom: 2pt !important;
    font-weight: 600 !important;
  }
  
  .card-title,
  .fr-card-t,
  .gd-card-t {
    font-family: var(--f-serif) !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 4pt !important;
  }
  
  .card-deck,
  .fr-card-d,
  .gd-card-d {
    font-family: var(--f-ui) !important;
    font-size: 8pt !important;
    line-height: 1.5 !important;
    color: #333 !important;
    font-weight: 300 !important;
  }
  
  .card-meta,
  .fr-card-m,
  .gd-card-m {
    font-family: var(--f-ui) !important;
    font-size: 7pt !important;
    color: #666 !important;
    margin-top: 4pt !important;
    letter-spacing: 0.02em !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     BOTTOM BAND / FOOTER
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .bot-band,
  .fr-bot,
  .gd-bot {
    margin-top: 24pt !important;
    padding-top: 12pt !important;
    border-top: 3px double #000 !important;
    page-break-before: avoid !important;
  }
  
  .bot-grid,
  .fr-bot-grid,
  .gd-bot-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 18pt !important;
  }
  
  .bot-col,
  .fr-bot-col,
  .gd-bot-col {
    font-size: 8pt !important;
  }
  
  .bot-k,
  .fr-bot-k,
  .gd-bot-k {
    font-family: var(--f-ui) !important;
    font-size: 7pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #666 !important;
    margin-bottom: 4pt !important;
  }
  
  .bot-col h3,
  .fr-bot-col h3,
  .gd-bot-col h3 {
    font-family: var(--f-serif) !important;
    font-size: 10pt !important;
    font-weight: 700 !important;
    margin-bottom: 4pt !important;
  }
  
  .bot-col p,
  .fr-bot-col p,
  .gd-bot-col p {
    font-size: 8pt !important;
    line-height: 1.4 !important;
    color: #333 !important;
  }
  
  .bot-rule,
  .fr-bot-rule,
  .gd-bot-rule {
    display: block !important;
    width: 1px !important;
    background: #000 !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     ARTICLE PAGE PRINT STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  
  .article-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 3px double #000 !important;
    padding-bottom: 12pt !important;
    margin-bottom: 18pt !important;
  }
  
  .back-link {
    display: none !important;
  }
  
  .logo-mini {
    font-family: var(--f-masthead) !important;
    font-size: 18pt !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-decoration: none !important;
  }
  
  .logo-mini span {
    color: #666 !important;
  }
  
  .article-content {
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  .article-meta-top {
    margin-bottom: 8pt !important;
  }
  
  .article-kicker {
    font-size: 8pt !important;
    text-transform: uppercase !important;
    letter-spacing: 1pt !important;
    color: #666 !important;
  }
  
  .article-title {
    font-family: var(--f-serif) !important;
    font-size: 28pt !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    margin-bottom: 12pt !important;
    color: #000 !important;
  }
  
  .article-meta {
    font-family: var(--f-ui) !important;
    display: flex !important;
    gap: 12pt !important;
    font-size: 9pt !important;
    color: #666 !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    padding: 8pt 0 !important;
    margin-bottom: 18pt !important;
    letter-spacing: 0.06em !important;
  }
  
  .article-author {
    font-weight: 600 !important;
  }
  
  .article-body {
    font-family: var(--f-body) !important;
    font-size: 11pt !important;
    line-height: 1.78 !important;
    column-count: 2 !important;
    column-gap: 24pt !important;
    column-rule: 1px solid #ccc !important;
    text-align: justify !important;
    hyphens: auto !important;
  }
  
  .article-body p {
    margin-bottom: 10pt !important;
    text-indent: 18pt !important;
  }
  
  .article-body p:first-child {
    text-indent: 0 !important;
  }
  
  .article-body p:first-child::first-letter {
    font-family: var(--f-serif) !important;
    font-size: 48pt !important;
    float: left !important;
    line-height: 0.8 !important;
    padding-right: 8pt !important;
    padding-top: 4pt !important;
    font-weight: 800 !important;
  }
  
  .article-pullquote {
    column-span: all !important;
    font-family: var(--f-serif) !important;
    font-size: 16pt !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 18pt 36pt !important;
    margin: 18pt 0 !important;
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
  }
  
  .article-footer {
    margin-top: 24pt !important;
    padding-top: 12pt !important;
    border-top: 3px double #000 !important;
    text-align: center !important;
    font-size: 8pt !important;
  }
  
  .footer-cta {
    display: none !important;
  }
  
  .footer-brand p {
    color: #666 !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     LINKS - Show URLs in print
     ═══════════════════════════════════════════════════════════════════════════ */
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 7pt;
    color: #666;
    word-break: break-all;
  }
  
  a[href^="/"]:after,
  a[href^="#"]:after,
  .logo-mini:after,
  .feat-head a:after,
  .fr-feat-h a:after,
  .gd-feat-h a:after,
  .ri:after,
  .fr-ri:after,
  .gd-ri:after,
  .card:after,
  .fr-card:after,
  .gd-card:after,
  .sec-art:after,
  .fr-sec-c:after,
  .gd-sec-c:after {
    content: none !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     PAGE BREAKS
     ═══════════════════════════════════════════════════════════════════════════ */
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid !important;
  }
  
  .card,
  .fr-card,
  .gd-card,
  .sec-art,
  .fr-sec-c,
  .gd-sec-c,
  .ri,
  .fr-ri,
  .gd-ri {
    page-break-inside: avoid !important;
  }
  
  .masthead,
  .fr-head,
  .gd-head,
  .article-header {
    page-break-after: avoid !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     PRINT DATE STAMP
     ═══════════════════════════════════════════════════════════════════════════ */
  
  body::after {
    content: "Printed from platstreet.com";
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 7pt;
    color: #999;
  }
  
}