/*
Theme Name: ORSI Coordination
Theme URI: https://oklahomarepeaters.com/
Author: Custom theme package
Description: Public WordPress home, news, blog, and iframe front-end for the Oklahoma repeater coordination system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: orsi-coordination
*/

:root {
  --orsi-navy: #081827;
  --orsi-blue: #0d4f8b;
  --orsi-sky: #38bdf8;
  --orsi-red: #e11d48;
  --orsi-gold: #f59e0b;
  --orsi-green: #16a34a;
  --orsi-slate: #475569;
  --orsi-soft: #f4f7fb;
  --orsi-white: #ffffff;
  --orsi-border: #dbe4ee;
  --orsi-shadow: 0 16px 50px rgba(8,24,39,.14);
  --orsi-radius: 18px;
  --orsi-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--orsi-navy);
  background: #ffffff;
  line-height: 1.55;
}
a { color: var(--orsi-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.orsi-wrap { width: min(var(--orsi-max), calc(100% - 32px)); margin: 0 auto; }
.screen-reader-text { position:absolute; left:-9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 9999; background: #fff; padding: 10px 14px; border-radius: 8px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--orsi-border);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color: var(--orsi-navy); text-decoration:none; }
.brand img { width:48px; height:48px; }
.brand strong { display:block; font-size:1.05rem; letter-spacing:.02em; }
.brand span { display:block; color: var(--orsi-slate); font-size:.86rem; }
.main-navigation ul { list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.main-navigation a { display:block; padding:10px 12px; border-radius:999px; color: var(--orsi-navy); font-weight:650; font-size:.95rem; }
.main-navigation a:hover { background: var(--orsi-soft); text-decoration:none; }
.menu-toggle { display:none; }

.hero {
  position:relative;
  overflow:hidden;
  background: radial-gradient(circle at 20% 20%, rgba(56,189,248,.24), transparent 28%), linear-gradient(135deg, #071727 0%, #0d2846 48%, #0a3d67 100%);
  color:#fff;
  padding:80px 0 54px;
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:url('assets/images/radio-wave-pattern.svg');
  background-size:640px auto;
  opacity:.12;
}
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.eyebrow { color:#bde7ff; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }
.hero h1 { margin:.25em 0 .4em; font-size:clamp(2.2rem, 5vw, 4.7rem); line-height:.95; letter-spacing:-.05em; }
.hero p { color:#d9ecff; font-size:1.15rem; max-width:720px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.button, .wp-block-button__link, input[type="submit"], button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:12px 18px; font-weight:800; cursor:pointer;
  background: var(--orsi-blue); color:#fff; box-shadow: 0 10px 22px rgba(13,79,139,.22);
}
.button:hover, .wp-block-button__link:hover { text-decoration:none; transform: translateY(-1px); }
.button.alt { background:#fff; color:var(--orsi-navy); }
.button.ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:none; }
.hero-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:26px; padding:28px; box-shadow: var(--orsi-shadow); }
.hero-card img { display:block; margin:0 auto 16px; max-height:210px; }
.stat-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:18px; }
.stat { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); padding:15px; border-radius:16px; }
.stat strong { display:block; font-size:1.55rem; }
.stat span { color:#d9ecff; font-size:.88rem; }

.section { padding:58px 0; }
.section.soft { background: var(--orsi-soft); }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-title h2 { margin:0; font-size:clamp(1.7rem, 3vw, 2.5rem); letter-spacing:-.035em; }
.section-title p { margin:6px 0 0; color:var(--orsi-slate); max-width:740px; }
.cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.card { background:#fff; border:1px solid var(--orsi-border); border-radius:var(--orsi-radius); padding:24px; box-shadow: 0 10px 26px rgba(8,24,39,.06); }
.card h3 { margin:0 0 10px; font-size:1.2rem; }
.card p { color:var(--orsi-slate); margin:0 0 14px; }
.card .icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#e0f2fe; color:var(--orsi-blue); font-weight:900; margin-bottom:14px; }

.iframe-shell { background:#fff; border:1px solid var(--orsi-border); border-radius:24px; overflow:hidden; box-shadow: var(--orsi-shadow); }
.iframe-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:#0c2035; color:#fff; }
.iframe-header strong { font-size:1rem; }
.iframe-header a { color:#fff; font-weight:800; }
.orsi-iframe { display:block; width:100%; border:0; min-height:720px; background:#fff; }
.orsi-iframe.tall { min-height:1000px; }

.posts-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.post-card { background:#fff; border:1px solid var(--orsi-border); border-radius:var(--orsi-radius); overflow:hidden; box-shadow: 0 10px 26px rgba(8,24,39,.06); }
.post-card .thumb { aspect-ratio: 16 / 9; background:#dbeafe; display:grid; place-items:center; }
.post-card .thumb img { width:100%; height:100%; object-fit:cover; }
.post-card .content { padding:20px; }
.post-card time { color:var(--orsi-slate); font-size:.88rem; }
.post-card h3 { margin:8px 0 10px; font-size:1.18rem; line-height:1.2; }
.post-card p { color:var(--orsi-slate); margin:0; }

.content-area { padding:48px 0; }
.entry { max-width:860px; margin:0 auto; }
.entry h1 { font-size:clamp(2rem, 4vw, 3.25rem); line-height:1; letter-spacing:-.04em; }
.entry-content { font-size:1.06rem; }
.entry-content table { width:100%; border-collapse:collapse; }
.entry-content th, .entry-content td { border:1px solid var(--orsi-border); padding:10px; }
.entry-content th { background:var(--orsi-soft); }

.site-footer { background:#071727; color:#cfe1f5; padding:38px 0; }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:24px; }
.site-footer a { color:#fff; }
.footer-small { border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:18px; color:#9fb6cf; font-size:.9rem; }

@media (max-width: 860px) {
  .hero-grid, .cards, .posts-grid, .footer-grid { grid-template-columns:1fr; }
  .main-navigation { display:none; width:100%; }
  .main-navigation.open { display:block; }
  .main-navigation ul { display:block; padding-bottom:14px; }
  .menu-toggle { display:inline-flex; }
  .header-inner { flex-wrap:wrap; }
  .orsi-iframe { min-height:760px; }
}