/* ==========================================================================
   Chris & Bethany Bassets - design layer
   Loads after blb-puppies.css. Keeps the brand palette exactly; changes the
   typography to the platform system face, makes the chrome a translucent
   material, and gives every control immediate press feedback.
   ========================================================================== */

:root{
  --blb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --blb-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  --blb-cream:#FDF7F3;
  --blb-brown:#47322F;
  --blb-terra:#a36741;
  --blb-terra-dk:#8a5636;
  --blb-dark:#0d141a;
  --blb-muted:#6E625C;
  --blb-line:#EADFD6;

  --blb-r-sm:10px;
  --blb-r-md:16px;
  --blb-r-lg:22px;

  --blb-header-h:72px;

  /* Critically damped by default. Bounce is reserved for momentum. */
  --blb-ease:cubic-bezier(.32,.72,0,1);
  --blb-fast:180ms;
  --blb-med:320ms;

  --blb-shadow-sm:0 1px 2px rgba(71,50,47,.05), 0 4px 12px rgba(71,50,47,.06);
  --blb-shadow-md:0 2px 6px rgba(71,50,47,.06), 0 16px 40px rgba(71,50,47,.10);
}

/* --------------------------------------------------------------------------
   1. Type. One family, sized-specific tracking, leading that runs inversely
      to size. Font-family is forced because the Elementor kit sets Lato on
      the pages it owns.
   -------------------------------------------------------------------------- */

body,
button, input, select, textarea,
.elementor-kit-5,
.wp-site-blocks,
.blb, .blb *{
  font-family: var(--blb-font) !important;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.elementor-heading-title,
.blb h1, .blb h2, .blb h3,
.wp-block-site-title, .wp-block-site-title a,
.wp-block-post-title{
  font-family: var(--blb-font-display) !important;
  font-optical-sizing:auto;
  text-wrap:balance;
}

/* Elementor resolves widget type through its own global custom properties.
   Redefining those reaches every widget that uses a kit preset without
   touching the icon fonts, which a wildcard override would break. */
.elementor-kit-5,
.elementor-widget,
.elementor-element{
  --e-global-typography-primary-font-family: var(--blb-font-display);
  --e-global-typography-secondary-font-family: var(--blb-font-display);
  --e-global-typography-text-font-family: var(--blb-font);
  --e-global-typography-accent-font-family: var(--blb-font);
  --e-global-typography-5535e8e-font-family: var(--blb-font-display);
  --e-global-typography-c83476d-font-family: var(--blb-font-display);
  --e-global-typography-ff8f921-font-family: var(--blb-font-display);
  --e-global-typography-887fca2-font-family: var(--blb-font);
  --e-global-typography-2142591-font-family: var(--blb-font);
  --e-global-typography-6e52843-font-family: var(--blb-font);
}

/* Widgets that set their own family rather than a global preset. Listed
   explicitly so icon glyph fonts are never caught by the override. */
.elementor-button,
.elementor-widget-button a,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-icon-list-text,
.elementor-image-box-content,
.elementor-image-box-title,
.elementor-image-box-description,
.elementor-testimonial-content,
.elementor-testimonial-name,
.elementor-tab-title,
.elementor-tab-content,
.elementor-accordion-title,
.elementor-toggle-title,
.elementor-field-group label,
.elementor-field-group .elementor-field,
.woocommerce-loop-product__title,
.woocommerce .button,
.wp-block-button__link{
  font-family: var(--blb-font) !important;
}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Display sizes take the most negative tracking; body sits at zero. */
h1, .wp-block-post-title, .elementor-widget-heading h1.elementor-heading-title{
  letter-spacing:-.022em;
  line-height:1.06;
  font-weight:700;
}
h2, .elementor-widget-heading h2.elementor-heading-title{
  letter-spacing:-.017em;
  line-height:1.14;
  font-weight:700;
}
h3, h4, .elementor-widget-heading h3.elementor-heading-title{
  letter-spacing:-.011em;
  line-height:1.22;
  font-weight:600;
}
p, li, dd, dt, blockquote, figcaption, label, input, textarea, select{
  letter-spacing:0;
}

/* Small uppercase labels are the one place that wants positive tracking. */
.blb-eyebrow, .blb-tag, .blb-doc__indexhead{
  letter-spacing:.06em;
}

/* --------------------------------------------------------------------------
   2. Chrome. The header becomes a translucent material that content passes
      under, with a scroll edge fade instead of a hard rule.
   -------------------------------------------------------------------------- */

html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; }

:where(h1,h2,h3,[id]){ scroll-margin-top: calc(var(--blb-header-h) + 20px); }

.site-header.wp-block-template-part{
  position:sticky;
  top:0;
  z-index:80;
  isolation:isolate;
}

/* The blur lives on a pseudo-element, never on the header element itself.
   backdrop-filter makes an element a containing block for fixed-position
   descendants, and the mobile menu overlay is fixed: putting the filter on
   the header traps the overlay inside the header's own box, so it opens as a
   thin band with every item past the first clipped away. */
.site-header .hostinger-ai-menu{
  position:relative;
  background-color:transparent !important;
  transition:box-shadow var(--blb-med) var(--blb-ease);
}
.site-header .hostinger-ai-menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(253,247,243,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  transition:background-color var(--blb-med) var(--blb-ease);
}

/* The fade only appears once content is actually passing underneath. */
.site-header .hostinger-ai-menu::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:24px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(to bottom, rgba(253,247,243,.55), rgba(253,247,243,0));
  transition:opacity var(--blb-med) var(--blb-ease);
}
.blb-scrolled .site-header .hostinger-ai-menu{
  box-shadow:0 1px 0 rgba(71,50,47,.06);
}
.blb-scrolled .site-header .hostinger-ai-menu::before{
  background:rgba(253,247,243,.82);
}
.blb-scrolled .site-header .hostinger-ai-menu::after{ opacity:1; }

.site-header .hostinger-ai-menu-wrapper{
  padding-top:14px !important;
  padding-bottom:14px !important;
}

.wp-block-site-title a{
  letter-spacing:-.02em;
  font-weight:700;
}

/* Navigation: one line, comfortable targets, vibrant enough to read on glass. */
.hostinger-ai-site-navigation .wp-block-navigation-item__content{
  font-weight:500;
  letter-spacing:-.006em;
  padding:10px 2px;
  transition:color var(--blb-fast) var(--blb-ease);
}
.hostinger-ai-site-navigation .wp-block-navigation-item__content:hover{
  color:var(--blb-terra);
}
.hostinger-ai-site-navigation .wp-block-navigation__submenu-container{
  background-color:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--blb-line) !important;
  border-radius:var(--blb-r-md);
  box-shadow:var(--blb-shadow-md);
  padding:6px;
  overflow:hidden;
}
.hostinger-ai-site-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:10px 14px;
  border-radius:var(--blb-r-sm);
  min-height:44px;
  display:flex;
  align-items:center;
}
.hostinger-ai-site-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:var(--blb-cream);
}

/* The mobile overlay is a material too, not a flat sheet. */
.wp-block-navigation__responsive-container.is-menu-open{
  position:fixed !important;
  inset:0 !important;
  z-index:1000;
  overflow-y:auto;
  overscroll-behavior:contain;
  background-color:rgba(253,247,243,.97) !important;
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  padding:24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  min-height:46px;
  display:flex;
  align-items:center;
  font-size:1.1rem;
  padding-top:4px;
  padding-bottom:4px;
}

/* Eleven destinations have to land in one view on a phone, so the submenu
   children sit tighter than the top level rather than pushing the last item
   below the fold. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  min-height:42px;
  font-size:1rem;
  padding-top:2px;
  padding-bottom:2px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:2px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  gap:0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:8px;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Inside the mobile overlay the Adoption group stays open. Core ships a
   toggle that can collapse it, which would hide four pages behind an extra
   tap; the whole point of the overlay is that everything is listed. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.hostinger-ai-footer-navigation .wp-block-navigation__submenu-container{
  display:flex !important;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  width:auto !important;
  min-width:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  transform:none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.hostinger-ai-footer-navigation .wp-block-navigation__submenu-icon{
  display:none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding-left:14px;
  border-left:1px solid var(--blb-line);
  border-radius:0;
}

/* The footer menu never collapses to a burger: at phone widths that left the
   footer's Menu column showing an icon and no links at all. */
.hostinger-ai-footer-navigation .wp-block-navigation__responsive-container-open{ display:none !important; }
.hostinger-ai-footer-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.28);
}
.hostinger-ai-footer-navigation .wp-block-navigation-item__content{
  min-height:44px;
  display:flex;
  align-items:center;
}

/* --------------------------------------------------------------------------
   3. Response. Feedback lands on press, not on release.
   -------------------------------------------------------------------------- */

.blb-btn,
.wp-block-button__link,
.elementor-button,
button, [type="submit"]{
  min-height:44px;
  transition:transform var(--blb-fast) var(--blb-ease),
             background-color var(--blb-fast) var(--blb-ease),
             border-color var(--blb-fast) var(--blb-ease),
             color var(--blb-fast) var(--blb-ease),
             box-shadow var(--blb-fast) var(--blb-ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.blb-btn:active,
.wp-block-button__link:active,
.elementor-button:active,
button:active, [type="submit"]:active{
  transform:scale(.97);
  transition-duration:90ms;
}

.blb-btn:hover{ transform:translateY(-1px); }
.blb-btn:active{ transform:scale(.97) translateY(0); }

.blb-card{
  transition:transform var(--blb-med) var(--blb-ease),
             box-shadow var(--blb-med) var(--blb-ease),
             border-color var(--blb-med) var(--blb-ease);
}
.blb-card:active{ transform:scale(.995); }

/* One focus ring, visible on every ground. */
a:focus-visible,
button:focus-visible,
[type="submit"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-navigation-item__content:focus-visible{
  outline:2px solid var(--blb-terra);
  outline-offset:3px;
  border-radius:6px;
}

/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="url"], input[type="search"], textarea, select{
  font-size:16px !important; /* stops iOS zooming the page on focus */
  border-radius:var(--blb-r-sm) !important;
  border:1px solid var(--blb-line) !important;
  background:#fff;
  padding:12px 14px;
  min-height:44px;
  transition:border-color var(--blb-fast) var(--blb-ease),
             box-shadow var(--blb-fast) var(--blb-ease);
}
input:focus, textarea:focus, select:focus{
  border-color:var(--blb-terra) !important;
  box-shadow:0 0 0 4px rgba(163,103,65,.12);
}
::placeholder{ color:var(--blb-muted); opacity:1; }

/* --------------------------------------------------------------------------
   5. Touch targets. On a touch device every control clears 44px, using
      negative margin so the tap area grows without moving the layout.
   -------------------------------------------------------------------------- */

@media (pointer: coarse){
  .blb-card__name a,
  .blb-cinfo__item p a,
  .blb-crumbs a,
  .blb-doccta__mail a,
  .blb-doc__prose p > a{
    display:inline-block;
    padding-block:11px;
    margin-block:-11px;
  }

  .blb-doc__index a{
    min-height:44px;
    align-items:center;
  }

  .blb-cinfo__links a,
  .wp-block-social-link a,
  .elementor-social-icon{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .blb-thumb{ min-width:56px; min-height:56px; }
}