/*
Theme Name: Local Knowledge
Theme URI: https://www.northernbeaches.surf
Author: Velvary
Author URI: https://www.northernbeaches.surf
Description: Fast, photo-led theme for the Local Knowledge live surf-and-coastal-conditions service. A cinematic landing page that points to the app, built to grow into per-beach showcases driven by the Local Knowledge plugin's break data.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: localknowledge
*/

:root{
  --bg:#0a0c0f; --panel:#11151a; --line:#1e242c;
  --ink:#eef1f4; --muted:#98a2ad; --dim:#6b7683;
  --gold:#ff9d47; --gold-2:#ffb86b;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:linear-gradient(#0a0c0fcc,#0a0c0f66); border-bottom:1px solid #ffffff10}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; letter-spacing:.14em; font-size:13px; text-transform:uppercase; text-decoration:none; color:var(--ink)}
.brand img{display:block; width:38px; height:38px; border-radius:50%}
.brand b{color:var(--gold)}

/* optional primary menu (Appearance → Menus) */
.menu{margin:0 auto 0 28px}
.menu-list{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin:0; padding:0; list-style:none}
.menu-list a{color:var(--muted); text-decoration:none; font-weight:600; font-size:15px}
.menu-list a:hover,.menu-list .current-menu-item a{color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:15px;
  text-decoration:none; padding:.62em 1.15em; border-radius:999px; white-space:nowrap;
  background:var(--gold); color:#211200; transition:transform .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn.big{font-size:18px; padding:.85em 1.6em}

/* hero */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end;
  background:#000 center/cover no-repeat}
.hero::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,#0a0c0f55 0%,#0a0c0f00 32%,#0a0c0f22 60%,#0a0c0fee 100%)}
.hero .wrap{position:relative; z-index:2; padding-top:8vh; padding-bottom:8vh}

/* hero slideshow — pure-CSS crossfade over the base image. The .hero background is the
   first slide, so there's never a blank frame while the first layer fades in. */
.hero-slides{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-slide{position:absolute; inset:0; background:#000 center/cover no-repeat; opacity:0;
  animation:heroFade 30s infinite; will-change:opacity}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:6s}
.hero-slide:nth-child(3){animation-delay:12s}
.hero-slide:nth-child(4){animation-delay:18s}
.hero-slide:nth-child(5){animation-delay:24s}
@keyframes heroFade{
  0%{opacity:0} 3%{opacity:1} 20%{opacity:1} 23%{opacity:0} 100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none; opacity:0}
  .hero-slide:nth-child(1){opacity:1}
}
.eyebrow{color:var(--gold-2); font-weight:700; letter-spacing:.2em; font-size:13px;
  text-transform:uppercase; margin:0 0 14px}
h1{margin:0; font-size:clamp(40px,8vw,76px); line-height:1.02; letter-spacing:-.02em; font-weight:800;
  text-shadow:0 2px 30px #00000080}
.sub{margin:20px 0 30px; max-width:620px; font-size:clamp(17px,2.4vw,21px); color:#dfe4ea;
  text-shadow:0 1px 18px #00000090}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.micro{color:var(--muted); font-size:14px; margin-top:16px}
.micro b{color:#cdd3da; font-weight:600}

/* sections */
section{padding:86px 0}
.kicker{color:var(--gold); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:12px; margin:0 0 12px}
h2{margin:0; font-size:clamp(28px,4.6vw,40px); line-height:1.1; letter-spacing:-.01em; font-weight:800}
.lead{color:var(--muted); font-size:18px; max-width:640px; margin:14px 0 0}

.chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.chip{display:flex; align-items:center; gap:.6em; padding:12px 18px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line); font-weight:600; font-size:15.5px}
.chip small{color:var(--dim); font-weight:400}
.dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 auto;box-shadow:0 0 12px var(--gold)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px}
.card h3{margin:0 0 8px; font-size:21px; letter-spacing:-.01em}
.card h3 span{color:var(--gold)}
.card p{margin:0; color:var(--muted); font-size:16px}

.close{position:relative; text-align:center; background:#000 center/cover no-repeat; padding:120px 0}
.close::after{content:""; position:absolute; inset:0; background:#0a0c0faa}
.close .wrap{position:relative; z-index:2}
.close h2{font-size:clamp(30px,5.4vw,52px)}
.close .btn{margin-top:26px}

/* pages & post content (About, Contact, guides, blog posts…) */
/* NOTE: class is .lk-content, NOT .page — WordPress puts a `page` class on <body> for
   every static Page (incl. a static front page), so a bare `.page` rule would constrain
   the whole site. Keep theme content classes prefixed to avoid body_class collisions. */
.lk-content{max-width:760px; margin-left:auto; margin-right:auto; padding:120px 24px 96px}
.entry-title{font-size:clamp(30px,5vw,46px); line-height:1.08; letter-spacing:-.02em; margin:0 0 8px}
.entry-media{margin:24px 0 0}
.entry-media img{border-radius:14px}
.entry-content{margin-top:28px; color:#d7dce2; font-size:18px}
.entry-content > *{margin:0 0 1.1em}
.entry-content h2{font-size:clamp(24px,3.4vw,32px); margin:1.6em 0 .5em; color:var(--ink); letter-spacing:-.01em}
.entry-content h3{font-size:22px; margin:1.4em 0 .4em; color:var(--ink)}
.entry-content a{color:var(--gold); text-decoration:underline; text-underline-offset:2px}
.entry-content a:hover{color:var(--gold-2)}
.entry-content img{border-radius:12px}
.entry-content blockquote{margin:1.4em 0; padding:.2em 0 .2em 20px; border-left:3px solid var(--gold);
  color:var(--muted); font-style:italic}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin:.4em 0}
.entry-content code{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.15em .45em; font-size:.9em}
.entry-content hr{border:0; border-top:1px solid var(--line); margin:2em 0}

footer.site{border-top:1px solid var(--line); padding:56px 0 70px; color:var(--muted); font-size:15px}
footer.site .cols{display:flex; flex-wrap:wrap; gap:28px 60px; justify-content:space-between}
footer.site b{color:var(--ink)}
footer.site a{color:var(--muted); text-decoration:none}
footer.site a:hover{color:var(--gold)}
.foot-links{display:flex; flex-direction:column; gap:8px}
.madeby{color:var(--gold-2); font-style:italic}

@media(max-width:860px){ .cards{grid-template-columns:1fr} section{padding:64px 0} }
@media(max-width:520px){ .nav .btn{padding:.55em .9em; font-size:14px} }