/* ╔══════════════════════════════════════════════════════════════════════════╗
   shared.css — :root design tokens + base + utility vocabulary.
   Imported by style.css and admin.css. Pool-Tech — bright pool blue.
   Brand primary #00adf1 is the exact background of the logo wordmark, so the
   header (which uses it) lets the logo sit seamlessly.
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@700;800;900&family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ── Brand: pool blue ───────────────────────────────────────────────── */
  --sky:        #00adf1;   /* primary — logo blue, header, accents */
  --sky-dark:   #0090cc;
  --sky-darker: #0277a8;
  --blue:       #0a5a86;   /* deep ocean — headings / dark UI text */
  --blue-dark:  #073f5e;   /* footer / darkest */
  --blue-mid:   #0f74a3;
  --blue-light: #5cc4f3;
  --blue-pale:  #e3f5fd;
  --blue-paler: #f2fafe;

  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --cream:      #eef6fb;   /* pale blue-grey section wash */
  --sand:       #e7f1f7;
  --sand-deep:  #d6e6f0;
  --gold:       #f5a623;   /* review stars */
  --white:      #ffffff;

  /* ── Text ──────────────────────────────────────────────────────────── */
  --ink:        #12222e;
  --text:       #1b2a36;
  --text-muted: #54677a;
  --text-light: #8497a6;

  /* ── Lines / surfaces ──────────────────────────────────────────────── */
  --border:      #d3e1ec;
  --border-soft: #e6eef5;
  --border-dark: #b9cdda;
  --bg:          #ffffff;
  --bg-soft:     #f3f8fc;

  /* ── Generic aliases consumed by admin.css / contact-form.css ──────── */
  --accent:       var(--sky);
  --accent-dark:  var(--sky-dark);
  --accent-pale:  var(--blue-pale);
  --navy:         var(--blue);
  --teal:         var(--sky);
  --green:        #1c8a5a;
  --red:          #c0392b;
  --red-pale:     #fdf0ef;

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font:         var(--font-body);

  /* ── Geometry ──────────────────────────────────────────────────────── */
  --max-width:  1160px;
  --radius:     10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --transition: 0.22s ease;

  /* ── Shadows (blue-tinted) ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(10, 90, 134, 0.08);
  --shadow-md:  0 6px 24px rgba(10, 90, 134, 0.12);
  --shadow-lg:  0 14px 44px rgba(10, 90, 134, 0.18);

  /* ── nice-select accent ────────────────────────────────────────────── */
  --ns-accent:        var(--sky);
  --ns-accent-shadow: rgba(0, 173, 241, 0.18);
}

/* ── Reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-mid); text-decoration: none; }
a:hover { color: var(--blue); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--blue);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-cream { background: var(--cream); }
.section-sand  { background: var(--sand); }
.section-blue  { background: var(--blue); color: #dceef8; }
.section-blue h1, .section-blue h2, .section-blue h3 { color: #fff; }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-darker);
  margin-bottom: 0.5rem;
}
.section-title { font-size: clamp(1.8rem, 3.8vw, 2.6rem); margin-bottom: 0.6rem; }
.section-intro { color: var(--text-muted); max-width: 48rem; font-size: 1.08rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.8rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: var(--transition); text-align: center; line-height: 1.2;
  white-space: nowrap;
}
.btn-primary { background: var(--sky); color: #fff; border-color: var(--sky); }
.btn-primary:hover { background: var(--sky-dark); border-color: var(--sky-dark); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-white { background: #fff; color: var(--blue); border-color: #fff; }
.btn-white:hover { background: var(--blue-pale); border-color: var(--blue-pale); color: var(--blue); }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-outline-white:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: #fff; }
.btn-lg { font-size: 1.08rem; padding: 1rem 2rem; }
.btn-sm { font-size: 0.85rem; padding: 0.45rem 1rem; }

/* ── Utilities ───────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-sm     { font-size: 0.9rem; }
.text-xs     { font-size: 0.8rem; }
.text-lg     { font-size: 1.15rem; }
.fw-500      { font-weight: 500; }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }
.uppercase   { text-transform: uppercase; letter-spacing: 0.04em; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.flex-row    { display: flex; flex-direction: row; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.flex-1      { flex: 1; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }    .gap-6 { gap: 1.5rem; }  .gap-8 { gap: 2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }   .mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.m-0  { margin: 0; }
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.d-inline { display: inline; }
.nowrap   { white-space: nowrap; }
.hidden   { display: none !important; }
.clickable { cursor: pointer; }

/* ── Native form controls (covers public, admin) ─────────────────────── */
input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

input[type="file"]::file-selector-button {
  background: var(--sky); color: #fff; border: none;
  padding: .45rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
  cursor: pointer; margin-right: .75rem; transition: background .15s;
  font-family: var(--font-body);
}
input[type="file"]:hover::file-selector-button { background: var(--sky-dark); }

/* ── Site credit (subtle designer attribution) ─────────────────────────────── */
.site-credit {
  text-align: center;
  font-size: .72rem;
  padding: .7rem 1rem;
  opacity: .5;
}
/* Scoped under `footer` so the inherited footer-text colour beats any site-wide
   `a:hover` rule — without this, hover could recolour the link to the background. */
footer .site-credit a { color: inherit; text-decoration: none; }
footer .site-credit a:hover,
footer .site-credit a:focus { color: inherit; text-decoration: underline; }