/*
Theme Name: This Is Fresno
Theme URI: https://thisisfresno.com/
Author: Dani Cabrera
Description: A newspaper-style theme for This Is Fresno: monthly issues, category rows, ad slots, affiliate and sponsored labels, and the Recommended Local directory.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thisisfresno
*/

:root{
  /* Broadsheet front page: masthead, rule lines, lead story with a news column, category rows.
     The right rail holds the money slots: newsletter, Recommended Local, ads, affiliate, sponsor. */
  --paper:#ffffff;
  --ink:#16181a;
  --muted:#5b6166;
  --rule:#d9dcde;
  --accent:#0b5f7a;
  --sun:#f2b705;
  --tint:#eef4f6;
  --ad:#f4f4f2;
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Public Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover .hl,a:focus-visible .hl,a.hl:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.12}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;background:var(--paper);padding:8px 12px;clip:auto;width:auto;height:auto}

/* utility bar */
.util{border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.util ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.util a:hover{color:var(--ink)}

/* masthead */
.mast{text-align:center;padding:26px 20px 18px}
.mast .name{font-family:var(--display);font-weight:800;font-size:clamp(44px,8vw,92px);letter-spacing:-.02em;line-height:.95;display:inline-block}
.mast .name span{color:var(--accent)}
.mast .custom-logo{margin:0 auto;max-height:110px;width:auto}
.mast .tag{margin-top:10px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mainnav{border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.mainnav ul{list-style:none;margin:0 auto;padding:0 20px;max-width:1200px;display:flex;justify-content:center;flex-wrap:wrap}
.mainnav a{display:block;padding:11px 16px;font-weight:600;font-size:14px;letter-spacing:.02em}
.mainnav a:hover,.mainnav .current-menu-item>a,.mainnav .current-menu-ancestor>a{color:var(--accent)}
.mainnav .menu-accent>a{color:var(--accent)}
.mainnav .sub-menu{display:none}

/* ad slots */
.ad-slot{text-align:center;margin:18px auto}
.ad-slot .ad-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ad-slot--leader{max-width:728px}
.ad-placeholder{background:var(--ad);border:1px dashed #b9bdc0;color:var(--muted);display:grid;place-items:center;text-align:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;min-height:90px;padding:12px}
.ad-placeholder small{display:block;text-transform:none;letter-spacing:0;font-size:12px;margin-top:2px}
.ad-slot--rect .ad-placeholder{min-height:250px}
.ad-slot--article{margin:28px 0}

/* kicker / meta */
.kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.meta{font-size:13px;color:var(--muted)}
.dek{font-family:var(--display);font-size:19px;line-height:1.4;color:#33383c;max-width:62ch;margin:0}
.flag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border:1px solid currentColor;color:var(--muted);margin-left:6px;vertical-align:middle}

/* issue ribbon */
.issue{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--rule);padding:12px 0;flex-wrap:wrap}
.badge{background:var(--sun);color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px}
.issue p{margin:0;font-size:14px;color:var(--muted)}

/* page grid */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;padding:24px 0 8px}
.lead-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.lead h2{font-size:clamp(30px,3.6vw,44px);margin:10px 0 12px}
.lead img{aspect-ratio:16/9;object-fit:cover;width:100%}
.lead .body{padding-top:14px}
.lead .dek{margin-bottom:10px}
.stack{display:grid;gap:18px;align-content:start}
.stack article{display:grid;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.stack article:last-child{border-bottom:0;padding-bottom:0}
.stack h3{font-size:21px}
.stack img{aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:6px}

/* section heads */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:2px solid var(--ink);padding-top:8px;margin-bottom:16px;flex-wrap:wrap}
.sechead h2{font-size:26px}
.sechead a{font-size:13px;font-weight:600;color:var(--accent)}

/* month picks */
.picks{padding:26px 0;border-bottom:1px solid var(--rule)}
.picklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;counter-reset:p}
.picklist li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.picklist li::before{counter-increment:p;content:counter(p,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:26px;color:var(--accent);line-height:1}
.picklist h3{font-size:18px}
.picklist p{margin:3px 0 0;font-size:14px;color:var(--muted)}

/* category rows */
.row{padding:26px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:grid;gap:8px;align-content:start}
.card img,.card .noimg{aspect-ratio:3/2;object-fit:cover;width:100%}
.noimg{background:var(--tint)}
.card h3{font-size:20px}
.card p{margin:0;font-size:14px;color:var(--muted)}

.living{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--rule);padding:16px 20px;margin:26px 0;flex-wrap:wrap}
.living p{margin:0;font-size:15px}
.living a{font-weight:600;color:var(--accent);font-size:14px}

/* right rail */
.rail{display:grid;gap:26px;align-content:start}
.box h2,.rail .widget-title{font-family:var(--display);font-size:20px;border-top:2px solid var(--ink);padding-top:8px;margin:0 0 12px}
.latest ol{list-style:none;margin:0;padding:0}
.latest li{padding:10px 0;border-bottom:1px solid var(--rule)}
.latest li:last-child{border-bottom:0}
.latest .hl{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.25}
.news{background:var(--accent);color:#fff;padding:20px}
.news h2{font-size:22px;color:#fff;border:0;padding:0}
.news p{margin:6px 0 14px;font-size:14px;opacity:.92}
.news form{display:grid;gap:8px}
.news label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.news input[type=email],.news input[type=text]{font:inherit;padding:10px 12px;border:0;border-radius:2px;width:100%}
.news button,.news input[type=submit]{font:inherit;font-weight:700;padding:10px 12px;border:0;border-radius:2px;background:var(--sun);color:var(--ink);cursor:pointer}
.news a{color:#fff;text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.chips a{display:inline-block;font-size:13px;border:1px solid var(--rule);padding:4px 10px;border-radius:99px}
.chips a:hover,.chips .is-current a{border-color:var(--accent);color:var(--accent)}
.listing{border:1px solid var(--rule);padding:14px;display:grid;gap:4px}
.listing .tagline{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.listing h3{font-size:18px}
.listing p{margin:0;font-size:13px;color:var(--muted)}
.more{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--accent)}
.label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail .widget{font-size:14px}
.rail .widget ul{padding-left:18px}
.sponsor-box{background:var(--tint);padding:16px}

/* article */
.article-head{padding:10px 0 18px}
.article-head h1{font-size:clamp(32px,4.6vw,52px);margin:10px 0 14px;max-width:22ch}
.article-head .dek{margin-bottom:14px}
.article-hero{margin:0 0 24px}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-hero figcaption{font-size:13px;color:var(--muted);padding-top:6px}
.disclosure{font-size:13px;color:var(--muted);border-left:3px solid var(--sun);padding:6px 12px;margin:0 0 20px;background:#fffbea}
.entry{font-family:var(--display);font-size:20px;line-height:1.65;max-width:68ch}
.entry p,.entry ul,.entry ol{margin:0 0 1.1em}
.entry h2{font-size:30px;margin:1.4em 0 .5em}
.entry h3{font-size:24px;margin:1.3em 0 .4em}
.entry a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry img{margin:1em 0}
.entry blockquote{margin:1.2em 0;padding-left:18px;border-left:3px solid var(--accent);font-style:italic}
.entry figure{margin:1.2em 0}
.entry figcaption{font-family:var(--body);font-size:13px;color:var(--muted)}
.entry .wp-block-image img{margin:0}
.entry table{border-collapse:collapse;font-family:var(--body);font-size:15px;width:100%}
.entry td,.entry th{border-bottom:1px solid var(--rule);padding:8px;text-align:left}
.ifyougo{font-family:var(--body);background:var(--tint);padding:16px 20px;margin:1.4em 0;font-size:15px;line-height:1.55}
.ifyougo h2,.ifyougo h3{font-family:var(--display);font-size:20px;margin:0 0 6px}
.ifyougo dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.ifyougo dt{font-weight:700}
.ifyougo dd{margin:0}
.byline-box{display:flex;gap:14px;align-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:28px 0;max-width:68ch}
.byline-box img{border-radius:50%;width:56px;height:56px}
.byline-box p{margin:0;font-size:14px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:18px 0}
.tags a{font-size:13px;border:1px solid var(--rule);padding:3px 10px;border-radius:99px}

/* archive */
.archive-head{padding:22px 0 8px;border-bottom:1px solid var(--rule)}
.archive-head h1{font-size:clamp(30px,4vw,44px)}
.archive-head p{color:var(--muted);margin:6px 0 0;max-width:62ch}
.list{display:grid;gap:0}
.list article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--rule)}
.list article img,.list article .noimg{aspect-ratio:3/2;object-fit:cover;width:100%}
.list h2{font-size:24px;margin:4px 0 6px}
.list p{margin:0;color:var(--muted);font-size:15px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;padding:22px 0}
.pagination .page-numbers{border:1px solid var(--rule);padding:6px 12px;font-size:14px}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* directory */
.biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px 0}
.biz{border:1px solid var(--rule);padding:16px;display:grid;gap:6px;align-content:start}
.biz.is-featured{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}
.biz h2{font-size:21px}
.biz .where{font-size:13px;color:var(--muted)}
.biz p{margin:0;font-size:14px}
.biz-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px;margin:0 0 20px;padding:16px 20px;background:var(--tint)}
.biz-facts dt{font-weight:700}
.biz-facts dd{margin:0}
.biz-facts a{color:var(--accent);text-decoration:underline}
.getlisted{border:1px dashed var(--accent);padding:16px 20px;margin:10px 0 26px}
.getlisted p{margin:0;font-size:14px}

/* search */
.searchform{display:flex;gap:8px;max-width:520px}
.searchform input[type=search]{flex:1;font:inherit;padding:10px 12px;border:1px solid var(--rule)}
.searchform button{font:inherit;font-weight:700;padding:10px 16px;border:0;background:var(--ink);color:#fff;cursor:pointer}

/* footer */
.site-footer{background:var(--ink);color:#c9cdd0;margin-top:30px;font-size:14px}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px;padding-top:36px;padding-bottom:26px}
.site-footer .fname{font-family:var(--display);font-weight:800;font-size:30px;color:#fff;line-height:1}
.site-footer h2{font-family:var(--body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a:hover{color:#fff}
.site-footer .fine{grid-column:1/-1;border-top:1px solid #34383b;padding-top:16px;font-size:12px;color:#9aa0a4;margin:0}

/* WordPress core classes */
.alignleft{float:left;margin:0 1em 1em 0}
.alignright{float:right;margin:0 0 1em 1em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:13px;color:var(--muted)}
.sticky,.bypostauthor{}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .wrap{padding:0 16px}
  .lead-grid,.picklist,.cards,.rail,.biz-grid{grid-template-columns:1fr}
  .list article{grid-template-columns:1fr}
  .mainnav ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 8px}
  .mainnav a{white-space:nowrap;padding:10px 12px}
  .entry{font-size:19px}
  .site-footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}