/*
Theme Name: Portsmouth Event
Theme URI: https://portsmouthevent.com
Author: Total Web Lab
Author URI: https://totalweblab.com
Description: The public face of portsmouthevent.com, a free community event platform for Portsmouth, built in-house by Total Media Lab. Standalone theme with Customizer controls for the logo, hero copy, and footer. Designed to pair with the Portsmouth Event plugin, which supplies the event data.
Version: 1.1.0
Requires at least: 5.8
Requires PHP: 8.0
License: GPL2
Text Domain: portsmouthevent
*/

/* ============================================================
   Design tokens (matched to the approved mockup)
   ============================================================ */
:root{
  --purple:#662880; --purple-deep:#4a1c5e; --purple-soft:#f3eaf8;
  --gold:#C9A84C; --ink:#2a2230; --slate:#6b6473; --line:#e4dcec;
  --paper:#faf7fb; --white:#ffffff; --green:#2f8f6b; --amber:#c98a2c;
  --shadow:0 1px 2px rgba(74,28,94,.06),0 8px 24px rgba(74,28,94,.08);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.01em;line-height:1.15}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.pev-container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Accessibility: visible focus + skip link */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pev-skip{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.pev-skip:focus{left:0}

/* ============================================================
   Header
   ============================================================ */
.pev-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.pev-header .pev-container{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.pev-logo{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:21px;font-weight:700;color:var(--purple);letter-spacing:-.02em}
.pev-logo img{max-height:44px;width:auto;display:block}
.pev-logo .pev-logo-text span{color:var(--gold)}
.pev-nav{display:flex;align-items:center;gap:26px}
.pev-nav a{font-size:14px;font-weight:600;color:var(--slate)}
.pev-nav a:hover{color:var(--purple);text-decoration:none}
.pev-nav .pev-cta{background:var(--purple);color:#fff;padding:9px 18px;border-radius:8px}
.pev-nav .pev-cta:hover{background:var(--purple-deep);color:#fff}
.pev-menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:18px;color:var(--purple)}

/* ============================================================
   Hero (the thesis: find what's happening on the waterfront)
   ============================================================ */
.pev-hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(1200px 400px at 80% -10%,rgba(201,168,76,.16),transparent),
    linear-gradient(160deg,#fff,var(--purple-soft));
}
.pev-hero .pev-container{padding-top:62px;padding-bottom:58px;position:relative;z-index:2}
.pev-hero .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.pev-hero h1{font-size:46px;color:var(--ink);max-width:640px;margin-bottom:16px}
.pev-hero h1 em{font-style:italic;color:var(--purple)}
.pev-hero p{font-size:17px;color:var(--slate);max-width:520px;margin-bottom:26px}
.pev-search{display:flex;gap:8px;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow)}
.pev-search input{flex:1;border:none;padding:10px 12px;font-size:15px;outline:none;color:var(--ink);background:transparent}
.pev-search button{background:var(--purple);color:#fff;padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;border:none;cursor:pointer}
.pev-search button:hover{background:var(--purple-deep)}
.pev-hero-art{position:absolute;right:-40px;bottom:-60px;width:340px;height:340px;opacity:.5;pointer-events:none;z-index:1}

/* ============================================================
   Section heads + event grid (pulled live from the plugin)
   ============================================================ */
.pev-section{padding:36px 0}
.pev-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.pev-section-head h2{font-size:24px;color:var(--ink)}
.pev-section-head a{font-size:13px;font-weight:600}

.pev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pev-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;display:block;color:inherit}
.pev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d9cbe6;text-decoration:none}
.pev-card .ph{height:120px;position:relative;display:flex;align-items:flex-end;padding:12px;
  background:linear-gradient(135deg,#7b3a9c,#4a1c5e)}
.pev-card .ph.alt1{background:linear-gradient(135deg,#2f8f6b,#1d5f47)}
.pev-card .ph.alt2{background:linear-gradient(135deg,#c98a2c,#9c6516)}
.pev-card .ph.alt3{background:linear-gradient(135deg,#5a6fb0,#374a86)}
.pev-card .ph.alt4{background:linear-gradient(135deg,#b4543f,#7d3325)}
.pev-card .ph .cat{font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.92);color:var(--ink)}
.pev-card .body{padding:14px 16px 18px}
.pev-card .date{font-size:12px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em}
.pev-card h3{font-size:17px;margin:5px 0 6px;color:var(--ink)}
.pev-card .meta{font-size:13px;color:var(--slate)}
.pev-empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:40px;text-align:center;color:var(--slate)}

/* feeds row */
.pev-feeds{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:6px}

/* hero secondary actions */
.pev-hero-actions{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pev-hero-link{font-size:14px;font-weight:600;color:var(--purple)}
.pev-hero-dot{color:var(--slate)}

/* warmer empty state */
.pev-empty h3{font-size:20px;color:var(--ink);margin-bottom:8px}
.pev-empty .pev-cta-big{margin-top:16px}

/* welcome / what-can-you-do section */
.pev-welcome{background:linear-gradient(180deg,#fff,var(--purple-soft));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0}
.pev-welcome-head{text-align:center;max-width:620px;margin:0 auto 30px}
.pev-welcome-head h2{font-size:28px;color:var(--ink);margin-bottom:10px}
.pev-welcome-head p{color:var(--slate);font-size:16px}
.pev-welcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pev-welcome-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;transition:transform .18s,box-shadow .18s}
.pev-welcome-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pev-welcome-icon{font-size:30px;margin-bottom:12px}
.pev-welcome-card h3{font-size:19px;color:var(--purple);margin-bottom:8px}
.pev-welcome-card p{font-size:14px;color:var(--slate);line-height:1.6;margin-bottom:14px}
.pev-welcome-card a{font-size:14px;font-weight:600}
@media(max-width:860px){.pev-welcome-grid{grid-template-columns:1fr}}

/* feeds row pills */
.pev-feedpill{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--slate);padding:9px 15px;border:1px dashed var(--line);border-radius:10px;background:#fff}
.pev-feedpill:hover{color:var(--purple);border-color:var(--purple);text-decoration:none}

/* generic content (pages/posts) */
.pev-content{padding:40px 0;max-width:760px}
.pev-content h1{font-size:34px;margin-bottom:18px}
.pev-content h2{font-size:24px;margin:24px 0 12px}
.pev-content p{margin-bottom:16px;color:var(--ink)}
.pev-content ul,.pev-content ol{margin:0 0 16px 22px}

/* ============================================================
   Footer
   ============================================================ */
.pev-footer{background:var(--purple-deep);color:#e9dcf2;margin-top:40px}
.pev-footer .pev-container{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.pev-footer h4{color:#fff;font-size:16px;margin-bottom:10px}
.pev-footer a{color:#e9dcf2}
.pev-footer a:hover{color:#fff}
.pev-footer .col{max-width:320px}
.pev-footer .col p{font-size:14px;margin-bottom:8px}
.pev-footer .pev-foot-brand{font-family:Georgia,serif;font-size:18px;font-weight:700;color:#fff}
.pev-footer .pev-foot-brand span{color:var(--gold)}
.pev-footer-base{border-top:1px solid rgba(255,255,255,.12)}
.pev-footer-base .pev-container{padding-top:16px;padding-bottom:16px;font-size:12.5px;color:#cbb8da;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ============================================================
   For Organizers landing page
   ============================================================ */
.pev-cta-big{display:inline-block;background:var(--purple);color:#fff;padding:13px 26px;border-radius:10px;font-weight:600;font-size:15px}
.pev-cta-big:hover{background:var(--purple-deep);color:#fff;text-decoration:none}
.pev-org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pev-org-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;border-top:3px solid var(--gold)}
.pev-org-card h3{font-size:18px;color:var(--purple);margin-bottom:8px}
.pev-org-card p{font-size:14px;color:var(--slate);line-height:1.6}
.pev-org-why{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;max-width:760px}
.pev-org-why h2{font-size:22px;color:var(--ink);margin-bottom:10px}
.pev-org-why p{color:var(--slate);font-size:15px;line-height:1.7}
.pev-org-cta{background:linear-gradient(135deg,var(--purple-deep),#7b3a9c);color:#fff;border-radius:14px;padding:32px;margin-top:22px;text-align:center}
.pev-org-cta h2{color:#fff;font-size:24px;margin-bottom:8px}
.pev-org-cta p{color:#e9dcf2;margin-bottom:16px}
.pev-org-contact{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.pev-org-contact span{color:#fff;font-weight:600}
@media(max-width:860px){.pev-org-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pev-org-grid{grid-template-columns:1fr}}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:860px){
  .pev-grid{grid-template-columns:1fr 1fr}
  .pev-hero h1{font-size:34px}
}
@media(max-width:600px){
  .pev-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;display:none}
  .pev-nav.open{display:flex}
  .pev-nav a{padding:10px 0;border-bottom:1px solid var(--line)}
  .pev-nav .pev-cta{text-align:center;margin-top:8px}
  .pev-menu-toggle{display:block}
  .pev-grid{grid-template-columns:1fr}
  .pev-hero h1{font-size:28px}
  .pev-hero-art{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}