/*
Theme Name: Oldfashioned Newspaper
Theme URI: https://example.com/oldfashioned-newspaper
Author: You
Author URI: https://example.com
Description: A mobile-first WordPress blog theme styled as a quietly European broadsheet. Ivory stock, Cormorant Garamond and EB Garamond, a 35-column grid at 700px and up, hairline column rules, drop-cap leads, and a small editorial palette of black + restrained red.
Version: 2.0.0
Text Domain: oldfashioned-newspaper
*/

/* =============================================================
   1. BASE
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  padding: 8px 0;
  background-image: url('wood.jpg');
  background-color: #6b4a2a;
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  font-size: 10pt;
  line-height: 1.34;
  color: #1c1c20;
}

a { color: #1c1c20; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: #1c1c20; }

em, i, cite { font-style: italic; }
strong, b { font-weight: 600; }

img { max-width: 100%; height: auto; }

.screen-reader-text {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* =============================================================
   2. THE WORLD (page container)
   ============================================================= */

#world, .world {
  background: #fbfaf6;
  width: min(1024px, 100%);
  margin: 0 auto;
  padding: 14px 18px;
  border: 1px solid #1c1c20;
  text-align: left;
}

/* =============================================================
   3. MASTHEAD
   ============================================================= */

.branding {
  text-align: center;
  padding: 4px 6px 8px;
  border-bottom: 3px double #1c1c20;
  margin-bottom: 6px;
}
.custom-logo-link,
.masthead-logo-link {
  display: inline-block;
  margin: 0 0 6px;
}
.custom-logo,
.masthead-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
}
.masthead-text { text-align: center; }
.masthead-spacer { display: none; }

.site-title {
  font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 8vw, 76px);
  line-height: .98;
  letter-spacing: .005em;
  margin: 0;
  color: #1c1c20;
  font-feature-settings: "lnum", "kern";
}
.site-title a { color: inherit; text-decoration: none; }
.site-description {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-size: 11pt;
  margin: 2px 0 0;
  letter-spacing: .02em;
  color: #1c1c20;
}

/* =============================================================
   4. SEARCH FORM (top row + inside widgets)
   ============================================================= */

.search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin: 8px 0;
}
.search-form .search-field,
.search-form input[type="search"] {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid #1c1c20;
  background: transparent;
  border-radius: 0;
  color: #1c1c20;
}
.search-form .search-submit,
.search-form button {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-size: 11pt;
  letter-spacing: .06em;
  padding: 5px 14px;
  border: 1px solid #1c1c20;
  background: #1c1c20;
  color: #fbfaf6;
  cursor: pointer;
}
.search-form .search-submit:hover,
.search-form button:hover { background: #9a1f1f; border-color: #9a1f1f; }

/* =============================================================
   5. HEADER NAV (.links)
   ============================================================= */

.links {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-size: 11.5pt;
  letter-spacing: .06em;
  padding: 4px 0;
  text-align: center;
}
.links .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .35em;
}
.links .menu li { display: inline-block; }
.links .menu li + li::before {
  content: "|";
  color: #1c1c2059;
  margin-right: .35em;
}
.links .menu a { color: #1c1c20; }
.links .menu a:hover,
.links .menu .current-menu-item > a,
.links .menu .current_page_item > a { color: #9a1f1f; text-decoration: none; }

/* =============================================================
   6. WIDGETS (shared)
   ============================================================= */

.widget {
  border-top: 1px solid #1c1c20;
  border-bottom: 1px solid #1c1c20;
  padding: 6px 6px 8px;
  margin: 0 0 10px;
  font-size: 9pt;
  line-height: 1.32;
  overflow-wrap: anywhere;
}
.widget-title,
.widgettitle {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 12pt;
  letter-spacing: .08em;
  margin: 0 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #1c1c20;
  color: #1c1c20;
  text-align: center;
}
.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget ul li {
  padding: 2px 0;
  border-bottom: 1px dotted #00000026;
  line-height: 1.32;
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { font-weight: 400; }
.widget p { margin: 0 0 .5em; }
.widget p:last-child { margin-bottom: 0; }

/* WP Categories widget — small-caps, hanging indent so long names
   ("FOOD & DRINK") wrap inside the narrow side rail */
.widget_categories ul {
  padding-left: 12px;
}
.widget_categories li {
  display: block;
  padding: 1px 0;
  text-indent: -12px;
  border-bottom: none;
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: .04em;
  line-height: 1.25;
}
.widget_categories li a { color: #1c1c20; font-weight: 500; }
.widget_categories .children {
  padding-left: 12px;
  margin-top: 0;
}
.widget_categories .children li {
  font-size: 8.5pt;
  font-variant: normal;
  font-style: italic;
}

/* WP Archives widget — right-aligned to flush against the right edge */
.widget_archive ul {
  padding: 0;
  text-align: right;
}
.widget_archive li {
  display: block;
  padding: 1px 0;
  border-bottom: none;
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: .04em;
  line-height: 1.25;
  text-align: right;
}
.widget_archive li a { color: #1c1c20; font-weight: 500; }

/* WP Calendar widget */
.widget_calendar { text-align: center; }
.widget_calendar .calendar_wrap { margin-top: 2px; }
.widget_calendar #wp-calendar,
.widget_calendar table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'EB Garamond', serif;
  font-size: 9pt;
  font-feature-settings: "tnum";
  margin: 0 auto;
}
.widget_calendar caption {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 10.5pt;
  letter-spacing: .12em;
  padding: 2px 0 4px;
  color: #1c1c20;
}
.widget_calendar th {
  font-variant: small-caps;
  font-weight: 600;
  font-size: 8.5pt;
  letter-spacing: .06em;
  padding: 2px 0;
  border-bottom: 1px solid #1c1c20;
  text-align: center;
}
.widget_calendar td {
  padding: 2px 0;
  text-align: center;
  color: #1c1c20;
  border: 0;
}
.widget_calendar td#today,
.widget_calendar td.today {
  background: #9a1f1f;
  color: #fbfaf6;
  font-weight: 600;
}
.widget_calendar td#today a,
.widget_calendar td.today a { color: #fbfaf6; }
.widget_calendar .wp-calendar-nav,
.widget_calendar tfoot {
  font-style: italic;
  font-size: 9pt;
  margin-top: 4px;
  text-align: center;
}
.widget_calendar .wp-calendar-nav a,
.widget_calendar tfoot a { color: #9a1f1f; }

/* WP Recent Comments widget */
.widget_recent_comments #recentcomments,
.widget_recent_comments ul { padding: 0; }
.widget_recent_comments li {
  border-bottom: 1px dotted #00000026;
  padding: 3px 0;
  font-size: 8.5pt;
  line-height: 1.32;
}
.widget_recent_comments li:last-child { border-bottom: 0; }
.widget_recent_comments .comment-author-link { font-weight: 600; }

/* WP Links / Blogroll widget */
.widget_links li { font-size: 8.5pt; }
.widget_links li a { font-weight: 400; }

/* =============================================================
   7. ARTICLES
   ============================================================= */

.entry {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #00000026;
}
.entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.kicker {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 9pt;
  letter-spacing: .14em;
  color: #9a1f1f;
  margin: 0 0 2px;
  text-transform: uppercase;
}
.entry-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 17pt;
  line-height: 1.06;
  margin: 0 0 4px;
  color: #1c1c20;
  letter-spacing: -.002em;
  text-wrap: balance;
}
.entry-title a { color: inherit; }
.byline {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 9pt;
  color: #6a6a70;
  margin: 0 0 7px;
  font-feature-settings: "tnum";
}

.entry-content p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  margin: 0 0 .5em;
  text-indent: 1.1em;
  orphans: 2;
  widows: 2;
}
.entry-content p:first-of-type { text-indent: 0; }
.entry-content blockquote {
  margin: .6em 1.2em;
  padding-left: 12px;
  border-left: 2px solid #9a1f1f;
  font-style: italic;
}
.entry-content ul, .entry-content ol { margin: .5em 0 .5em 1.6em; padding: 0; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 1em 0 .25em;
  break-after: avoid;
}
.entry-content h2 { font-size: 14pt; }
.entry-content h3 { font-size: 12pt; }
.entry-content h4 { font-size: 11pt; }

.entry-content img,
.entry-content figure { max-width: 100%; height: auto; }
.entry-content figure { margin: .8em 0; }
.entry-content figcaption {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 9pt;
  line-height: 1.32;
  padding-top: 5px;
  text-align: center;
  color: #1c1c20;
}

/* =============================================================
   8. LEAD ARTICLE
   ============================================================= */

.entry--lead .kicker { font-size: 10pt; }
.entry--lead .entry-title {
  font-size: clamp(22pt, 4.5vw, 32pt);
  line-height: 1.02;
  text-align: left;
  letter-spacing: -.005em;
  margin-bottom: 5px;
}
.entry--lead .byline { margin-bottom: 8px; font-size: 10pt; }

/* Lead photo slot — pulled in by the_post_thumbnail() in index.php */
.lead-art {
  margin: 6px auto 10px;
  max-width: 78%;
}
.lead-art img { display: block; width: 100%; height: auto; border: 1px solid #1c1c20; }
.lead-art figcaption {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 9pt;
  line-height: 1.32;
  padding-top: 5px;
  text-align: center;
}
.lead-art figcaption .credit {
  display: block;
  font-style: normal;
  font-variant: small-caps;
  font-family: 'Cormorant Garamond', serif;
  font-size: 8.5pt;
  letter-spacing: .1em;
  color: #6a6a70;
  margin-top: 3px;
}

/* Drop cap on the first paragraph of the lead. CSS-only, no markup hooks. */
.entry--lead .entry-content > p:first-of-type::first-letter {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 50px;
  line-height: .85;
  padding: 5px 7px 0 0;
  color: #9a1f1f;
}

/* =============================================================
   9. SUB COLUMNS — smaller, denser
   ============================================================= */

.content--sub1 .entry-title,
.content--sub2 .entry-title {
  font-size: 13pt;
  line-height: 1.1;
}
.content--sub1 .byline,
.content--sub2 .byline { font-size: 8.5pt; }
.content--sub1 .entry-content p,
.content--sub2 .entry-content p { font-size: 9pt; }

.earlier {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 11pt;
  letter-spacing: .08em;
  text-align: right;
  margin: 6px 0 0;
}
.earlier a { color: #9a1f1f; }

/* =============================================================
   10. FOOTER
   ============================================================= */

.site-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 3px double #1c1c20;
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 9pt;
  color: #6a6a70;
}

/* =============================================================
   11. DESKTOP GRID (≥700px)
   The structural backbone — exactly the 35-column rig that
   was already here. Section containers flatten via display:contents.
   ============================================================= */

@media screen and (min-width: 700px) {
  .world {
    display: grid;
    grid-template-columns: repeat(35, 1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: .55rem;
    row-gap: .35rem;
    padding: 18px 24px 16px;
  }

  /* Flatten section wrappers so their children are real grid items */
  .site-header,
  .widget-rail,
  .site-main,
  .widget-area--one { display: contents; }

  /* Row 1 — masthead */
  .branding {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 4px 6px 8px;
    margin-bottom: 6px;
  }
  .custom-logo-link,
  .masthead-logo-link { margin: 0; }
  .custom-logo,
  .masthead-logo { width: 72px; height: 72px; }
  .masthead-spacer { display: block; width: 72px; height: 1px; }

  /* Row 2 — search left, nav right */
  .search-form {
    grid-column: 1 / span 14;
    grid-row: 2;
    margin: 0;
    align-self: center;
  }
  .links {
    grid-column: 15 / span 21;
    grid-row: 2;
    text-align: right;
    align-self: center;
    padding: 4px 0;
  }
  .links .menu { justify-content: flex-end; }

  /* Row 3 — five widgets across (widget-area-one) */
  .widget-area--one > .widget { grid-row: 3; margin: 0; }
  .widget-area--one > .widget:nth-child(1) { grid-column: 1  / span 7; }
  .widget-area--one > .widget:nth-child(2) { grid-column: 8  / span 7; }
  .widget-area--one > .widget:nth-child(3) { grid-column: 15 / span 7; }
  .widget-area--one > .widget:nth-child(4) { grid-column: 22 / span 7; }
  .widget-area--one > .widget:nth-child(5) { grid-column: 29 / span 7; }

  /* Row 4 — main content + two side rails */
  .widget-area--two {
    grid-column: 1 / span 3;
    grid-row: 4;
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
  }
  .widget-area--three {
    grid-column: 33 / span 3;
    grid-row: 4;
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
  }
  .widget-area--two .widget,
  .widget-area--three .widget {
    border-top: 3px double #1c1c20;
    border-bottom: 1px solid #1c1c20;
    padding: 5px 3px 7px;
    margin: 0;
    font-size: 8.5pt;
    line-height: 1.3;
  }
  .widget-area--three .widget-title {
    text-align: right;
    padding-right: 2px;
  }

  .content { background: transparent; padding: 0; }
  .content--sub1 {
    grid-column: 4 / span 6;
    grid-row: 4;
    padding-right: 10px;
    border-right: 1px solid #1c1c20;
  }
  .content--main {
    grid-column: 10 / span 14;
    grid-row: 4;
    padding: 0 12px;
    border-right: 1px solid #1c1c20;
  }
  .content--sub2 {
    grid-column: 24 / span 9;
    grid-row: 4;
    padding: 0 10px;
    border-right: 1px solid #1c1c20;
  }

  /* Row 5 — footer */
  .site-footer {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}