/*
Theme Name: Oldfashioned Newspaper
Theme URI: https://example.com/oldfashioned-newspaper
Author: You
Author URI: https://example.com
Description: Mobile-first grid theme with a classic newspaper vibe. Single-column on phones; grid placement from 700px up.
Version: 1.0.0
Text Domain: oldfashioned-newspaper
*/

/* ===== Base typography & legacy vibes ===== */
table { font-size: 100%; text-align: center; }
body { background-image: url('wood.jpg'); margin: 0; padding: 8px 0; font-family: 'Brawler', georgia, times, serif; font-size: 9pt; line-height: 120%; color: black; text-align: center; }
a { text-decoration: none; color: #000011; font-weight: bold; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: #220055; }

/* Container akin to the old #world wrapper, but fluid until max width */
#world, .world {
  background-color:#fff;
  width: 100%;
  margin: 0 auto;
  text-align:left;
  border: 4px solid #fff;
  padding:0;
  overflow:hidden;
}


/* Headlines & bylines */
.byline { font-family: "Droid Sans",arial,helvetica,sans-serif; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: #000066; padding-top: 4px; font-family: 'Kreon', georgia, times, serif; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000066; }
h1 { font-size: 40pt; line-height: 100%; }
.widgettitle, .widget-title { font-size: 12pt; }
h2 { font-size: 14pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11pt; }
h5 { font-size: 10pt; }

p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* Old Edge */
}


/* ===== Test rig colours & structure ===== */
:root{ --gap:.3rem; --pad:.3rem; --radius:0; --border:1px solid #000; }

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body.site{ color: black; }

/* Shared paddings for sections */
.site-header,
.widget-rail,
.site-main,
.site-footer{
  width: 100%;
  margin-inline:auto;
  padding: 8px;
}

/* Header */
.site-header{
  background: #ffffff;
  border: 1px solid #000;
  display: grid;
  gap: var(--gap);
}
.branding .site-title{ margin: 0; text-align: center; }
.branding .site-description{ margin: .25rem 0 0; text-align: center; }

.search-form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}
.search-form input[type="search"]{
  padding: .6rem .8rem;
  border: 1px solid #0003;
  border-radius: .5rem;
}
.search-form button{
  padding: .6rem .9rem;
  border: 1px solid #0003;
  background: #fff8;
  border-radius: .5rem;
  cursor: pointer;
}
.screen-reader-text{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}

/* Links strip to the right of search on desktop, stacked on mobile */
.links{ font-family:"Droid Sans",arial,helvetica,sans-serif; font-size:7pt; text-align:right; }

/* Widgets: stacked on mobile */
.widget-rail{
  display: grid;
  gap: var(--gap);
}
.widget-area{
  padding: var(--pad);
  background:#ffffff;
  border: 1px solid #000;
}
/* Area 1 widgets get the same colour, children handle layout */
.widget-area--one .widget{ background:#ffffff; }
.widget-area--two{ background:#ffffff; }
.widget-area--three{ background:#ffffff; }
.widget-title{ margin-top: 0; }
.widget{ padding:3px; margin:0; border-left:1px solid #000; font-size:9pt; line-height:105%; overflow:hidden; }

/* Content columns: all stacked for phones */
.site-main{
  display: grid;
  gap: var(--gap);
}
.content{
  padding: var(--pad);
  background:#ffffff;
}
/* Footer */
.site-footer{
  background:#ffffff;
  border:1px solid #000;
  text-align:center;
}

/* Grid cell jail for testing */
@media screen and (min-width: 700px){
  .world{
    display: grid;
    grid-template-columns: repeat(35, 1fr);
    grid-template-rows: auto auto auto auto auto;
    gap: var(--gap);
  }

  /* Flatten only what should disappear as boxes */
  .site-header,
  .widget-rail,
  .site-main,
  .widget-area--one {    /* keep TWO/THREE as real boxes */
    display: contents;
  }

  /* Header placement */
  .branding    { grid-column: 1  / span 35; grid-row: 1; }
  .search-form { grid-column: 1  / span 14; grid-row: 2; }
  .links       { grid-column: 15 / span 21; grid-row: 2; text-align: right; }

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

  /* Make the side rails REAL grid items and stick them on row 4 */
  .widget-area--two{
    grid-column: 1 / span 3;   /* left rail */
    grid-row: 4;
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--gap);
    align-content: start;
  }
  .widget-area--three{
    grid-column: 33 / span 3;  /* right rail */
    grid-row: 4;
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--gap);
    align-content: start;
  }

  /* Main three columns (row 4) */
  .content--sub1 { grid-column: 4  / span 6;  grid-row: 4; }
  .content--main { grid-column: 10 / span 14; grid-row: 4; border:.5px solid #ccc; }
  .content--sub2 { grid-column: 24 / span 9;  grid-row: 4; }

  .site-footer  { grid-column: 1 / span 35; grid-row: 5; }
}


/* Ensure the world wrapper can be the grid container at desktop */
.world{ width: min(1024px, 100%); margin: 0 auto; }

.widget ul{ list-style:none; padding-left:0; margin:0 0 0 10px; text-indent:-10px; font-size:8pt; }
.widget ul li a{ font-weight:normal; color:#000066; }