/*
Theme Name: Piru News
Theme URI: https://pirunews.com/
Author: Piru News
Author URI: https://pirunews.com/
Description: A custom classic-newspaper theme built for Piru News — serif typography, newsprint palette, dense editorial layout, and clean commented templates for full layout control. No third-party theme dependency.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pirunews
*/

/* =========================================================
   1. DESIGN TOKENS  (change these to restyle the whole site)
   ========================================================= */
:root{
  --ink:#1c1b19;          /* main text / "ink"            */
  --ink-soft:#4f4a42;     /* muted meta text              */
  --paper:#faf8f3;        /* newsprint background         */
  --paper-2:#f2eee3;      /* slightly darker panel        */
  --accent:#c2480c;       /* rust-orange spot accent — sunrise/ridge (labels, links, drop cap) */
  --accent-dark:#9c3a09;
  --brand:#123257;        /* navy — structural lines (top strip, menu, footer), from the wordmark */
  --gold:#dcb877;         /* warm hill tone — used only as a faint wash */
  --rule:#d6d0c2;         /* hairline rule color          */
  --rule-strong:#bdb6a4;

  --serif-display:"Libre Caslon Display", Georgia, "Times New Roman", serif;
  --serif-headline:"Source Serif 4", Georgia, "Times New Roman", serif;
  --serif-body:"Source Serif 4", Georgia, "Times New Roman", serif;

  --measure:40rem;        /* article reading width        */
  --wrap:1400px;          /* max site width               */
  --gap:clamp(1.25rem, 2vw, 2rem);
  --logo-max:160px;       /* masthead logo max height — raise this for a bigger logo */
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:1.125rem;
  line-height:1.68;
  font-weight:500;
  font-optical-sizing:auto;
  /* faint paper grain */
  background-image:radial-gradient(rgba(0,0,0,0.018) 1px, transparent 1px);
  background-size:3px 3px;
}
img{max-width:100%;height:auto;display:block;}
figure{margin-left:0;margin-right:0;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--accent);}
p{margin:0 0 1.1em;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,3vw,2rem);}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}

/* =========================================================
   3. HEADLINE TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{font-family:var(--serif-headline);font-weight:600;line-height:1.12;color:var(--ink);margin:0 0 .4em;}
.kicker{
  font-family:var(--serif-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .5em;
  display:inline-block;
}
.entry-meta{
  font-family:var(--serif-body);
  font-size:.86rem;
  color:var(--ink-soft);
  font-style:italic;
  font-weight:500;
}
.entry-meta a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--rule-strong);}
.entry-meta a:hover{color:var(--accent);}

/* =========================================================
   4. MASTHEAD
   ========================================================= */
/* thin brand-color strip across the very top — the main spot of color */
.page-top-strip{height:4px;background:var(--brand);width:100%;}

.site-topline{
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--gold) 16%, var(--paper));
  font-family:var(--serif-body);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.site-topline .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:1rem;}

.site-masthead{text-align:center;padding:1.6rem 0 1rem;}
.site-logo{display:inline-block;line-height:0;}
.site-logo img{margin:0 auto;max-height:var(--logo-max);width:auto;height:auto;}
.site-title{
  font-family:var(--serif-display);
  font-size:clamp(2.6rem,7vw,5rem);
  letter-spacing:.01em;
  margin:0;
  line-height:1;
}
.site-title a{color:var(--ink);}
.site-description{
  font-style:italic;
  color:var(--ink-soft);
  margin:.5rem 0 0;
  font-size:1.05rem;
  font-weight:500;
}

/* double rule under masthead — a newspaper signature */
.masthead-rule{border:0;border-top:3px solid var(--ink);margin:0;}
.masthead-rule + .masthead-rule{border-top:1px solid var(--ink);margin-top:3px;}

/* =========================================================
   5. PRIMARY NAVIGATION
   ========================================================= */
.site-nav{position:relative;border-bottom:2px solid var(--brand);}
.site-nav .wrap{display:flex;align-items:center;justify-content:center;gap:.25rem;}
.menu-toggle{
  display:none;background:none;border:1px solid var(--rule-strong);
  font-family:var(--serif-body);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .9rem;cursor:pointer;color:var(--ink);font-size:.78rem;
}
.nav-menu{list-style:none;margin:0;padding:.55rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:0;}
.nav-menu li{position:relative;}
.nav-menu a{
  display:block;padding:.5rem 1.1rem;
  font-family:var(--serif-body);font-weight:700;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
}
.nav-menu li + li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:14px;width:1px;background:var(--rule-strong);}
.nav-menu .current-menu-item > a{color:var(--accent);}
/* sub-menus */
.nav-menu ul{list-style:none;margin:0;padding:.3rem 0;position:absolute;left:0;top:100%;background:var(--paper);border:1px solid var(--rule);min-width:180px;display:none;z-index:30;box-shadow:0 12px 24px rgba(0,0,0,.08);}
.nav-menu li:hover > ul{display:block;}
.nav-menu ul a{padding:.45rem 1rem;letter-spacing:.06em;}

/* =========================================================
   6. SITE LAYOUT GRID
   ========================================================= */
.site-main-area{padding:var(--gap) 0 3rem;}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.75rem,3vw,3rem);}
@media(max-width:1120px){.layout{grid-template-columns:1fr;}}

/* =========================================================
   7. LEAD STORY (homepage hero)
   ========================================================= */
.lead-story{border-bottom:2px solid var(--ink);padding-bottom:1.8rem;margin-bottom:1.8rem;}
.lead-story .lead-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;}
@media(max-width:680px){.lead-story .lead-grid{grid-template-columns:1fr;}}
.lead-story .entry-title{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:.3em;}
.lead-story .entry-title a:hover{color:var(--accent);}
.lead-story .lead-excerpt{font-size:1.16rem;line-height:1.58;font-weight:500;}
.lead-thumb{align-self:center;margin:0;}
.lead-thumb a{display:block;}
.lead-thumb img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center center;
  margin:0 auto;
  border:1px solid var(--rule);
}
.lead-thumb figcaption{font-size:.75rem;color:var(--ink-soft);font-style:italic;margin-top:.4rem;}

/* =========================================================
   8. STORY GRID / CARDS
   ========================================================= */
.section-head{
  display:flex;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--ink);margin-bottom:1.4rem;padding-bottom:.3rem;
}
.section-head h2{
  font-family:var(--serif-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.95rem;margin:0;
}
.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
@media(max-width:560px){.story-grid{grid-template-columns:1fr;}}
.story-card{
  padding:1.4rem;border-top:1px solid var(--rule);
}
/* hairline column rule */
.story-grid .story-card:nth-child(odd){border-right:1px solid var(--rule);}
@media(max-width:560px){.story-grid .story-card{border-right:0!important;}}
.story-card .entry-title{font-size:1.45rem;line-height:1.12;margin-bottom:.35em;}
.story-card .entry-title a:hover{color:var(--accent);}
.story-card .card-thumb{display:block;margin:0 0 .9rem;}
.story-card .card-thumb img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center center;
  margin:0 auto;
  border:1px solid var(--rule);
}
.story-card .entry-excerpt{font-size:1rem;line-height:1.52;color:#2f2d28;margin-top:.5rem;}
.story-card .entry-meta{margin-top:.5rem;display:block;}

/* compact list variant (archive) */
.story-list .story-card{border-right:0;}

/* homepage grouped latest columns */
.home-latest-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
  border-bottom:2px solid var(--ink);
}
.latest-column{
  min-width:0;
  padding:0 1.15rem 1.25rem;
  border-left:1px solid var(--rule);
}
.latest-column:first-child{border-left:0;}
.latest-column-title{
  font-family:var(--serif-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
  line-height:1.25;
  border-bottom:2px solid var(--ink);
  margin:0;
  padding:.9rem 0 .65rem;
}
.latest-column .story-card{
  padding:1.15rem 0;
  border-top:1px solid var(--rule);
}
.latest-column .story-card:first-of-type{border-top:0;}
.story-card--compact .entry-title{
  font-size:1.22rem;
  line-height:1.18;
}
.story-card--compact .entry-excerpt{
  font-size:.98rem;
  line-height:1.52;
}
.latest-column-empty{
  color:var(--ink-soft);
  font-style:italic;
  margin:1rem 0;
}
.latest-column-more-links{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .8rem;
  margin-top:.4rem;
}
.latest-column-more{
  display:inline-block;
  font-family:var(--serif-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
@media(max-width:760px){
  .home-latest-columns{grid-template-columns:1fr;}
  .latest-column{border-left:0;border-top:1px solid var(--rule);padding:0 0 1.25rem;}
  .latest-column:first-child{border-top:0;}
}

/* =========================================================
   9. SIDEBAR
   ========================================================= */
.sidebar{font-family:var(--serif-body);font-size:1.02rem;}
.widget{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule);}
.widget-title,.widget h2,.widget h3{
  font-family:var(--serif-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.9rem;margin:0 0 1rem;
  border-bottom:2px solid var(--ink);padding-bottom:.4rem;
}
.widget ul{list-style:none;margin:0;padding:0;}
.widget li{padding:.58rem 0;border-bottom:1px dotted var(--rule-strong);font-size:1rem;line-height:1.48;}
.widget li:last-child{border-bottom:0;}
.widget a{font-family:var(--serif-body);font-weight:600;}
.widget a:hover{color:var(--accent);}
.sidebar-story-date{
  display:block;
  margin-top:.22rem;
  color:var(--ink-soft);
  font-size:.82rem;
  font-style:italic;
  font-family:var(--serif-body);
  font-weight:500;
}

/* ad slot styling (works with the Ad Code widget area or Customizer) */
.ad-slot{margin:1.5rem 0;text-align:center;}
.ad-slot--label::before{
  content:"Advertisement";display:block;font-family:var(--serif-body);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem;
}
.widget_adslot{padding-bottom:1.8rem;}

/* =========================================================
   10. SINGLE ARTICLE
   ========================================================= */
.article-header{max-width:var(--measure);margin:0 auto 1.6rem;text-align:center;}
.article-header .entry-title{font-size:clamp(2.1rem,4.8vw,3.45rem);line-height:1.08;margin:.2em 0 .35em;}
.article-header .byline{font-style:italic;color:var(--ink-soft);font-size:1rem;font-weight:500;}
.article-featured{margin:0 0 2rem;text-align:center;}
.article-featured img{width:100%;margin:0 auto;border:1px solid var(--rule);object-position:center center;}
.article-featured figcaption{max-width:var(--measure);margin:.5rem auto 0;font-size:.78rem;color:var(--ink-soft);font-style:italic;text-align:center;}

.entry-content{max-width:var(--measure);margin:0 auto;font-size:1.2rem;line-height:1.75;font-weight:500;}
.entry-content p{margin:0 0 1.32em;}
.entry-content h2{font-size:1.9rem;margin:1.6em 0 .4em;}
.entry-content h3{font-size:1.45rem;margin:1.4em 0 .4em;}
.entry-content strong{font-weight:700;}
.entry-content a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px;}
.entry-content a:hover{background:var(--paper-2);}
.entry-content blockquote{
  margin:1.6em 0;padding:.25em 0 .25em 1.35rem;border-left:4px solid var(--accent);
  font-family:var(--serif-body);font-size:1.36rem;line-height:1.45;color:var(--ink);font-weight:600;
}
.entry-content figure{max-width:100%;margin:1.6em auto;text-align:center;}
.entry-content img{margin:1.6em auto;border:1px solid var(--rule);object-position:center center;}
.entry-content figure img{margin:.4em auto;}
.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter,
.entry-content .wp-block-image,
.entry-content .wp-block-gallery{
  margin-left:auto;
  margin-right:auto;
}
.entry-content .alignleft img,
.entry-content .alignright img,
.entry-content .aligncenter img,
.entry-content .wp-block-image img{
  margin-left:auto;
  margin-right:auto;
}
/* drop cap — a newspaper hallmark */
.entry-content > p:first-of-type::first-letter{
  font-family:var(--serif-display);float:left;font-size:4.4rem;line-height:.78;
  padding:.05em .12em 0 0;color:var(--accent);
}
.article-footer{max-width:var(--measure);margin:2.5rem auto 0;padding-top:1.2rem;border-top:1px solid var(--rule);}
.tag-links a{display:inline-block;font-family:var(--serif-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--rule-strong);padding:.2rem .6rem;margin:0 .35rem .35rem 0;}
.tag-links a:hover{border-color:var(--accent);color:var(--accent);}

/* related stories */
.related{margin:3rem 0 0;border-top:2px solid var(--ink);padding-top:1.4rem;}

/* =========================================================
   11. PAGINATION
   ========================================================= */
.pagination{margin:2.5rem 0 0;font-family:var(--serif-body);display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;}
.pagination .page-numbers{
  border:1px solid var(--rule-strong);padding:.5rem .85rem;font-size:.9rem;
}
.pagination .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent);}

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer{border-top:3px solid var(--brand);margin-top:3rem;background:var(--paper-2);}
.footer-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;padding:2.5rem 0;}
@media(max-width:780px){.footer-widgets{grid-template-columns:1fr;gap:1.5rem;}}
.footer-widgets .widget{border-bottom:0;padding-bottom:0;}
.site-credits{border-top:1px solid var(--rule);text-align:center;padding:1.3rem 0;font-size:.8rem;color:var(--ink-soft);letter-spacing:.05em;}
.site-credits a{color:var(--ink-soft);text-decoration:underline;}
.site-credits a:hover{color:var(--accent);}

/* =========================================================
   13. SEARCH FORM
   ========================================================= */
.search-form{display:flex;gap:.4rem;}
.search-form input[type=search]{
  font-family:var(--serif-body);border:1px solid var(--rule-strong);background:var(--paper);
  padding:.45rem .6rem;font-size:.9rem;width:100%;
}
.search-form button{
  background:var(--ink);color:var(--paper);border:0;padding:.45rem .9rem;cursor:pointer;
  font-family:var(--serif-body);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;
}
.search-form button:hover{background:var(--accent);}
.topline-search{max-width:230px;}

/* =========================================================
   14. PAGE / 404 / SEARCH RESULTS HEADERS
   ========================================================= */
.page-banner{border-bottom:2px solid var(--ink);margin-bottom:1.8rem;padding-bottom:.6rem;}
.page-banner .kicker{margin-bottom:.2em;}
.page-banner h1{font-size:clamp(2rem,5vw,3rem);}
.page-banner .archive-description{color:var(--ink-soft);max-width:var(--measure);}
.page-content{max-width:var(--measure);}
.no-results{max-width:var(--measure);}

/* =========================================================
   15. COMMENTS
   ========================================================= */
.comments-area{max-width:var(--measure);margin:3rem auto 0;border-top:2px solid var(--ink);padding-top:1.4rem;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{border-bottom:1px solid var(--rule);padding:1rem 0;}
.comment-author{font-family:var(--serif-body);font-weight:700;}
.comment-metadata{font-size:.78rem;color:var(--ink-soft);font-style:italic;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;font-family:var(--serif-body);border:1px solid var(--rule-strong);background:var(--paper);padding:.5rem;margin:.3rem 0 1rem;
}
.comment-form input[type=submit],.btn{
  background:var(--ink);color:var(--paper);border:0;padding:.6rem 1.2rem;cursor:pointer;
  font-family:var(--serif-body);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;
}
.comment-form input[type=submit]:hover,.btn:hover{background:var(--accent);}

/* =========================================================
   16. MOBILE
   ========================================================= */
@media(max-width:760px){
  .site-topline .wrap{flex-direction:column;align-items:center;gap:.4rem;padding-top:.4rem;padding-bottom:.4rem;}
  .menu-toggle{display:block;margin:.6rem 0;}
  .nav-menu{display:none;flex-direction:column;width:100%;padding:0 0 .6rem;}
  .nav-menu.is-open{display:flex;}
  .nav-menu li{width:100%;text-align:center;}
  .nav-menu li + li::before{display:none;}
  .nav-menu li{border-top:1px solid var(--rule);}
  .nav-menu ul{position:static;border:0;box-shadow:none;background:transparent;}
}