/*
Theme Name:   Astra Child — Chill Lab
Theme URI:    https://chilllab.ie
Description:  Chill Lab — shades of blue, transparent-to-dark scroll header.
Author:       Douglas Ribeiro
Template:     astra
Version:      1.0.0
Text Domain:  astra-child-chilllab
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Lexend:wght@300;400;500;600;700;800&display=swap');

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --cl-bg:         #070E1C;
  --cl-navy:       #0D1B2E;
  --cl-mid:        #142035;
  --cl-slate:      #1E3050;
  --cl-blue:       #2563EB;
  --cl-blue-light: #3B82F6;
  --cl-sky:        #38BDF8;
  --cl-teal:       #4ECDC4;
  --cl-steel:      #7A9BBE;
  --cl-muted:      #A8C0D8;
  --cl-white:      #FFFFFF;
  --cl-off-white:  #EEF3FA;

  --cl-font-head:  'Lexend',  sans-serif;
  --cl-font-body:  'DM Sans', sans-serif;

  --cl-ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --cl-radius:  10px;
  --cl-radius-lg: 18px;
  --cl-shadow:  0 4px 32px rgba(7,14,28,0.4);
  --cl-shadow-lg: 0 12px 56px rgba(7,14,28,0.6);
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--cl-font-body);
  background: var(--cl-bg);
  color: var(--cl-muted);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--cl-font-head);
  color: var(--cl-white);
  line-height: 1.15;
  margin-top: 0;
  font-weight: 700;
}

a { color: var(--cl-sky); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cl-teal); }
img { max-width: 100%; }

/* ── TRANSPARENT → DARK HEADER ──────────────────────────────── */
/*  At top of page: fully transparent, logo/nav white           */
/*  After scrolling 80px: dark navy, teal border bottom         */

#masthead,
.site-header,
.main-header-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: background 0.35s var(--cl-ease),
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}

body.cl-scrolled #masthead,
body.cl-scrolled .site-header,
body.cl-scrolled .main-header-bar {
  background: rgba(7,14,28,0.96) !important;
  border-bottom-color: rgba(56,189,248,0.2) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px);
}

/* Add padding-top to body so content doesn't hide under fixed header */
body { padding-top: 0; }
body .site-content { margin-top: 0; }

.main-header-bar { padding: 10px 0 !important; min-height: 112px !important; }

/* Logo — square asset, width is set via Astra settings (100px desktop / 88px tablet / 80px mobile) */
.custom-logo, .site-logo img, .ast-site-logo img {
  height: auto !important;
  display: block !important;
}
/* Prevent the logo container from overflowing on small screens */
.ast-site-logo { line-height: 0; }

/* Site name as text logo fallback */
.site-title a,
.ast-site-title a {
  font-family: var(--cl-font-head) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--cl-white) !important;
  letter-spacing: -0.02em !important;
}

/* Nav links */
.main-navigation a,
.ast-builder-menu a,
.ast-nav-menu > .menu-item > .menu-link {
  font-family: var(--cl-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
  transition: color 0.2s !important;
}
.main-navigation a:hover,
.ast-nav-menu > .menu-item > .menu-link:hover {
  color: var(--cl-sky) !important;
}
.ast-nav-menu > .current-menu-item > .menu-link {
  color: var(--cl-sky) !important;
}

/* Book Now button in header */
.ast-header-custom-button,
.ast-custom-button {
  background: var(--cl-blue) !important;
  color: var(--cl-white) !important;
  border: none !important;
  border-radius: var(--cl-radius) !important;
  font-family: var(--cl-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  transition: all 0.2s !important;
}
.ast-header-custom-button:hover { background: var(--cl-blue-light) !important; }

/* ── FOOTER ──────────────────────────────────────────────────── */
#colophon, .site-footer, .footer-widget-area {
  background: var(--cl-bg) !important;
  border-top: 1px solid var(--cl-slate);
}
.ast-small-footer { background: rgba(0,0,0,0.3) !important; }
.site-footer a, .footer-widget-area a { color: var(--cl-sky) !important; }
.site-footer a:hover { color: var(--cl-teal) !important; }
.site-footer, .footer-widget-area p,
.ast-small-footer, .ast-footer-copyright { color: var(--cl-steel) !important; }
.footer-widget-area .widget-title {
  color: var(--cl-white) !important;
  font-family: var(--cl-font-head) !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
.footer-widget-area { padding: 64px 0 48px !important; }

/* ── GLOBAL BUTTON ───────────────────────────────────────────── */
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cl-blue);
  color: var(--cl-white) !important;
  font-family: var(--cl-font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--cl-radius);
  border: 2px solid var(--cl-blue);
  text-decoration: none;
  transition: all 0.22s var(--cl-ease);
  cursor: pointer;
  white-space: nowrap;
}
.cl-btn:hover {
  background: var(--cl-blue-light);
  border-color: var(--cl-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.4);
}
.cl-btn-ghost {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  color: var(--cl-white) !important;
}
.cl-btn-ghost:hover {
  border-color: var(--cl-sky) !important;
  color: var(--cl-sky) !important;
  box-shadow: none !important;
}
.cl-btn-sky {
  background: var(--cl-sky) !important;
  border-color: var(--cl-sky) !important;
  color: var(--cl-bg) !important;
}
.cl-btn-sky:hover {
  background: var(--cl-teal) !important;
  border-color: var(--cl-teal) !important;
}

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--cl-ease), transform 0.7s var(--cl-ease);
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px);  }
[data-reveal="scale"] { transform: scale(0.92);       }
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--cl-ease), transform 0.55s var(--cl-ease);
}
[data-stagger].is-visible > *:nth-child(1)  { opacity:1;transform:none;transition-delay:0ms;   }
[data-stagger].is-visible > *:nth-child(2)  { opacity:1;transform:none;transition-delay:90ms;  }
[data-stagger].is-visible > *:nth-child(3)  { opacity:1;transform:none;transition-delay:180ms; }
[data-stagger].is-visible > *:nth-child(4)  { opacity:1;transform:none;transition-delay:270ms; }
[data-stagger].is-visible > *:nth-child(5)  { opacity:1;transform:none;transition-delay:360ms; }
[data-stagger].is-visible > *:nth-child(6)  { opacity:1;transform:none;transition-delay:450ms; }

/* ── ASTRA CONTENT ───────────────────────────────────────────── */
.ast-container { max-width: 1200px; }
body.page .site-content { padding-top: 0 !important; }
.home .ast-breadcrumbs-wrapper,
.entry-header.ast-no-thumbnail { display: none !important; }
.ast-page-builder-template .entry-header { display: none !important; }