/* ============================================================
   Yooneek Beach Resort — design tokens recovered from the
   original Turbify/Yahoo SiteBuilder backup (renders clean offline).
     sidebar green   #47b556
     dark bar/text   #000000
     heading red     #aa0000
     body            Trebuchet MS
   Structure preserved: left green sidebar nav, logo banner top-right,
   dark section title bar, content column.
   ============================================================ */

:root{
  --green:#47b556;
  --green-d:#2f8f3d;
  --ink:#111;
  --red:#aa0000;
  --paper:#ffffff;
  --paper-2:#f4f6f2;
  --line:#dcdcdc;
  --muted:#5a5f57;
  --f:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  --wrap:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-d)}
h1,h2,h3{margin:0;line-height:1.25}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---------- shell: sidebar + main ---------- */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh;max-width:var(--wrap);margin:0 auto;
  box-shadow:0 0 30px rgba(0,0,0,.08)}
.side{background:linear-gradient(120deg,var(--green) 0%,var(--green-d) 100%);color:#fff;padding:0}
.side-logo{padding:22px 18px;border-bottom:1px solid rgba(255,255,255,.2)}
.side-logo img{width:100%;border-radius:4px;background:#fff}
.side nav{padding:14px 0}
.side nav a{display:block;padding:14px 22px;color:#fff;text-decoration:none;font-size:1.05rem;
  letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.14)}
.side nav a::before{content:"›";margin-right:10px;opacity:.7}
.side nav a:hover,.side nav a[aria-current="page"]{background:rgba(0,0,0,.16)}
.side-contact{padding:20px 22px;font-size:.85rem;line-height:1.7;border-top:1px solid rgba(255,255,255,.2);color:#eaffea}
.side-contact b{display:block;color:#fff;font-size:.95rem;margin-bottom:4px}
.side-contact a{color:#fff}

/* ---------- main ---------- */
.main{background:var(--paper)}
.banner{background:#fff;border-bottom:4px solid var(--green)}
.banner img{width:100%;max-height:200px;object-fit:contain;background:#fff}
.titlebar{background:var(--ink);color:#fff;padding:14px 26px}
.titlebar h1{font-size:1.7rem;font-weight:400;font-style:italic}
.content{padding:26px 30px 48px}
.content h2{color:var(--red);font-size:1.5rem;margin:26px 0 12px}
.content h2:first-child{margin-top:0}
.content h3{color:var(--green-d);font-size:1.15rem;margin:20px 0 8px}
.content p{margin:0 0 14px;color:#2a2e28}
.content ul{margin:0 0 16px;padding-left:22px}
.content li{margin:6px 0}
.lead{font-size:1.08rem;color:#1c1f1a}
.hero-img{margin:6px 0 20px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:18px 0}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper-2)}
.gallery img{width:100%;height:140px;object-fit:cover}
.gallery figcaption{font-size:.78rem;padding:6px 8px;color:var(--muted)}

.highlight{background:var(--paper-2);border-left:4px solid var(--green);padding:16px 20px;margin:18px 0;border-radius:0 4px 4px 0}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:11px 24px;
  border-radius:4px;font-weight:bold;margin-top:6px}
.btn:hover{background:var(--green-d)}

/* contact form (visual only; posts nowhere without a backend) */
.form{max-width:520px;margin-top:16px}
.form label{display:block;font-size:.9rem;margin:12px 0 4px;font-weight:bold}
.form input,.form textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font-family:inherit;font-size:1rem}
.form .req{color:var(--red)}

.foot{background:var(--ink);color:#cfd6cd;padding:20px 30px;font-size:.85rem}
.foot a{color:#fff}

/* ---------- responsive: sidebar collapses to top ---------- */
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:relative}
  .side-logo{text-align:center}
  .side-logo img{max-width:280px;margin:0 auto}
  .side nav{display:flex;flex-wrap:wrap;padding:6px}
  .side nav a{flex:1 1 auto;text-align:center;border-bottom:0;padding:12px 10px;min-height:44px}
  .side-contact{text-align:center}
  .content{padding:20px 18px 40px}
  .titlebar h1{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}