/*
 Theme Name:   Hatahana
 Theme URI:    https://hatahana.yaniv.tv/
 Description:  Lightweight custom theme for רדיו 101.5 התחנה. RTL, Rubik, no page builder. Provides navbar, footer, live radio player and contact form.
 Author:       Yaniv Morozovsky
 Author URI:   https://Yaniv.TV
 Version:      1.0.0
 Text Domain:  hatahana
*/

:root{
  --navy:#00253E;
  --pink:#E3477A;
  --gray:#D0D1D3;
  --offwhite:#F7F7F7;
  --white:#ffffff;
  --maxw:1140px;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--navy);
  line-height:1.6;
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:20px;width:100%}

/* Accessibility: skip link + focus */
.skip-link{position:absolute;right:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:1000}
.skip-link:focus{right:8px;top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--pink);outline-offset:2px
}

/* ---------- Header / Navbar ---------- */
.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--navy);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:68px;
}
.site-branding .custom-logo-link,.site-branding a{display:inline-flex;align-items:center}
.site-branding img,.custom-logo{max-height:48px;width:auto}
.site-title{color:#fff;font-weight:700;font-size:20px;margin:0}
.site-title a{color:#fff}

.nav-area{display:flex;align-items:center;gap:18px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center}
.main-nav a{
  color:#fff;font-weight:500;padding:8px 14px;border-radius:999px;display:block;
  transition:background .2s,color .2s;
}
.main-nav a:hover,.main-nav .current-menu-item>a{background:var(--pink);color:#fff;text-decoration:none}

.nav-listen{
  background:var(--pink);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15px;
  padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
}
.nav-listen:hover{filter:brightness(1.08)}
.nav-listen svg{width:16px;height:16px;fill:currentColor}

.menu-toggle{display:none;background:transparent;border:0;cursor:pointer;padding:8px;width:44px;height:44px}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  display:block;width:26px;height:3px;background:#fff;border-radius:2px;position:relative;transition:.2s
}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
.menu-toggle span::before{top:-8px}.menu-toggle span::after{top:8px}

@media(max-width:880px){
  .menu-toggle{display:block}
  .nav-area{
    position:absolute;top:100%;right:0;left:0;background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;
    display:none;border-top:1px solid rgba(255,255,255,.1);
  }
  .nav-area.open{display:flex}
  .main-nav ul{flex-direction:column;gap:2px;width:100%}
  .main-nav a{padding:12px 10px}
  .nav-listen{justify-content:center;margin-top:8px}
}

/* ---------- Home sections (Gutenberg group/columns) ---------- */
.home-section{padding:48px 0}
.home-section .wp-block-columns{align-items:center;gap:40px;max-width:var(--maxw);margin-inline:auto;padding-inline:20px;width:100%}
.home-section .wp-block-column{min-width:0}
.home-section h1,.home-section h2{
  color:var(--navy);font-weight:700;line-height:1.2;margin:0 0 14px;font-size:32px;
}
.home-section p{font-size:20px;color:var(--navy);margin:0 0 14px}
.section-logo .wp-block-image img{margin-inline:auto;max-width:78%}
.section-app .wp-block-image img{margin-inline:auto;max-width:80%}
.section-programs{
  background-color:var(--offwhite);
  background-image:linear-gradient(rgba(247,247,247,.55),rgba(247,247,247,.55)),url("assets/bg.webp");
  background-size:cover;background-position:center center;
}

/* store badges – equal height, proper ratio, responsive */
.store-badges{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}
.store-badges a{display:inline-block;line-height:0}
.store-badges img{height:54px;width:auto;display:block;border-radius:8px}
@media(max-width:520px){.store-badges img{height:46px}}

/* social icons */
.social-icons{display:flex;gap:10px;align-items:center;margin:18px 0 0}
.social-icons a{
  width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;transition:transform .15s,opacity .15s
}
.social-icons a:hover{transform:translateY(-2px);opacity:.92;text-decoration:none}
.social-icons svg{width:22px;height:22px;fill:#fff}
.si-facebook{background:#3b5998}
.si-instagram{background:var(--pink)}
.si-tiktok{background:#000}

/* youtube facade (click to load – keeps page light) */
.yt-facade{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#000}
.yt-facade img{width:100%;height:100%;object-fit:cover;opacity:.92}
.yt-facade .yt-play{
  position:absolute;inset:0;margin:auto;width:72px;height:72px;border:0;border-radius:50%;
  background:var(--pink);cursor:pointer;display:flex;align-items:center;justify-content:center
}
.yt-facade .yt-play svg{width:30px;height:30px;fill:#fff;margin-inline-start:4px}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* reverse the programs columns on mobile so video shows under text appropriately */
@media(max-width:781px){
  .home-section{padding:32px 0}
  .home-section h1,.home-section h2{font-size:26px;text-align:center}
  .home-section p{font-size:18px;text-align:center}
  .social-icons{justify-content:center}
  .store-badges{justify-content:center}
}

/* ---------- Interior pages ---------- */
.page-main{padding:48px 0;min-height:50vh}
.page-main h1.entry-title{font-size:32px;color:var(--navy);margin:0 0 24px}
.page-content :is(h2,h3){color:var(--navy)}
.page-content p,.page-content li{font-size:18px}

/* ---------- Contact form ---------- */
.hatahana-form{max-width:620px;margin:0;display:grid;gap:16px}
.hatahana-form .field{display:grid;gap:6px}
.hatahana-form label{font-weight:500;color:var(--navy)}
.hatahana-form input,.hatahana-form textarea{
  font-family:inherit;font-size:16px;padding:12px 14px;border:1px solid #c7ccd1;border-radius:8px;width:100%;background:#fff;color:var(--navy)
}
.hatahana-form textarea{min-height:140px;resize:vertical}
.hatahana-form .hp-field{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hatahana-form button{
  justify-self:start;background:var(--pink);color:#fff;border:0;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:17px;padding:13px 34px;cursor:pointer
}
.hatahana-form button:hover{filter:brightness(1.08)}
.form-notice{padding:14px 18px;border-radius:8px;margin:0 0 20px;font-weight:500}
.form-notice.ok{background:#e6f6ec;color:#1a7a3d;border:1px solid #9bd6ad}
.form-notice.err{background:#fdebec;color:#b3243b;border:1px solid #f0a9b5}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#fff;padding:34px 0;margin-top:0}
.site-footer .container{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center}
.footer-nav a{color:#fff;font-weight:500}
.footer-nav a:hover{color:var(--pink);text-decoration:none}
.footer-contact{font-size:16px}
.footer-contact a{color:#fff;font-weight:700}
.footer-copy{font-size:13px;opacity:.7}