/*
 Theme Name: Sky to Water — Child
 Template: twentytwentyfive
 Version: 1.0.0
 Text Domain: skytowater-child
*/

/* ===== Coastal palette anchored to #005EB8 (fresh) ===== */
:root {
  --bg: #005EB8;
  --card: #ffffff;
  --ink: #f5faff;
  --muted: #e5e9f0;
  --brand: #00b5e2;
  --brand-2: #7cd6cf;
  --edge: #003f7f;
  --sun: #f2a65a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;

  /* Top bar */
  --topbar: #2f4158;
  --topbar-ink: #eaf2ff;
  --topbar-ink-dim: #bcd1f3;
  --link-underline: rgba(234,242,255,.35);
}
/* Landing – gallery intro text */
#gallery .gallery-intro{
  color: var(--muted);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 78% -12%, rgba(242,166,90,.25) 0%, rgba(242,166,90,0) 60%),
    linear-gradient(180deg, #1e87e0 0%, #0f73cc 35%, #0a67c1 55%, var(--bg) 100%);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
a:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.container{width:min(1120px, 92%); margin-inline:auto}

/* ===== Header (dark top bar) ===== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)) 0 100%/100% 1px no-repeat,
    linear-gradient(180deg, var(--topbar), #28384e);
  color:var(--topbar-ink);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:42px; height:42px; border-radius:50%; box-shadow:var(--shadow)}
.brand .title{font-weight:800; letter-spacing:.3px; color:var(--topbar-ink)}
.brand .subtitle{font-size:.8rem; color:var(--topbar-ink-dim)}
.links{display:flex; align-items:center; gap:22px}
.links a{color:var(--topbar-ink); opacity:.92; padding:6px 0; border-bottom:2px solid transparent}
.links a:hover{opacity:1; border-bottom-color:var(--link-underline)}
.links .cta{padding:10px 16px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#052026; font-weight:800; border:1px solid rgba(255,255,255,.08)}
.menu-btn{display:none; border:1px solid rgba(255,255,255,.18); background:transparent; padding:10px 12px; border-radius:10px; color:var(--topbar-ink)}
.menu-btn:hover{background:rgba(255,255,255,.06)}
.nav-mobile{display:none}

/* ===== Hero ===== */
.hero{position:relative; padding:72px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px}
.eyebrow{color:var(--brand-2); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.78rem}
h1{font-family:'Playfair Display', serif; font-weight:700; line-height:1.04; font-size: clamp(2.2rem, 3.2vw + 1.2rem, 4rem); margin:10px 0 14px}
.lead{font-size:1.08rem; color:#e9f3ff; max-width:50ch}
.hero-actions{display:flex; gap:14px; margin-top:22px}
.btn{padding:12px 18px; border-radius:12px; font-weight:700; background:#eaf6ff; border:1px solid var(--edge); color:#0b2a4d}
.btn:hover{background:#ffffff}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#051b1f; border:1px solid rgba(0,0,0,.05)}

/* Bubble */
.bubble{aspect-ratio:1/1; border-radius:50%; width:min(520px, 88%); margin-left:auto; position:relative; box-shadow:var(--shadow);
  background:
    radial-gradient(120% 80% at 50% 22%, rgba(255,255,255,.45), rgba(255,255,255,0) 58%),
    conic-gradient(from 210deg at 60% 40%, #bfefff, #82dff2, #4ccde7, #3fc6cf, #7cd6cf, #bfefff);
  outline:1px solid rgba(255,255,255,.18);
}
.bubble::after{content:""; position:absolute; inset:16px; border-radius:50%; background:radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%)}
.logo-in-hero{position:absolute; inset:0; display:grid; place-items:center}
.logo-in-hero img{width:78%; filter:drop-shadow(0 10px 25px rgba(0,0,0,.12))}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px}
.stat{background:linear-gradient(180deg, #ffffff, #f6fbff); border:1px solid var(--edge); border-radius:var(--radius); padding:18px; color:#0b2a4d}
.stat h3{margin:0; font-size:1.6rem; color:#003f7f}
.stat p{margin:6px 0 0; color:#496988}

/* Sections / Cards */
section{padding:62px 0}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.card{background:linear-gradient(180deg, #ffffff, #f8fbfd); border:1px solid var(--edge); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); transition:transform .2s ease; color:#0b2a4d}
.card:hover{transform:translateY(-3px)}
.icon{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(0,181,226,.20), rgba(124,214,207,.22)); border:1px solid var(--edge); margin-bottom:10px}
.card p{color:#58779a}

/* Video */
.video-wrap{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--edge); background:#e8f6fd}
.video-wrap::before{content:""; position:absolute; inset:-40% -10%; background:
    radial-gradient(600px 300px at 30% 0%, rgba(0,181,226,.16), transparent),
    radial-gradient(400px 200px at 85% 10%, rgba(242,166,90,.20), transparent)}
video{width:100%; display:block}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.tile{position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; border:1px solid var(--edge); background:linear-gradient(135deg, #eef8ff, #e6fbf5)}
.tile img{width:100%; height:100%; object-fit:cover; display:block}
.badge{position:absolute; left:10px; top:10px; font-size:.75rem; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid var(--edge); color:#0b2a4d}

/* Subscribe */
.subscribe{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)); border:1px solid var(--edge); border-radius:var(--radius); padding:22px; color:#0b2a4d}
form#subForm{display:flex; gap:10px}
input[type=email]{flex:1; padding:13px 14px; border-radius:12px; border:1px solid var(--edge); outline:none; background:#ffffff; color:#0b2a4d}
input::placeholder{color:#6b87a4}
button[type=submit]{padding:12px 18px; border-radius:12px; font-weight:800; border:1px solid rgba(0,0,0,.05); background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#052026}

/* Footer */
.site-footer{padding:36px 0 60px; color:#e7f2ff; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.18) 100%)}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center}
.social{display:flex; gap:14px}
.social a{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--edge); background:#ffffff}

/* Waves ornament */
.waves{position:absolute; inset:auto 0 -60px; height:120px; pointer-events:none}
.waves svg{width:100%; height:100%; display:block}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-actions{justify-content:center}
  .bubble{margin-inline:auto}
  .grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .subscribe{grid-template-columns:1fr}

  .links{display:none}
  

 
}

/*** added ***/

/* ——— Reset WP menu bullets/margins ——— */
.site-nav .menu,
.site-nav .menu ul { list-style: none; margin: 0; padding: 0; }

/* ——— Desktop layout ——— */
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav .menu { display: flex; gap: 22px; }
.site-nav .menu > li > a {
  color: var(--topbar-ink);
  opacity: .92;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.site-nav .menu > li > a:hover { opacity: 1; border-bottom-color: var(--link-underline); }

/* Hide the open/close buttons on desktop */
.menu-toggle, .menu-close { display: none; }

/* ——— Mobile styles ——— */
@media (max-width: 900px){
  /* buttons show on mobile */
  .menu-toggle, .menu-close {
    display: inline-grid; place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    background: transparent; padding: 10px 12px; border-radius: 10px;
    color: var(--topbar-ink);
  }
  .menu-close { display: none; }                 /* close hidden until opened */

  /* container becomes a panel */
  .menu-primary-container{
    position: absolute; right: 12px; top: calc(100% + 8px);
    background: linear-gradient(180deg, #2f4158, #243448);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px; box-shadow: var(--shadow);
    padding: 10px 14px; min-width: 200px; display: none;
    z-index: 50;
  }

  /* stack links + remove bullets */
  #primary-menu { display: grid; gap: 8px; }
  #primary-menu a { color: var(--topbar-ink); }

  /* when nav is open */
  .site-nav.nav-open .menu-primary-container { display: block; }
  .site-nav.nav-open .menu-toggle { display: none; }
  .site-nav.nav-open .menu-close  { display: inline-grid; }
}

/* ===== Single Post Styling ===== */
.post-article{
  background: var(--card);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  margin: 40px auto;
  max-width: 860px;
}

.post-header{text-align:center; margin-bottom:24px;}
.post-title{
  font-family:'Playfair Display', serif;
  font-size: clamp(2rem, 3vw, 3rem);
  margin:0 0 12px;
  color: var(--text);
}
.post-meta{
  font-size:.9rem;
  color: var(--muted);
}
.post-cats a{color: var(--accent); text-decoration:none;}
.post-cats a:hover{text-decoration:underline;}

.post-thumb{
  margin: 20px -36px 30px; /* edge-to-edge image */
}
.post-thumb img{
  width:100%;
  height:auto;
  border-radius: var(--radius) var(--radius) 0 0;
}

.entry-content{
  line-height:1.75;
  color:var(--text);
}
.entry-content h2,h3,h4{
  margin-top:1.8em;
  font-family:'Playfair Display', serif;
}
.entry-content p{margin:1em 0;}

.post-footer{
  border-top:1px solid #e2e8f0;
  margin-top:30px; padding-top:20px;
  font-size:.9rem; color:var(--muted);
}
.post-tags a{
  display:inline-block; margin:0 6px 6px 0; padding:6px 12px;
  border-radius:999px; background:#f1f5f9; font-weight:600;
  color:var(--text); text-decoration:none; font-size:.8rem;
}
.post-tags a:hover{background:var(--accent); color:#fff;}

.post-nav{
  display:flex; justify-content:space-between;
  margin:40px auto; max-width:860px;
  font-weight:700;
}
.post-nav a{color:var(--accent); text-decoration:none;}
.post-nav a:hover{text-decoration:underline;}

.comments-area{
  margin:40px auto; max-width:860px;
  background: var(--card);
  border:1px solid #e2e8f0;
  border-radius: var(--radius);
  padding:24px 30px;
}
.comments-title{font-family:'Playfair Display', serif;}
.comment-body{margin-bottom:18px;}
.comment-author{font-weight:600;}

/* ---- Vars: add readable text + accent ---- */
:root{
  --text: #0b2a4d;       /* dark ink for body copy */
  --accent: #00b5e2;     /* link/buttons accent */
}

/* ---- Single post readable colors ---- */
.post-article{ color: var(--text); }            /* stop inheriting the very light body color */
.post-title{ color: var(--text); }
.post-meta{ color: #58779a; }                   /* muted meta line */
.entry-content{ color: var(--text); }
.entry-content a{ color: var(--accent); text-decoration: underline; }
.entry-content a:hover{ text-decoration: none; }

/* Optional: headings inside content */
.entry-content h2, .entry-content h3, .entry-content h4{
  color: var(--text);
}

/* Comments block colors */
.comments-area, .comment-content{ color: var(--text); }
.comments-area a{ color: var(--accent); }


/* Make sure nothing blocks clicks on the YouTube iframe */
.video-wrap { position: relative; }
.video-wrap::before {
  pointer-events: none;     /* allow clicks to pass through */
  z-index: 0;               /* push overlay behind the iframe */
}

/* Ensure the iframe is on top and clickable */
.video-embed,
.video-wrap .video-embed { position: relative; z-index: 1; }

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;     /* keeps proportions responsively */
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}