/*
Theme Name: Barbarian Diving
Theme URI: https://barbariandiving.com
Author: Barbarian Diving
Description: Custom one-page theme for Barbarian Diving — small-group scuba dive center in Tenerife. Navy + teal brand, bold display type, customer-service forward.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: barbarian-diving
*/

/* ---- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#F5F1E8;
  color:#0F2268;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:#00B6BD;color:#0F2268}

/* ---- responsive: collapse the two-column grids on small screens ---- */
@media (max-width:900px){
  .bd-hero-grid,
  .bd-why-grid,
  .bd-pro-grid{grid-template-columns:1fr !important}
  .bd-offerings-grid{grid-template-columns:1fr !important}
  .bd-sites-grid{grid-template-columns:1fr 1fr !important}
  .bd-reviews-grid{grid-template-columns:1fr !important}
  .bd-price-rows{grid-template-columns:1fr !important}
  .bd-footer-grid{grid-template-columns:1fr 1fr !important}
  .bd-detail-grid{grid-template-columns:1fr 1fr !important}
  .bd-two-col-grid{grid-template-columns:1fr !important}
  .bd-story-row{grid-template-columns:1fr !important}
  .bd-form-grid{grid-template-columns:1fr !important}
  .bd-lang-mobile{display:flex !important;order:1}
  .bd-lang-desktop-only{display:none !important}
}

/* ---- extra-small phones: tighten the 2x2 stat grid to a single column ---- */
@media (max-width:420px){
  .bd-detail-grid{grid-template-columns:1fr !important}
}

/* ---- mobile nav (button + tiny inline JS toggle, no hidden-checkbox trick) ---- */
.bd-nav-burger{
  display:none;background:none;border:none;padding:0;margin:0;
  font-family:inherit;-webkit-appearance:none;appearance:none;
}
@media (max-width:900px){
  .bd-header-row{flex-wrap:wrap}
  .bd-nav-burger{
    display:flex !important;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;font-size:22px;line-height:1;color:#0F2268;cursor:pointer;
  }
  .bd-nav-links{
    display:flex !important;flex-direction:column;align-items:stretch;gap:2px;
    order:99;flex-basis:100%;width:100%;
    max-height:0;overflow:hidden;opacity:0;
    background:#F5F1E8;padding:0;
    transition:max-height .25s ease,opacity .2s ease,padding .25s ease;
  }
  .bd-nav-links a{padding:13px 4px !important;border-bottom:1px solid rgba(15,34,104,.08)}
  .bd-nav-links.bd-nav-open{max-height:80vh;opacity:1;padding:6px 0 16px;overflow-y:auto}
  /* Flatten hover-dropdowns into always-open inline lists inside the mobile panel,
     since :hover/:focus-within don't work reliably on touch. */
  .bd-nav-links .bd-dropdown{flex-direction:column;align-items:stretch}
  .bd-nav-links .bd-dropdown-menu{
    position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;
    pointer-events:auto !important;box-shadow:none;border:none;padding:2px 0 8px 14px;min-width:0;
  }
  .bd-nav-links .bd-dropdown-caret{display:none}
}

/* ---- courses nav dropdown ---- */
.bd-dropdown{position:relative;display:flex;align-items:center}
.bd-dropdown-menu{position:absolute;top:100%;left:0;transform:translateY(6px);min-width:250px;background:#fff;border:1px solid rgba(15,34,104,.1);border-radius:16px;padding:10px;box-shadow:0 1px 3px rgba(15,34,104,.05),0 12px 28px -16px rgba(15,34,104,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60}
.bd-dropdown:hover .bd-dropdown-menu,.bd-dropdown:focus-within .bd-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.bd-dropdown-menu a{display:block;padding:9px 14px;border-radius:8px;font-weight:600;font-size:14px;color:rgba(15,34,104,.8) !important}
.bd-dropdown-menu a:hover{background:#F5F1E8;color:#00A0A6 !important}
.bd-dropdown-caret{display:inline-block;margin-left:5px;font-size:10px;transform:translateY(-1px)}
.bd-mega-heading{font-weight:800;font-size:10.5px;letter-spacing:.1em;color:#00A0A6;text-transform:uppercase;margin:14px 0 4px;padding:0 14px}
.bd-mega-heading:first-child{margin-top:2px}

/* ---- blog pagination ---- */
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border-radius:100px;font-weight:700;font-size:14px;color:#0F2268;background:#fff;border:1px solid rgba(15,34,104,.15);text-decoration:none}
.page-numbers.current{background:#0F2268;color:#fff;border-color:#0F2268}
.page-numbers.dots{border:none;background:none}

/* ---- article typography (single blog post) ---- */
.bd-article{font-size:17px;line-height:1.75;color:rgba(15,34,104,.82)}
.bd-article p{margin:0 0 22px}
.bd-article h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(24px,3vw,34px);text-transform:uppercase;line-height:1.1;color:#0F2268;margin:40px 0 16px}
.bd-article h3{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(20px,2.4vw,26px);text-transform:uppercase;line-height:1.15;color:#0F2268;margin:32px 0 14px}
.bd-article a{color:#00A0A6;text-decoration:underline}
.bd-article ul,.bd-article ol{margin:0 0 22px;padding-left:1.4em}
.bd-article li{margin-bottom:8px}
.bd-article img{border-radius:16px;margin:12px 0 28px}
.bd-article blockquote{margin:28px 0;padding:20px 26px;background:#F5F1E8;border-left:4px solid #00B6BD;border-radius:0 14px 14px 0;font-style:italic;color:#0F2268}