/* Tropical Bay Rentals: the shared header (pages without their own menu) and the shared footer (every page).
   The footer is drawn exactly as on the homepage, whatever the page's own stylesheet says about footers,
   so it is never near-invisible or unstyled again. Selectors are scoped (footer.site-footer, nav.site-nav)
   and reset the properties the older page stylesheets set on bare footer / nav / .footer-links / p / h2. */

/* ===================== FOOTER (homepage colours and layout) ===================== */
footer.site-footer{background:#011f4b;color:rgba(255,255,255,0.6);font-size:0.9rem;font-family:'Quicksand',sans-serif;line-height:1.6;
  padding:0;margin:0;border:0;text-align:left;display:block;position:relative}
footer.site-footer *{box-sizing:border-box}
footer.site-footer a{text-decoration:none;margin:0}
footer.site-footer .footer-main{max-width:1200px;margin:0 auto;padding:4rem 2rem 3rem;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem;text-align:left}
footer.site-footer .footer-brand{font-family:inherit;font-size:inherit;color:inherit}
footer.site-footer .footer-logo{font-family:'Lobster',cursive;font-size:1.4rem;color:white;margin:0 0 0.4rem;font-weight:400;line-height:1.4}
footer.site-footer .footer-tagline{font-size:0.85rem;color:rgba(255,255,255,0.5);font-weight:600;line-height:1.5;margin:0 0 1.5rem;padding:0}
footer.site-footer .footer-contact-item{display:flex;align-items:center;gap:0.6rem;margin:0 0 0.6rem;font-weight:600;font-size:0.88rem}
footer.site-footer .footer-contact-item a{color:rgba(255,255,255,0.75);transition:color 0.2s;padding-block:14px;margin-block:-14px}
footer.site-footer .footer-contact-item a:hover{color:#ffe066}
footer.site-footer .footer-contact-icon{font-size:1rem;width:20px;text-align:center}
footer.site-footer .footer-col h4{font-family:inherit;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,0.4);margin:0 0 1.25rem;padding:0;line-height:1.6}
footer.site-footer .footer-links{list-style:none;display:flex;flex-direction:column;gap:0.6rem;margin:0;padding:0;justify-content:flex-start;flex-wrap:nowrap}
footer.site-footer .footer-links li{margin:0;padding:0;list-style:none}
footer.site-footer .footer-links a{color:rgba(255,255,255,0.65);font-weight:600;font-size:0.88rem;transition:color 0.2s}
footer.site-footer .footer-links a:hover{color:#ffe066}
footer.site-footer .footer-col a[aria-label]{transition:color 0.2s,transform 0.2s}
footer.site-footer .footer-col a[aria-label]:hover{color:#ffe066;transform:scale(1.2)}
footer.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:1.5rem 2rem;margin:0;text-align:center;font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.35)}
footer.site-footer .footer-bottom span{color:rgba(255,224,102,0.7)}
/* "Find us online": line it up with the columns above instead of hugging the left edge */
footer.site-footer .socials{max-width:1200px;margin:0 auto;padding:22px 2rem 1.5rem;color:rgba(255,255,255,0.6);border-top:1px solid rgba(255,255,255,0.08)}
footer.site-footer .socials-title{font-family:inherit;color:inherit;line-height:1.4}
@media(max-width:768px){
  footer.site-footer .footer-main{grid-template-columns:1fr;padding:2.25rem 1.25rem 1.25rem;gap:1.75rem}
  footer.site-footer .footer-bottom{padding:1.1rem 1.25rem}
  footer.site-footer .socials{padding:20px 1.25rem 1.25rem}
  footer.site-footer .footer-col div[style*="gap:1.2rem"]{gap:0.85rem!important;flex-wrap:wrap}
}

/* ===================== SHARED HEADER (privacy, terms, blog posts) — the main-site menu bar ===================== */
nav.site-nav{position:fixed;top:0;left:0;right:0;width:100%;height:auto;padding:0;margin:0;display:block;z-index:200;
  background:rgba(0,107,166,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid rgba(255,255,255,0.15);
  font-family:'Quicksand',sans-serif;line-height:1.5;transform:none}
nav.site-nav *{box-sizing:border-box}
nav.site-nav a{text-decoration:none}
nav.site-nav .sn-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 2rem;gap:1.5rem}
nav.site-nav .sn-logo{font-family:'Lobster',cursive;font-size:1.5rem;color:white;display:flex;align-items:center;gap:0.5rem;white-space:nowrap;flex-shrink:0;margin:0;font-weight:400}
nav.site-nav .sn-links{display:flex;gap:1.15rem;flex-wrap:nowrap;flex-shrink:1}
nav.site-nav .sn-links a{color:rgba(255,255,255,0.85);font-weight:600;font-size:0.85rem;transition:color 0.2s;white-space:nowrap}
nav.site-nav .sn-links a:hover{color:#ffe066}
nav.site-nav .sn-ctas{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
nav.site-nav .sn-cta{display:inline-flex;align-items:center;min-height:44px;background:#dc3a00;color:white;padding:0.6rem 1.5rem;border-radius:50px;font-weight:700;font-size:0.9rem;box-shadow:0 4px 15px rgba(255,90,31,0.4);white-space:nowrap;flex-shrink:0}
nav.site-nav .sn-cta:hover{background:#c93500}
nav.site-nav .site-nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0.5rem;background:none;border:none;flex-shrink:0;min-width:44px;min-height:44px;-webkit-appearance:none;appearance:none;margin:0 0 0 0.25rem}
nav.site-nav .site-nav-toggle:hover{background:rgba(255,255,255,0.15);border-radius:50%}
nav.site-nav .site-nav-toggle span{display:block;width:24px;height:2px;background:white;border-radius:2px}
.site-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(1,42,99,0.98);backdrop-filter:blur(10px);z-index:199;padding:1.5rem;flex-direction:column;gap:0.75rem;border-bottom:2px solid rgba(255,255,255,0.15);font-family:'Quicksand',sans-serif}
.site-menu.open{display:flex}
.site-menu a{color:rgba(255,255,255,0.9);font-weight:600;font-size:1.05rem;padding:0.6rem 0;border-bottom:1px solid rgba(255,255,255,0.1);text-decoration:none}
.site-menu a:last-child{border:none}
@media(max-width:1220px){
  nav.site-nav .sn-links,nav.site-nav .sn-ctas{display:none}
  nav.site-nav .site-nav-toggle{display:flex}
}
@media(max-width:480px){nav.site-nav .sn-inner{padding:0 0.75rem}nav.site-nav .sn-logo{font-size:1.15rem}}
body.has-site-nav main{padding-top:70px}

/* ===================== GUIDE PAGES ===================== */
/* The "more guides" strip after the orange call-to-action: a plain band, not a second sticky menu, with
   links in the homepage footer's link colour so they can be read (they were #555 on near-black). */
nav.more-guides{position:static}
nav.more-guides .footer-links a{color:rgba(255,255,255,0.65);transition:color 0.2s}
nav.more-guides .footer-links a:hover{color:#ffe066}
/* Phone pills: at least 44px tall to tap (they were 34-39px). */
a.nav-cta[href^="tel:"],.hero-btns a[href^="tel:"]{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Plain-text sections written in Markdown at the end of a page (town pages, rentals, jet skis): give them the
   page's normal reading width and side margins instead of running edge to edge. Colours stay the page's own. */
main > :is(h2,h3,p,ul,ol):not([class]){box-sizing:border-box;max-width:1000px;margin-left:auto;margin-right:auto;padding-left:2rem;padding-right:2rem}
main > h2:not([class]){margin-top:2.75rem;margin-bottom:0.75rem}
main > h3:not([class]){margin-top:1.75rem;margin-bottom:0.5rem}
main > :is(p,ul,ol):not([class]){margin-bottom:1rem}
main > :is(ul,ol):not([class]){padding-left:calc(2rem + 1.25em)}
main > :is(ul,ol):not([class]) li{margin-bottom:0.3rem}
main:has(> h2:not([class]))::after{content:"";display:block;height:2.5rem}
@media(max-width:768px){
  main > :is(h2,h3,p,ul,ol):not([class]){padding-left:1.25rem;padding-right:1.25rem}
  main > :is(ul,ol):not([class]){padding-left:calc(1.25rem + 1.25em)}
}
nav.site-nav .sn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;transition:transform 0.2s,box-shadow 0.2s}
nav.site-nav .sn-icon:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.25)}

/* ===================== HEADER SHOW/HIDE (every page; owner request 2026-10-31) ===================== */
/* The top menu bar (main-site "Main" bars, the shared bar and the guide pages' "Guide menu" bar) is invisible at the
   top of the page and slides down + fades in once the visitor has scrolled ~100px (html.hdr-on, set by the small
   script in Base.astro). Look, colours and layout of each bar are unchanged; only transform/opacity animate.
   It shows at once when a keyboard user tabs into it, and stays while its phone menu is open. Animations always play. */
html.hdr-js :is(nav[aria-label="Main"],nav[aria-label="Guide menu"]){opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}
html.hdr-js.hdr-on :is(nav[aria-label="Main"],nav[aria-label="Guide menu"]),
html.hdr-js :is(nav[aria-label="Main"],nav[aria-label="Guide menu"]):focus-within,
html.hdr-js:has(.mobile-menu.open,.site-menu.open) :is(nav[aria-label="Main"],nav[aria-label="Guide menu"]){opacity:1;transform:none;pointer-events:auto}
/* Guide pages: the bar was sticky (in the flow); lay it over the page like the others so hiding it never moves
   anything. The hero's top padding grows by the bar's height (script after <main> in Base.astro). */
html.hdr-js main nav[aria-label="Guide menu"]{position:fixed;top:0;left:0;right:0}