/*
Theme Name: Polite Opinions
Theme URI: https://politeopinions.com/
Author: Frederick Abeloos
Description: A sharp editorial WordPress theme for short, unsolicited, politely delivered opinions.
Version: 1.1.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: polite-opinions
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --po-bg: #080a0b;
  --po-bg-soft: #111313;
  --po-panel: #171818;
  --po-text: #f5f0e7;
  --po-muted: #a8a49c;
  --po-line: rgba(245,240,231,.18);
  --po-accent: #f0c735;
  --po-paper: #f1ede4;
  --po-ink: #111312;
  --po-max: 1180px;
  --po-serif: Georgia, 'Times New Roman', serif;
  --po-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-theme='light'] {
  --po-bg: #f3efe7;
  --po-bg-soft: #e8e2d8;
  --po-panel: #fffaf1;
  --po-text: #111312;
  --po-muted: #625f58;
  --po-line: rgba(17,19,18,.18);
  --po-paper: #111312;
  --po-ink: #f5f0e7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--po-bg);
  color: var(--po-text);
  font-family: var(--po-sans);
  line-height: 1.5;
  transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.po-shell { width: min(calc(100% - 36px), var(--po-max)); margin-inline: auto; }
.po-site-header { border-bottom: 1px solid var(--po-line); }
.po-header-inner { min-height: 150px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.po-brand { display:flex; align-items:center; gap:22px; min-width:0; flex:1 1 auto; }
.po-snake { width:142px; height:126px; flex:0 0 auto; position:relative; display:block; }
.po-viper { width:100%; height:100%; object-fit:contain; display:block; }
.po-viper--light { display:none; }
html[data-theme='light'] .po-viper--dark { display:none; }
html[data-theme='light'] .po-viper--light { display:block; }
.po-brand-copy { min-width:0; }
.po-masthead { display:flex; align-items:center; gap:22px; }
.po-title-wrap { min-width:max-content; }
.po-title { font-family:var(--po-serif); font-size:clamp(2.4rem,5vw,4.5rem); line-height:.86; letter-spacing:-.04em; margin:0; text-transform:uppercase; }
.po-title .dot { color:var(--po-accent); }
.po-tagline { border-left:1px solid var(--po-line); padding-left:22px; color:var(--po-accent); font-family:var(--po-serif); font-style:italic; font-size:1.2rem; max-width:170px; }
.po-subline { display:block; margin-top:12px; text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; color:var(--po-muted); white-space:nowrap; }
.po-header-tools { display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.po-nav { display:flex; gap:24px; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; }
.po-nav a { padding:8px 0; border-bottom:2px solid transparent; }
.po-nav a:hover, .po-nav a[aria-current='page'] { border-color:var(--po-accent); }
.po-theme-toggle { border:1px solid var(--po-line); background:transparent; color:var(--po-text); border-radius:999px; padding:8px 12px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.po-theme-toggle .switch { width:24px; height:24px; border-radius:50%; background:var(--po-accent); display:block; }

.po-hero { min-height:470px; display:grid; place-items:center; text-align:center; padding:72px 20px 64px; }
.po-kicker { color:var(--po-accent); text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:700; }
.po-quote-mark { font-family:var(--po-serif); color:var(--po-accent); font-size:4.2rem; line-height:.8; margin:22px 0 6px; }
.po-opinion { font-family:var(--po-serif); font-size:clamp(2.6rem,6vw,5.6rem); line-height:1.04; letter-spacing:-.04em; max-width:1040px; margin:0 auto; text-wrap:balance; }
.po-opinion::after { content:'•'; color:var(--po-accent); font-size:.55em; margin-left:.08em; vertical-align:.1em; }
.po-bite { margin:28px auto 0; width:86px; display:flex; align-items:center; gap:10px; color:var(--po-accent); }
.po-bite::before, .po-bite::after { content:''; height:1px; background:var(--po-line); flex:1; }

.po-previous { background:linear-gradient(180deg,var(--po-panel),var(--po-bg-soft)); border-block:1px solid var(--po-line); text-align:center; padding:30px 20px 36px; }
.po-previous-label { text-transform:uppercase; letter-spacing:.25em; color:var(--po-muted); font-size:.72rem; }
.po-previous-text { font-family:var(--po-serif); font-size:clamp(1.35rem,2.6vw,2.15rem); max-width:800px; color:var(--po-muted); margin:14px auto 0; line-height:1.25; }

.po-actions { padding:28px 20px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; border-bottom:1px solid var(--po-line); }
.po-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; border:1px solid var(--po-line); padding:0 22px; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; background:transparent; color:var(--po-text); cursor:pointer; }
.po-btn--accent { border-color:var(--po-accent); color:var(--po-accent); }
.po-btn:hover { background:var(--po-text); color:var(--po-bg); }
.po-btn--accent:hover { background:var(--po-accent); color:#0b0d0c; }

.po-principles { display:grid; grid-template-columns:repeat(4,1fr); padding:32px 0 44px; }
.po-principle { text-align:center; padding:12px 25px; border-right:1px solid var(--po-line); }
.po-principle:last-child { border-right:0; }
.po-principle-icon { color:var(--po-accent); font-size:1.7rem; }
.po-principle strong { display:block; margin-top:10px; text-transform:uppercase; letter-spacing:.13em; font-size:.73rem; }
.po-principle span { display:block; margin-top:5px; color:var(--po-muted); font-family:var(--po-serif); }

.po-paper-footer { background:var(--po-paper); color:var(--po-ink); padding:20px; text-align:center; text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; }

.po-page { padding:64px 0 80px; }
.po-page h1 { font-family:var(--po-serif); font-size:clamp(2.5rem,5vw,4.5rem); margin:0 0 12px; }
.po-page-intro { color:var(--po-muted); max-width:720px; margin-bottom:40px; }
.po-archive-grid { display:grid; gap:1px; background:var(--po-line); border:1px solid var(--po-line); }
.po-archive-card { background:var(--po-bg); padding:30px; }
.po-archive-card time { color:var(--po-accent); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; }
.po-archive-card h2 { font-family:var(--po-serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.2; margin:10px 0 0; }
.po-empty { color:var(--po-muted); font-family:var(--po-serif); font-size:1.3rem; }
.po-pagination { margin-top:28px; }
.po-pagination .page-numbers { display:inline-block; padding:8px 12px; border:1px solid var(--po-line); margin-right:6px; }

@media (max-width:900px) {
  .po-header-inner { align-items:flex-start; padding:24px 0; min-height:0; flex-direction:column; }
  .po-snake { width:104px; height:92px; }
  .po-title { font-size:2.8rem; }
  .po-header-tools { width:100%; justify-content:space-between; }
  .po-principles { grid-template-columns:repeat(2,1fr); }
  .po-principle:nth-child(2) { border-right:0; }
}
@media (max-width:620px) {
  .po-shell { width:min(calc(100% - 24px), var(--po-max)); }
  .po-brand { gap:14px; }
  .po-snake { width:72px; height:64px; }
  .po-title { font-size:2.05rem; }
  .po-tagline, .po-subline { display:none; }
  .po-nav { gap:14px; font-size:.68rem; }
  .po-hero { min-height:390px; padding:58px 12px 50px; }
  .po-opinion { font-size:clamp(2.35rem,11vw,3.7rem); }
  .po-principles { grid-template-columns:1fr; }
  .po-principle { border-right:0; border-bottom:1px solid var(--po-line); }
  .po-principle:last-child { border-bottom:0; }
  .po-actions { flex-direction:column; }
  .po-btn { width:100%; }
}