/* cocoguanacaste.com — welcoming coastal look: ocean blue, warm sand, tropical green on a light base (brief + NM). Loaded ONLY by cocoguanacaste
   (siteKit.stylesheets); overrides the shared template style.css for this site. Every text/background pair is >= 4.5:1 (checked headless at 1280 + 375). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap');
:root{--pn-ocean:#0B5F8A;--pn-ocean-dk:#084A6C;--pn-deep:#0C2D3D;--pn-ink:#13303C;--pn-text:#34505B;--pn-green:#1D6646;--pn-green-dk:#14513A;--pn-green-lt:#D6EADD;--pn-sand:#EBD3A8;--pn-sand-lt:#F7EDDA;--pn-paper:#FFFBF4;--pn-white:#FFFFFF}
body{background:var(--pn-paper);color:var(--pn-ink)}
p{color:var(--pn-text)}
h1,h2,h3{font-family:Outfit,'Segoe UI',Arial,sans-serif;letter-spacing:-.01em;color:var(--pn-ink)}
h1{font-weight:700}h2{font-weight:600}h3{font-weight:600}
small{color:var(--pn-green);letter-spacing:.14em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #E0A23B;outline-offset:2px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--pn-ink);color:var(--pn-white);padding:10px 14px;border-radius:6px}
/* header */
header{border-bottom:4px solid var(--pn-sand)}
.brand{color:var(--pn-ocean-dk);letter-spacing:-.4px}
header nav a{color:var(--pn-ink)}
header nav a:hover{color:var(--pn-ocean)}
.menu{color:var(--pn-ink);border-color:#9DB0B8}
/* nav dropdowns (SEO nav: Beaches & Areas, Plan Your Trip); render only when a child page is built */
header nav{align-items:center}
.pn-dd{position:relative}
.pn-dd summary{list-style:none;cursor:pointer;color:var(--pn-ink)}
.pn-dd summary::-webkit-details-marker{display:none}
.pn-dd summary::after{content:" \25BE";color:var(--pn-ocean-dk)}
.pn-dd summary:hover{color:var(--pn-ocean)}
.pn-dd-menu{position:absolute;top:calc(100% + 12px);left:-14px;z-index:30;min-width:220px;display:flex;flex-direction:column;gap:2px;background:var(--pn-white);border:1px solid #E3D6BC;border-radius:12px;box-shadow:0 12px 28px #0002;padding:8px}
.pn-dd-menu a{padding:9px 12px;border-radius:8px;white-space:nowrap}
.pn-dd-menu a:hover{background:var(--pn-sand-lt)}
/* buttons */
.button{background:var(--pn-ocean);color:var(--pn-white);border-radius:999px;padding:14px 24px;gap:12px;font-size:14px}
.button:hover{background:var(--pn-ocean-dk);filter:none}
.textlink{color:var(--pn-ocean-dk);border-bottom-color:var(--pn-ocean)}
a:hover.textlink{color:var(--pn-deep)}
/* hero */
.pn-hero{position:relative;margin:18px 20px 0;border-radius:18px;overflow:hidden;min-height:620px;display:flex;align-items:flex-end;background:var(--pn-deep)}
.pn-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-hero-copy{position:relative;margin:0 0 72px 6%;max-width:580px;background:var(--pn-green-dk);border-radius:16px;padding:36px 38px 38px;box-shadow:0 18px 40px #0003}
.pn-hero-copy small{color:var(--pn-sand);margin-bottom:14px}
.pn-hero-copy h1{color:var(--pn-white);font-size:clamp(40px,5vw,66px);line-height:1.05}
.pn-hero-copy p{color:#F3EEE4;font-size:17px;margin:18px 0 0}
.pn-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pn-hero .button{background:var(--pn-sand);color:var(--pn-deep)}
.pn-hero .button:hover{background:#F4E8D2}
.pn-hero .button.pn-ghost{background:transparent;color:var(--pn-white);border:2px solid var(--pn-sand)}
.pn-hero-credit{position:absolute;right:16px;bottom:14px;margin:0;max-width:calc(100% - 32px);background:var(--pn-deep);color:#F3EEE4;font-size:12px;line-height:1.5;padding:6px 12px;border-radius:999px}
.pn-hero-credit a{color:var(--pn-sand);text-decoration:underline;text-underline-offset:2px}
/* sections */
.pn-section{padding:72px 0}
.pn-tint{background:var(--pn-sand-lt);border-radius:18px;padding:56px 48px;margin-top:24px}
.pn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}
.pn-head h2{font-size:clamp(30px,3.2vw,44px)}
.pn-head p{max-width:640px;margin:12px 0 0}
.pn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.pn-card{display:flex;flex-direction:column;background:var(--pn-white);border:1px solid #E3D6BC;border-radius:14px;overflow:hidden;color:var(--pn-ink)}
.pn-card:hover{border-color:var(--pn-ocean)}
.pn-card-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.pn-card-body h3{font-size:22px}
.pn-card-more{color:var(--pn-ocean-dk);font-weight:700;margin-top:auto;font-size:14px}
.pn-offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.pn-offer{background:var(--pn-white);border:1px solid #E3D6BC;border-radius:14px;padding:22px}
.pn-book{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 12px 8px 0}
.pn-partner-label{font-size:12px;font-weight:600;color:var(--pn-green-dk);background:var(--pn-green-lt);border-radius:999px;padding:3px 10px}
/* content-pack blocks */
.pn-section-copy{max-width:760px}
.pn-section-copy p{font-size:17px;line-height:1.7;margin:0}
.pn-section-copy a,.pn-card-static a{color:var(--pn-ocean-dk);text-decoration:underline;text-underline-offset:2px}
.pn-card-static p{margin:0;line-height:1.6}
.pn-anchor{display:block;position:relative;top:-16px;visibility:hidden}
.pn-prose code{font-size:.92em;background:var(--pn-sand-lt);color:var(--pn-ink);padding:1px 6px;border-radius:5px}
.pn-partners{margin:26px 0 30px;padding:22px;background:var(--pn-sand-lt);border:1px solid #E3D6BC;border-radius:16px}
.pn-partners h2{margin:0 0 14px}
.pn-partners .pn-group{font-size:18px;margin:6px 0 12px}
.pn-partners .pn-group:not(:first-child){margin-top:20px}
.pn-partners .pn-offers{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.pn-partners .pn-offer{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.pn-partners .pn-offer h3{font-size:18px;line-height:1.3;margin:0}
.pn-partners .pn-book{margin:0}
.pn-gear{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pn-gear li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;background:var(--pn-white);border:1px solid #E3D6BC;border-radius:12px;padding:12px 16px;margin:0}
.pn-gear-name{font-weight:600;color:var(--pn-ink)}
.pn-gear .pn-book{margin:0}
.pn-prose .pn-partners a.pn-partner.textlink{text-decoration:none}
.pn-official{margin:4px 0 26px}
/* photography */
.pn-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.pn-figure{margin:0}
.pn-figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--pn-sand-lt)}
.pn-figure figcaption{font-size:13px;line-height:1.5;color:var(--pn-text);margin-top:10px}
.pn-figure figcaption span{display:block;color:var(--pn-ink);font-weight:600}
.pn-credit{color:var(--pn-ocean-dk);text-decoration:underline;text-underline-offset:2px}
.pn-pagehero img{aspect-ratio:16/9}
/* inner pages */
.pn-crumbs{padding-top:22px;font-size:13px}
.pn-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;color:var(--pn-text)}
.pn-crumbs li+li::before{content:"/";margin-right:6px;color:var(--pn-text)}
.pn-crumbs a{color:var(--pn-ocean-dk);text-decoration:underline;text-underline-offset:2px}
.intro small{color:var(--pn-green)}
.pn-reviewed{font-size:13px;color:var(--pn-text);margin-top:-8px}
.prose a:not(.textlink),.pn-prose a:not(.textlink){color:var(--pn-ocean-dk);text-decoration:underline;text-underline-offset:2px}
.prose li{color:var(--pn-text);line-height:1.7;margin:6px 0}
.pn-prose h2{font-size:clamp(26px,2.6vw,34px);margin:34px 0 10px}
.pn-bookbox,.pn-related{padding:10px 0 40px}
.pn-related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px}
/* contact form */
.pn-contact{max-width:680px;padding-bottom:70px}
.pn-form .field{color:var(--pn-ink);font-weight:600;font-size:14px}
.pn-form .field input,.pn-form .field select,.pn-form .field textarea{display:block;width:100%;margin-top:6px;padding:.75rem .9rem;border-radius:10px;border:1px solid #8FA3AB;font:inherit;font-weight:400;background:var(--pn-white);color:var(--pn-ink)}
.pn-form .muted{color:var(--pn-text);font-size:13px}
.inquiry-form .inquiry-status{color:var(--pn-ink)}
/* footer */
footer{background:var(--pn-deep);color:#F3EEE4}
footer .brand{color:var(--pn-white)}
.footergrid p{color:#DCE3E5}
footer small{color:var(--pn-sand)}
.footergrid>div>a:not(.brand){color:#F3EEE4}
.footergrid>div>a:not(.brand):hover{color:var(--pn-sand)}
.fine{color:#DCE3E5;border-top-color:#3A5866}
@media(max-width:900px){.pn-photos{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
 .pn-hero{margin:10px 10px 0;min-height:0;display:block;border-radius:14px}
 .pn-hero-img{position:relative;height:300px}
 .pn-hero-copy{margin:0;border-radius:0;padding:28px 22px 30px;box-shadow:none;max-width:none}
 .pn-hero-copy h1{font-size:40px}
 .pn-hero-credit{position:static;display:block;max-width:none;border-radius:0;padding:10px 22px 14px}
 .pn-section{padding:48px 0}
 .pn-tint{padding:36px 20px}
 .pn-head{display:block}
 .pn-photos{grid-template-columns:1fr}
 header nav{background:var(--pn-paper)}
 .pn-dd-menu{position:static;box-shadow:none;border:0;padding:4px 0 4px 12px;min-width:0;background:transparent}
 .pn-dd-menu a{white-space:normal;padding:7px 4px}
}
.pn-official .textlink,.pn-related .textlink{white-space:normal;margin:0}
.pn-prose a.button,.pn-prose a.button:hover{color:var(--pn-white);text-decoration:none}

/* cocoguanacaste content blocks: partner buttons inline in Content's list items / paragraphs, Agoda stay cards, reviewed line */
.pn-prose li .pn-book,.pn-prose p .pn-book{display:flex;margin:10px 0 4px}
.pn-prose li{margin:10px 0}
.pn-prose ol li,.pn-prose ul li{color:var(--pn-text)}
.pn-prose em{font-style:italic}
.pn-stay{background:var(--pn-white);border:1px solid #E3D6BC;border-left:5px solid var(--pn-green);border-radius:14px;padding:20px 22px;margin:18px 0 26px}
.pn-stay h3{font-size:20px;margin:0 0 6px}
.pn-stay .pn-tags{font-size:13px;font-weight:600;color:var(--pn-green-dk);margin:0 0 10px;letter-spacing:.02em}
.pn-stay p{margin:0 0 6px}
.pn-stay .pn-book{display:flex;margin:12px 0 0}
.pn-gear-wrap{margin:18px 0 26px}
/* long single-word headings (site name "CocoGuanacaste.com") must wrap on narrow screens (375 px overflow fix) */
.intro h1,.pn-hero-copy h1{overflow-wrap:anywhere}
@media(max-width:720px){.intro h1{font-size:clamp(32px,9vw,44px)}}