/*
Theme Name: PoolSpaKit
Theme URI: https://poolspakit.com/
Author: PoolSpaKit
Description: Lightweight, content-first WordPress theme for pool and spa care publishers. Built for speed, readability, AdSense-friendly layouts, Gutenberg, and SEO best practices.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: poolspakit
License: GPL-2.0-or-later
*/

:root {
  --psk-navy: #0c2f3f;
  --psk-navy-2: #123f50;
  --psk-aqua: #2bb7a9;
  --psk-aqua-dark: #1a8d83;
  --psk-sky: #eaf8f6;
  --psk-sand: #f7f5ef;
  --psk-bg: #fbfcfd;
  --psk-surface: #ffffff;
  --psk-text: #18323e;
  --psk-muted: #667981;
  --psk-border: #dfe9ec;
  --psk-warning: #fff6de;
  --psk-radius: 18px;
  --psk-shadow: 0 12px 32px rgba(12, 47, 63, .08);
  --psk-content: 760px;
  --psk-wide: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--psk-bg);
  color: var(--psk-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--psk-aqua-dark); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--psk-navy); }
button, input, select, textarea { font: inherit; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto !important; width: auto; height: auto;
  top: 8px; left: 8px; z-index: 99999;
  padding: 12px 16px; background: #fff; color: #000;
  border-radius: 10px; box-shadow: var(--psk-shadow);
}

.psk-shell { width: min(calc(100% - 32px), var(--psk-wide)); margin-inline: auto; }
.psk-main { padding: 36px 0 64px; }

/* Header */
.psk-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(12,47,63,.08); }
.psk-header-inner { min-height: 72px; display: flex; align-items: center; gap: 28px; }
.psk-brand { display:flex; align-items:center; gap:12px; min-width:max-content; text-decoration:none; }
.psk-brand-mark { width: 40px; height: 40px; border-radius: 13px; display:grid; place-items:center; background: linear-gradient(145deg, var(--psk-navy), var(--psk-aqua)); color:#fff; font-weight:800; box-shadow:0 8px 20px rgba(43,183,169,.22); }
.psk-brand-text { font-size: 1.15rem; font-weight: 800; color: var(--psk-navy); letter-spacing: -.02em; }
.psk-nav { margin-left:auto; }
.psk-nav ul { display:flex; align-items:center; gap:6px; list-style:none; padding:0; margin:0; }
.psk-nav a { display:block; padding:10px 12px; border-radius:10px; color:var(--psk-text); text-decoration:none; font-weight:650; font-size:.95rem; }
.psk-nav a:hover, .psk-nav .current-menu-item > a { background:var(--psk-sky); color:var(--psk-navy); }
.psk-menu-toggle { display:none; border:0; background:var(--psk-sky); color:var(--psk-navy); padding:9px 11px; border-radius:10px; cursor:pointer; }

/* Hero */
.psk-hero { padding: 56px 0 34px; }
.psk-hero-card { position:relative; overflow:hidden; background: linear-gradient(135deg, #0c2f3f 0%, #124d5c 55%, #1e8f87 100%); color:#fff; border-radius:28px; padding: clamp(34px, 5vw, 72px); box-shadow: 0 20px 55px rgba(12,47,63,.22); }
.psk-hero-card:after { content:""; position:absolute; inset:auto -80px -120px auto; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.08); }
.psk-kicker { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.12); font-size:.82rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.psk-hero h1 { max-width:760px; margin:18px 0 14px; font-size:clamp(2.3rem, 5vw, 4.7rem); line-height:1.02; letter-spacing:-.045em; }
.psk-hero p { max-width:720px; margin:0 0 26px; font-size:clamp(1rem,1.5vw,1.22rem); color:rgba(255,255,255,.86); }
.psk-search { display:flex; gap:10px; max-width:620px; background:#fff; padding:8px; border-radius:15px; position:relative; z-index:1; }
.psk-search input[type="search"] { width:100%; border:0; outline:0; padding:10px 12px; color:var(--psk-text); background:transparent; }
.psk-search button { border:0; background:var(--psk-aqua); color:#08353b; font-weight:800; border-radius:11px; padding:10px 16px; cursor:pointer; }

/* cards */
.psk-section { padding: 24px 0 10px; }
.psk-section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.psk-section-head h2 { margin:0; font-size:clamp(1.45rem,2vw,2rem); letter-spacing:-.025em; color:var(--psk-navy); }
.psk-section-head p { margin:0; color:var(--psk-muted); }
.psk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.psk-card { background:var(--psk-surface); border:1px solid var(--psk-border); border-radius:var(--psk-radius); padding:22px; box-shadow:0 6px 22px rgba(12,47,63,.045); }
.psk-card:hover { transform:translateY(-2px); transition:.2s ease; box-shadow:var(--psk-shadow); }
.psk-card h3 { margin:6px 0 8px; font-size:1.08rem; color:var(--psk-navy); }
.psk-card p { margin:0; color:var(--psk-muted); font-size:.94rem; }
.psk-card a { color:inherit; text-decoration:none; }
.psk-icon { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--psk-sky); color:var(--psk-aqua-dark); font-size:1.3rem; }

.psk-tools-strip { background:var(--psk-sand); border:1px solid #eee7d7; border-radius:22px; padding:24px; }

/* content */
.psk-content-wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; align-items:start; }
.psk-article { background:#fff; border:1px solid var(--psk-border); border-radius:22px; padding:clamp(24px,4vw,48px); }
.psk-article-header { margin-bottom:28px; }
.psk-breadcrumbs { font-size:.86rem; color:var(--psk-muted); margin-bottom:16px; }
.psk-breadcrumbs a { color:inherit; text-decoration:none; }
.psk-article h1 { font-size:clamp(2rem,4vw,3.35rem); line-height:1.08; letter-spacing:-.035em; margin:0 0 14px; color:var(--psk-navy); }
.psk-meta { display:flex; flex-wrap:wrap; gap:12px 18px; color:var(--psk-muted); font-size:.9rem; }
.psk-entry-content { max-width:var(--psk-content); }
.psk-entry-content > *:first-child { margin-top:0; }
.psk-entry-content h2, .psk-entry-content h3 { color:var(--psk-navy); line-height:1.2; letter-spacing:-.02em; scroll-margin-top:95px; }
.psk-entry-content h2 { font-size:1.75rem; margin-top:2.15em; }
.psk-entry-content h3 { font-size:1.3rem; margin-top:1.75em; }
.psk-entry-content p, .psk-entry-content li { font-size:1.045rem; }
.psk-entry-content table { width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.95rem; }
.psk-entry-content th, .psk-entry-content td { border:1px solid var(--psk-border); padding:11px 12px; text-align:left; }
.psk-entry-content th { background:var(--psk-sky); color:var(--psk-navy); }
.psk-entry-content blockquote { margin:1.5em 0; padding:16px 18px; border-left:4px solid var(--psk-aqua); background:var(--psk-sky); border-radius:0 12px 12px 0; }
.psk-quick-answer, .psk-callout { padding:18px 20px; border-radius:15px; background:var(--psk-sky); border:1px solid #cfeee9; margin:1.2em 0; }
.psk-warning { background:var(--psk-warning); border-color:#f2dda1; }

/* Sidebar */
.psk-sidebar { position:sticky; top:96px; display:grid; gap:18px; }
.psk-widget { background:#fff; border:1px solid var(--psk-border); border-radius:16px; padding:18px; }
.psk-widget-title { margin:0 0 12px; font-size:1rem; color:var(--psk-navy); }
.psk-widget ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.psk-widget a { text-decoration:none; }

/* Ads */
.psk-ad { width:100%; display:grid; place-items:center; text-align:center; background:#f5f8f9; border:1px dashed #c9d9dd; color:#87989e; border-radius:12px; overflow:hidden; }
.psk-ad small { display:block; padding:6px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
#psk-ad-after-intro { min-height: 280px; margin: 24px 0; }
#psk-ad-mid-content { min-height: 280px; margin: 28px 0; }
#psk-ad-sidebar { min-height: 280px; }
#psk-ad-before-footer { min-height: 180px; margin: 30px auto; }

/* Archive */
.psk-archive-head { margin-bottom:24px; }
.psk-archive-head h1 { margin:0 0 8px; font-size:clamp(2rem,4vw,3.2rem); color:var(--psk-navy); }
.psk-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.psk-post-card { background:#fff; border:1px solid var(--psk-border); border-radius:18px; overflow:hidden; }
.psk-post-card .psk-card-body { padding:20px; }
.psk-post-card h2 { margin:0 0 10px; font-size:1.2rem; line-height:1.25; }
.psk-post-card h2 a { color:var(--psk-navy); text-decoration:none; }
.psk-post-card p { color:var(--psk-muted); margin:0; }
.psk-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,var(--psk-sky),#d9efec); overflow:hidden; }
.psk-thumb img { width:100%; height:100%; object-fit:cover; }

/* Footer */
.psk-footer { margin-top:60px; background:var(--psk-navy); color:#dce8eb; }
.psk-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding:46px 0 30px; }
.psk-footer h3 { color:#fff; margin-top:0; }
.psk-footer a { color:#dce8eb; }
.psk-footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:18px 0 26px; color:#a9bec5; font-size:.88rem; }

/* Pagination */
.navigation.pagination { margin-top:28px; }
.nav-links { display:flex; flex-wrap:wrap; gap:8px; }
.page-numbers { display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--psk-border); border-radius:10px; text-decoration:none; background:#fff; }
.page-numbers.current { background:var(--psk-navy); color:#fff; border-color:var(--psk-navy); }

/* WP alignments */
.alignwide { width:min(100vw - 40px, 1040px); margin-left:50%; transform:translateX(-50%); }
.alignfull { width:100vw; margin-left:50%; transform:translateX(-50%); }

@media (max-width: 980px) {
  .psk-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .psk-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .psk-content-wrap { grid-template-columns:1fr; }
  .psk-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .psk-footer-grid { grid-template-columns:1fr 1fr; }
  .psk-footer-grid > :first-child { grid-column:1/-1; }
}

@media (max-width: 760px) {
  .psk-shell { width:min(calc(100% - 22px),var(--psk-wide)); }
  .psk-header-inner { min-height:64px; }
  .psk-menu-toggle { display:block; margin-left:auto; }
  .psk-nav { display:none; position:absolute; top:64px; left:12px; right:12px; background:#fff; border:1px solid var(--psk-border); border-radius:15px; padding:10px; box-shadow:var(--psk-shadow); }
  .psk-nav.is-open { display:block; }
  .psk-nav ul { flex-direction:column; align-items:stretch; }
  .psk-nav a { padding:12px; }
  .psk-hero { padding-top:24px; }
  .psk-hero-card { border-radius:20px; }
  .psk-search { flex-direction:column; }
  .psk-grid, .psk-post-grid, .psk-sidebar { grid-template-columns:1fr; }
  .psk-footer-grid { grid-template-columns:1fr; }
  .psk-footer-grid > :first-child { grid-column:auto; }
  .psk-article { padding:22px; border-radius:17px; }
  .psk-entry-content p, .psk-entry-content li { font-size:1rem; }
  .psk-sidebar { display:none; }
}