/* GAL.IL — colors drawn from the approved surfer and wave mark. */
:root { --marine:#063748; --teal:#087f85; --mint:#89dfc5; --cream:#fffdf7; --sun:#f6b34a; }
body { font-size:16px; background:#f3f8f6; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #f6b34a; outline-offset:4px; }
.skip-link { position:fixed; top:10px; inset-inline-start:12px; z-index:100; padding:12px; background:white; transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.topbar { grid-template-columns:auto 1fr auto; gap:26px; min-height:82px; padding-inline:clamp(18px,4vw,64px); background:rgba(255,253,247,.98) !important; }
.brand { gap:10px; }
.brand-logo { width:52px; height:52px; object-fit:contain; border-radius:50%; }
.brand-type { font-size:1.38rem; line-height:1; letter-spacing:-.035em; }
.brand-type small { display:block; margin-top:6px; font-size:.625rem; font-weight:650; letter-spacing:.16em; }
.main-nav { justify-content:center; gap:clamp(12px,1.6vw,28px); }
.main-nav a { font-size:.875rem; padding-block:12px; white-space:nowrap; }
.main-nav a.active { color:var(--teal); }
.main-nav a.active::after { opacity:1; transform:none; background:var(--teal); bottom:3px; }
.header-actions { gap:10px; }
.language-switcher { border:1px solid #d9e5df; padding:3px; background:transparent; }
.lang-btn { font-size:.8125rem; min-width:34px; min-height:38px; padding:4px 7px; }
.lang-btn.active { background:var(--marine); color:white; }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid #dae7e1; border-radius:10px; background:transparent; padding:11px; cursor:pointer; }
.menu-toggle span { display:block; height:2px; margin:4px 0; background:var(--marine); }
.site-shell[data-site-page="waves"] main { width:100%; }
.site-shell[data-site-page="waves"] .waves-home { padding-top:0; }
.home-forecast-body { width:min(1080px,calc(100% - 36px)); margin-inline:auto; padding-top:28px; }
.surf-hero { position:relative; isolation:isolate; min-height:580px; color:white; background:#063748; overflow:hidden; }
.hero-media, .hero-shade { position:absolute; inset:0; z-index:-1; }
.hero-media img, .hero-media video { position:absolute; width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.hero-media video { opacity:0; transition:opacity .5s ease; }
.hero-media video.is-playing { opacity:1; }
.hero-shade { background:linear-gradient(90deg,rgba(2,29,40,.86) 0%,rgba(3,37,45,.7) 40%,rgba(4,39,45,.05) 80%),linear-gradient(0deg,rgba(3,33,42,.84),transparent 60%); }
[dir="rtl"] .hero-shade { background:linear-gradient(270deg,rgba(2,29,40,.89),rgba(3,37,45,.7) 40%,rgba(4,39,45,.1) 85%),linear-gradient(0deg,rgba(3,33,42,.84),transparent 60%); }
.hero-inner { width:min(1180px,calc(100% - 64px)); margin-inline:auto; padding-block:30px 38px; }
.hero-heading-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
.hero-wordmark { font-size:1.35rem; font-weight:850; letter-spacing:-.035em; }
.hero-wordmark > span { color:var(--sun); }
.hero-wordmark > small { margin-inline-start:10px; font-size:.75rem; letter-spacing:.14em; font-weight:600; color:#d3f1e6; }
.hero-model-label { font-size:.8125rem; color:#e4f6ee; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:50px; align-items:center; }
.hero-info { max-width:730px; min-width:0; }
.hero-location-controls { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) 44px; gap:10px; width:min(540px,100%); align-items:end; }
.hero-location-controls .spot-field { display:grid; gap:5px; min-width:0; }
.hero-location-controls .spot-field label { color:#d2e8e0; font-size:.8125rem; }
.hero-location-controls .spot-field select { min-width:0; width:100%; min-height:46px; padding:9px 12px; border:1px solid rgba(206,240,227,.4); border-radius:10px; color:white; background:rgba(1,36,45,.65); font-size:1rem; }
.hero-location-controls .spot-field option { color:var(--marine); background:white; }
.waves-home .hero-location-controls .favorite-btn { min-width:44px; width:44px; height:46px; border-color:rgba(206,240,227,.4); border-radius:10px; color:white; background:rgba(1,36,45,.65); }
.waves-home .hero-location-controls .favorite-btn[aria-pressed="true"] { color:var(--sun); }
.hero-info h1 { font-size:clamp(2rem,4.2vw,3.6rem); line-height:1.12; letter-spacing:-.045em; font-weight:760; margin:23px 0 12px; text-wrap:balance; }
.hero-condition { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid rgba(155,230,203,.28); border-radius:7px; color:#cbf4e3; background:rgba(12,67,64,.7); font-size:.9375rem; line-height:1.45; }
.hero-condition[data-quality="poor"] { color:#ffe3b7; border-color:rgba(246,179,74,.4); }
.hero-readings { display:grid; grid-template-columns:1.15fr 1fr .85fr; margin-top:24px; padding-top:21px; border-top:1px solid rgba(223,250,235,.23); }
.hero-reading { display:grid; align-content:start; gap:6px; min-width:0; padding-inline:23px; border-inline-start:1px solid rgba(223,250,235,.2); }
.hero-reading:first-child { padding-inline-start:0; border:0; }
.hero-reading > span { font-size:.875rem; color:#d5e9e3; }
.hero-reading > strong { font-size:clamp(1.85rem,3.4vw,3rem); font-weight:730; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.04em; white-space:nowrap; }
.hero-reading .value-unit { font-size:.38em; letter-spacing:0; font-weight:500; color:#d7f0e7; }
.hero-reading > small { font-size:.875rem; color:#c7ded7; }
.hero-bottom { display:flex; align-items:center; gap:26px; margin-top:26px; }
.forecast-cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:13px 24px; border:0; border-radius:10px; color:#053b41; background:var(--mint); font-size:1rem; font-weight:750; text-decoration:none; transition:background .15s; }
.forecast-cta:hover { background:#b5f2dc; }
.hero-camera-link { padding:12px 2px; color:white; font-size:.9375rem; text-decoration:underline; text-underline-offset:6px; }
.hero-model-time { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:22px; font-size:.75rem; color:#c5dad3; }
.hero-model-time .sync-state { color:#c5dad3; margin:0; padding:0; font-size:.75rem; }
.hero-model-time .sync-state.error { color:#ffd6b6; }
.hero-model-time .sync-state.live .sync-dot { background:#9be6c8; }
.hero-emblem { padding:7px; border-radius:28px; background:#fffdf7; width:100%; aspect-ratio:1; box-shadow:0 16px 50px rgba(2,24,28,.25); }
.hero-emblem img { width:100%; height:100%; border-radius:22px; object-fit:contain; }
.motion-toggle { position:absolute; inset-inline-end:20px; bottom:16px; width:40px; height:40px; border:1px solid #bfdacf; border-radius:50%; color:white; background:rgba(0,31,38,.65); cursor:pointer; }
.full-forecast-link { display:flex; justify-content:center; margin-block:20px; color:var(--teal); font-size:1rem; font-weight:700; text-underline-offset:4px; }
.hour-wave { background:#e7f4f0; }
.wave-metric > strong { color:var(--teal); }
.footer-links { flex-wrap:wrap; }
footer { font-size:.875rem; }
footer p { font-size:.875rem; }
@media(min-width:1101px) { .site-shell[data-site-page="waves"] .home-forecast-body { padding-top:32px; } }
@media(max-width:1100px) {
  .topbar { gap:16px; grid-template-columns:auto 1fr auto; padding-inline:20px; }
  .main-nav { gap:12px; }
  .main-nav a { font-size:.8125rem; }
  .brand-type { font-size:1.15rem; }
  .brand-type small { display:none; }
  .hero-layout { grid-template-columns:minmax(0,1fr) 190px; gap:30px; }
}
@media(max-width:900px) {
  .topbar { grid-template-columns:1fr auto; min-height:72px; }
  .header-actions { grid-column:2; }
  .brand-logo { width:46px; height:46px; }
  .brand-type { font-size:1.3rem; }
  .menu-toggle { display:block; }
  .site-shell .main-nav { display:none; position:absolute; top:100%; inset-inline:0; bottom:auto; width:auto; max-width:none; padding:16px 20px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; border:0; border-bottom:1px solid #d2e5dc; border-radius:0; transform:none; color:var(--marine); background:#fffdf7; box-shadow:0 12px 20px rgba(5,50,50,.09); }
  .site-shell .main-nav.is-open { display:grid; }
  .site-shell .main-nav a { padding:13px; font-size:.9375rem; border-radius:8px; text-align:start; }
  .site-shell .main-nav a.active { color:var(--teal); background:#e5f4ed; }
  .main-nav a::after { display:none; }
  .hero-inner { width:calc(100% - 40px); }
  .hero-layout { grid-template-columns:minmax(0,1fr) 140px; gap:24px; }
  .hero-emblem { border-radius:20px; padding:4px; }
}
@media(max-width:640px) {
  .topbar { min-height:68px; gap:8px; padding-inline:12px; }
  .brand { gap:6px; }
  .brand-logo { width:43px; height:43px; }
  .brand-type { font-size:1.16rem; }
  .header-actions { gap:7px; }
  .language-switcher { gap:0; }
  .lang-btn { min-width:31px; min-height:36px; padding-inline:5px; font-size:.8125rem; }
  .menu-toggle { width:40px; height:40px; padding:9px; }
  .surf-hero { min-height:0; }
  .hero-inner { width:calc(100% - 32px); padding-block:20px 24px; }
  .hero-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .hero-emblem { display:none; }
  .hero-heading-row { margin-bottom:20px; gap:8px; }
  .hero-wordmark { font-size:1.14rem; }
  .hero-wordmark > small { font-size:.625rem; letter-spacing:.1em; margin-inline-start:6px; }
  .hero-model-label { font-size:.75rem; }
  .hero-shade { background:linear-gradient(90deg,rgba(2,27,35,.72),rgba(2,39,43,.37)),linear-gradient(0deg,rgba(2,30,39,.93),rgba(2,30,39,.05) 90%); }
  [dir="rtl"] .hero-shade { background:linear-gradient(270deg,rgba(2,27,35,.72),rgba(2,39,43,.37)),linear-gradient(0deg,rgba(2,30,39,.93),rgba(2,30,39,.05) 90%); }
  .hero-media img,.hero-media video { object-position:59% center; }
  .hero-location-controls { gap:8px; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 40px; }
  .hero-location-controls .spot-field select { padding-inline:8px; font-size:1rem; }
  .waves-home .hero-location-controls .favorite-btn { width:40px; min-width:40px; }
  .hero-info h1 { font-size:1.95rem; margin:22px 0 10px; }
  .hero-condition { font-size:.875rem; }
  .hero-readings { margin-top:19px; padding-top:18px; }
  .hero-reading { padding-inline:12px; }
  .hero-reading > strong { font-size:1.95rem; }
  .hero-reading > span,.hero-reading > small { font-size:.8125rem; }
  .hero-bottom { margin-top:24px; gap:22px; }
  .forecast-cta { min-height:50px; padding:12px 22px; }
  .hero-model-time { margin-top:19px; padding-inline-end:30px; font-size:.75rem; }
  .motion-toggle { bottom:12px; inset-inline-end:12px; width:34px; height:34px; }
  .home-forecast-body { width:calc(100% - 24px); padding-top:22px; }
  .site-shell:is([data-site-page="forecast"],[data-site-page="spot"]) main { width:calc(100% - 24px); }
  .waves-home .spot-title .section-kicker { font-size:.8125rem; }
  .hour-label time { transform:none; }
  .hourly-table col:nth-child(1) { width:14%; }
  .hourly-table col:nth-child(2) { width:21%; }
  .hourly-table col:nth-child(3) { width:12%; }
  .hourly-table col:nth-child(4) { width:16%; }
  .hourly-table col:nth-child(5) { width:20%; }
  .hourly-table col:nth-child(6) { width:17%; }
  .hour-label { font-size:.75rem; }
  .hour-wave { font-size:1.125rem; }
  .footer-links { flex-direction:row; gap:12px 20px; }
  footer { padding-bottom:32px; }
}
@media(max-width:350px) { .brand-type { font-size:1rem; } .brand-logo { width:38px; height:38px; } .hero-reading { padding-inline:8px; } .hero-reading > strong { font-size:1.7rem; } .hero-wordmark > small { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
.spot-info { display:flex; gap:14px; align-items:center; justify-content:space-between; margin:8px 0 14px; font-size:1rem; }
.spot-info p { margin:0; }
.spot-info a { color:var(--teal); white-space:nowrap; }
.spot-photo { position:relative; overflow:hidden; margin:0 0 22px; height:220px; border-radius:18px; background:#d8e9e1; }
.spot-photo img { width:100%; height:100%; object-fit:cover; }
.spot-photo figcaption { position:absolute; bottom:10px; inset-inline-end:12px; padding:4px 9px; border-radius:5px; color:white; background:rgba(0,25,30,.75); font-size:.75rem; }
.spot-photo figcaption a { color:inherit; }
.site-shell[data-site-page="spots"] .select-spot { display:inline-block; font-size:.9375rem; }
.site-shell[data-site-page="spots"] .spot-card p { font-size:1rem; }
.site-shell[data-site-page="weather"] .forecast-tabs, .site-shell[data-site-page="weather"] .best-window-strip, .site-shell[data-site-page="weather"] .forecast-notes, .site-shell[data-site-page="weather"] .unit-switcher { display:none; }
.weather-intro { padding-top:32px; }
.weather-intro h1 { font-size:clamp(2rem,5vw,3.5rem); margin:0; letter-spacing:-.04em; }
.weather-intro p { font-size:1rem; color:#536b6e; }
.weather-intro + .waves-home { padding-top:12px; }
.weather-intro + .waves-home .forecast-heading h2 { margin:4px 0 0; font-size:1.5rem; }
.weather-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.weather-day { padding:22px; border:1px solid #dde9e3; border-radius:18px; background:white; }
.weather-day h3 { margin:0 0 22px; font-size:1.125rem; }
.weather-day h3 small { display:block; margin-top:4px; font-size:.875rem; font-weight:400; color:#536b6e; }
.weather-day > span { display:block; color:#536b6e; font-size:.875rem; }
.weather-day > strong { display:block; margin:8px 0 24px; color:var(--teal); font-size:2rem; }
.weather-day dl { margin:0; display:grid; gap:14px; }
.weather-day dl > div { display:flex; flex-wrap:wrap; gap:5px 12px; justify-content:space-between; font-size:.875rem; }
.weather-day dt { color:#536b6e; }
.weather-day dd { margin:0; font-weight:650; }
.community-grid { display:grid; gap:22px; }
.community-contact { display:flex; gap:34px; align-items:center; padding:36px; background:var(--marine); color:white; border-radius:24px; }
.community-contact img { width:180px; height:180px; border-radius:24px; }
.community-contact h2 { font-size:1.8rem; margin:0 0 12px; }
.community-contact p { color:#dbefe7; font-size:1rem; max-width:600px; margin:0 0 24px; }
.community-next { padding:28px; border:1px solid #dce8e2; background:white; border-radius:20px; }
.community-next h2 { font-size:1.3rem; margin:0 0 12px; }
.community-next p { margin:0; color:#536b6e; font-size:1rem; }
@media(max-width:700px) { .weather-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .spot-info { flex-wrap:wrap; } .community-contact { flex-direction:column; align-items:start; padding:24px; gap:24px; } .community-contact img { width:130px; height:130px; } .community-contact h2 { font-size:1.6rem; } }
@media(max-width:460px) { .weather-grid { grid-template-columns:minmax(0,1fr); } .spot-photo { height:180px; } }
@media(max-width:900px) {
 .site-shell .topbar .main-nav { background:#fffdf7!important; }
 .site-shell .topbar .main-nav a { color:#31555b; }
 .site-shell .topbar .main-nav a.active { color:#087f85; }
}
body { min-width:0; }
@media(max-width:350px) { .topbar { padding-inline:8px; gap:4px; } .header-actions { gap:4px; } .lang-btn { min-width:29px; } .brand { gap:4px; } }
.camera-link-panel { position:relative; isolation:isolate; overflow:hidden; min-height:360px; }
.camera-link-panel .camera-beach-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.7; }
.camera-photo-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(3,31,41,.97),rgba(3,31,41,.45)); }
.camera-link-panel .camera-photo-caption { font-size:.75rem; color:#d4e8df; }
.camera-photo-caption a { color:inherit; }
/* Current data stays compact; hourly tables scroll vertically inside each day. */
.hero-timing { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 20px; color:#def4e9; font-size:.875rem; }
.hero-timing strong { font-size:1.1rem; color:white; }
.hero-timing small { font-size:.875rem; }
.hourly-scroll { max-height:510px; overflow-y:auto; overscroll-behavior:contain; }
.hourly-scroll thead { position:sticky; top:0; z-index:1; background:#f2f8f5; }
.hourly-table .current-hour { background:rgba(76,190,165,.13); }
.hour-score { white-space:nowrap; }
[data-provider-note] { display:block; margin-top:.65rem; }
[data-provider-note][hidden] { display:none; }
.hour-score { display:block; font-size:.75rem; color:#52726f; }
.weather-now { padding:24px; background:white; border:1px solid #d1e7de; border-radius:20px; margin:24px 0; }
.weather-now h2 { margin-top:0; }
.weather-current-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 16px; }
.weather-current-values dt { font-size:.875rem; color:#50706e; }
.weather-current-values dd { margin:8px 0 0; font-size:2rem; font-weight:700; color:#086f79; }
.weather-current-values dd small { font-size:.875rem; }
.spot-facts { margin:16px 0; padding:20px; background:#eef8f3; border-radius:16px; }
.spot-facts dl { display:flex; gap:24px; flex-wrap:wrap; }
.spot-facts dt { color:#50706e; font-size:.875rem; }
.spot-facts dd { margin:8px 0; font-weight:600; }
@media(max-width:600px){ .weather-current-values{grid-template-columns:repeat(2,minmax(0,1fr));} .weather-now{padding:18px;} .overview-secondary{flex-wrap:wrap;} .hero-timing{gap:8px;} }
@media(max-width:350px){
 .hero-location-controls { grid-template-columns:minmax(0,1fr) 40px; }
 .hero-location-controls .spot-field:first-child { grid-column:1/-1; }
}
@media(max-width:600px){
 .hourly-table col:nth-child(1){width:17%;}
 .hourly-table col:nth-child(2){width:17%;}
 .hourly-table col:nth-child(3){width:14%;}
 .hourly-table col:nth-child(4){width:16%;}
 .hourly-table col:nth-child(5){width:20%;}
 .hourly-table col:nth-child(6){width:16%;}
 .hourly-table thead th{font-size:.8125rem; padding-inline:1px; overflow-wrap:normal;}
 .hourly-table thead th > span{white-space:nowrap;}
 .hour-label time{font-size:.8125rem;}
}
/* Language links retain the existing button appearance. */
a.lang-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:normal; }