/* =========================
   CompRehab styles.css (ANNOTATED)
   - Super detailed comments for what everything does
   - Logo set to 100px tall (header adjusted so it fits)
   ========================= */

/* =========================================================
   1) BRAND TOKENS (CSS VARIABLES)
   ---------------------------------------------------------
   :root is the highest-level selector (the whole document).
   These variables make it easy to keep colors, sizing,
   shadows consistent across the entire site.
   ========================================================= */
:root{
  /* Primary text color (very dark navy) */
  --ink:#0f172a;

  /* Secondary text (paragraphs, supporting copy) */
  --muted:#475569;

  /* Even lighter secondary text (fine print, smaller notes) */
  --muted2:#64748b;

  /* Border / divider line color */
  --line:#e2e8f0;

  /* Page background */
  --bg:#ffffff;

  /* Soft background for alternating sections */
  --bg-soft:#f8fafc;

  /* Accent color used for highlights/underline/dots */
  --accent:#0b3a5a;

  /* A translucent version of the accent color for hover fills */
  --accent-soft:rgba(11,58,90,.10);

  /* Border radius scale (small/medium/large rounding) */
  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;

  /* Shadow presets for depth / elevation */
  --shadow-sm:0 6px 18px rgba(2,6,23,.05);
  --shadow-md:0 14px 40px rgba(2,6,23,.08);
}

/* =========================================================
   2) RESET / BASE STYLES
   ---------------------------------------------------------
   This normalizes default browser spacing and makes sizing
   predictable. Also sets global typography.
   ========================================================= */

/* Makes width/height calculations sane:
   padding + border are included in an element’s width */
*{ box-sizing:border-box; }

/* Smooth scrolling when clicking nav anchors like #services */
html{ scroll-behavior:smooth; }

/* Global body styling:
   - removes default margin
   - sets font stack
   - sets default text color and background
   - sets line-height for readability */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Images:
   - max-width:100% prevents images from overflowing containers
   - display:block removes annoying inline gaps under images */
img{ max-width:100%; display:block; }

/* Links inherit text color and remove underline by default */
a{ color:inherit; text-decoration:none; }

/* Default paragraph spacing */
p{ margin:0 0 1rem; }

/* Headings:
   - tighter line-height
   - consistent bottom margin */
h1,h2,h3{ line-height:1.2; margin:0 0 .75rem; }

/* Lists:
   - remove default top/bottom margins
   - set consistent indent */
ul,ol{ margin:0; padding-left:1.2rem; }

/* =========================================================
   3) LAYOUT HELPERS
   ---------------------------------------------------------
   Utilities used across multiple sections.
   ========================================================= */

/* .container centers content and limits max width.
   width:min(1100px, calc(100% - 2.5rem)):
   - never wider than 1100px
   - also keeps 1.25rem padding on both sides at small screens */
.container{
  width:min(1100px, calc(100% - 2.5rem));
  margin:0 auto;
}

/* Section spacing: vertical padding for every major section */
.section{ padding:4.5rem 0; }

/* Alternate section background for visual separation */
.section-alt{ background:var(--bg-soft); }

/* Section header paragraph style:
   - muted color
   - max width so lines don’t get too long (better readability) */
.section-header p{
  color:var(--muted);
  max-width:60ch;
}

/* Accent underline for section headings:
   - makes headings feel “branded”
   - uses pseudo-element :after to draw the line */
.section-header h2{
  display:inline-block;
  position:relative;
}
.section-header h2:after{
  content:"";
  display:block;
  height:3px;
  width:44px;
  margin-top:.5rem;
  border-radius:999px;
  background:var(--accent);
  opacity:.75;
}

/* =========================================================
   4) HEADER (STICKY NAV)
   ---------------------------------------------------------
   Sticky header stays visible on scroll.
   We must make it tall enough for a 100px logo.
   ========================================================= */
.site-header{
  position:sticky; /* stays pinned to top when scrolling */
  top:0;
  z-index:20; /* ensures it sits above page content */
  background:rgba(255,255,255,.9); /* translucent */
  backdrop-filter:blur(10px); /* blurred glass effect behind */
  border-bottom:1px solid var(--line); /* divider line */
}

/* Header row layout:
   - flex: brand on left, nav/buttons on right
   - height adjusted for 100px logo */
.header-inner{
  height:120px; /* IMPORTANT: bigger so 100px logo fits comfortably */
  display:flex;
  align-items:center; /* vertically centers brand + nav */
  justify-content:space-between;
}

/* spacing fallback:
   applies margin-left to every direct child except the first,
   replacing “gap” so older browsers still look fine */
.header-inner > * + *{ margin-left:1rem; }

/* Brand wrapper (logo + optional text) */
.brand{ display:inline-flex; align-items:center; }
.brand > * + *{ margin-left:.75rem; }

/* LOGO SIZE:
   - height is fixed at 100px (your request)
   - width:auto keeps original proportions */
.logo{
  height:100px;
  width:auto;
}

/* Nav is flex so links line up horizontally */
.nav{
  display:flex;
  align-items:center;
}

/* spacing fallback instead of gap:
   each link gets left margin except the first */
.nav a{ margin-left:1.1rem; }
.nav a:first-child{ margin-left:0; }

/* Nav link styling:
   - heavier weight for “professional”
   - padding gives a bigger click target
   - hover changes color */
.nav a{
  font-weight:700;
  color:#334155;
  padding:.4rem .1rem;
  transition:color .12s ease;
}
.nav a:hover{ color:var(--ink); }

/* =========================================================
   5) BUTTONS
   ---------------------------------------------------------
   Shared button classes. Use .btn for primary buttons,
   .btn-ghost for secondary buttons, etc.
   ========================================================= */
.btn{
  display:inline-flex;              /* makes button content align nicely */
  align-items:center;
  justify-content:center;
  padding:.75rem 1.05rem;
  border-radius:12px;
  background:var(--ink);            /* dark primary background */
  color:#ffffff;                    /* white text */
  font-weight:800;
  border:1px solid var(--ink);
  box-shadow:0 8px 22px rgba(2,6,23,.12);
  transition:transform .12s ease, opacity .12s ease, background .12s ease, box-shadow .12s ease;
  cursor:pointer;
}

/* If button has an icon + text, space them out */
.btn > * + *{ margin-left:.5rem; }

/* hover: lift slightly */
.btn:hover{ opacity:1; transform:translateY(-1px); }

/* active: push back down */
.btn:active{ transform:translateY(0px); box-shadow:0 6px 18px rgba(2,6,23,.10); }

/* smaller button variant */
.btn-small{ padding:.55rem .9rem; border-radius:10px; }

/* ghost style button:
   - no filled background
   - subtle border
   - hover gets a tinted background */
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid #cbd5e1;
  box-shadow:none;
}
.btn-ghost:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}

/* makes button full-width (useful in mobile layouts/forms) */
.btn-block{ width:100%; }

/* =========================================================
   6) HERO SECTION
   ---------------------------------------------------------
   Intro area with headline + CTA + side card.
   ========================================================= */
.hero{
  padding:5rem 0;
  position:relative;

  /* Background:
     - layered radial gradients create soft “spotlight” blobs
     - final base layer is white */
  background:
    radial-gradient(800px 300px at 10% 10%, #f1f5f9 0%, transparent 60%),
    radial-gradient(800px 300px at 90% 20%, #eef2ff 0%, transparent 60%),
    #ffffff;

  border-bottom:1px solid var(--line);
}

/* Decorative top line:
   - full width subtle accent line
   - helps hero feel “directional/compass” */
.hero:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.35;
}

/* hero layout:
   - flex row: copy on left, card on right */
.hero-inner{
  display:flex;
  align-items:flex-start;
}

/* spacing fallback between hero columns */
.hero-inner > * + *{ margin-left:2rem; }

/* Let copy grow, keep card fixed-ish */
.hero-copy{ flex:1 1 auto; }
.hero-card{ flex:0 0 360px; }

/* Big responsive hero heading size */
.hero-copy h1{
  font-size:clamp(2rem, 3.5vw, 3rem);
  letter-spacing:-0.02em;
}

/* Hero paragraph style */
.hero-copy p{ color:var(--muted); max-width:60ch; }

/* Hero action buttons row */
.hero-actions{
  display:flex;
  flex-wrap:wrap; /* wraps on small widths */
  margin:1.25rem 0 1.5rem;
}
.hero-actions > *{ margin-right:.85rem; margin-bottom:.85rem; }
.hero-actions > *:last-child{ margin-right:0; }

/* Hero highlights:
   - 3 columns on desktop (manual width calc)
   - wraps naturally */
.hero-highlights{
  display:flex;
  flex-wrap:wrap;
  margin-top:1rem;
}
.hero-highlights .highlight{
  width:calc(33.333% - .6rem);
  margin-right:.9rem;
  margin-bottom:.9rem;
}
.hero-highlights .highlight:nth-child(3n){ margin-right:0; }

/* highlight box style */
.highlight{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1rem;
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);
}
.highlight-title{ font-weight:900; }
.highlight-text{ color:var(--muted2); font-size:.95rem; }

/* =========================================================
   7) HERO SIDE CARD
   ---------------------------------------------------------
   This is the “quick info / book consult” style card.
   ========================================================= */
.hero-card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow-md);
}

.hero-card-title{ font-size:1.1rem; margin-bottom:.75rem; }

/* Removes bullets + spacing for a cleaner “info list” */
.hero-card-list{
  list-style:none;
  padding:0;
  margin:0 0 1rem;
  color:var(--muted);
}

/* Each list item styled like a “pill row”:
   - not a form input, just a clean info badge row */
.hero-card-list li{
  padding:.6rem .85rem .6rem 2.2rem; /* extra left padding for dot */
  border:1px solid rgba(11,58,90,.14);
  border-radius:14px;
  margin-bottom:.6rem;
  background:rgba(11,58,90,.04);
  position:relative;
}

/* Accent dot on the left of each item */
.hero-card-list li:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  opacity:.9;
}

/* =========================================================
   8) SERVICES / GENERAL GRID + CARDS
   ---------------------------------------------------------
   .grid creates a multi-column layout.
   Each child gets a width % (25% = 4 columns).
   ========================================================= */
.grid{
  display:flex;
  flex-wrap:wrap;
  margin-top:1.75rem;

  /* negative margins + child padding creates “gutters”
     without relying on CSS gap */
  margin-left:-0.5rem;
  margin-right:-0.5rem;
}
.grid > *{
  padding:0.5rem; /* gutter space */
  width:25%;      /* 4 columns desktop */
}

/* Card styling:
   - border + shadow for “elevated” look
   - hover lifts slightly for interactivity */
.card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem;
  background:#ffffff;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); margin:0; }

.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(11,58,90,.25);
}

/* Optional featured card:
   - slightly tinted background
   - stronger border */
.card-featured{
  border-color:rgba(11,58,90,.35);
  background:linear-gradient(180deg, rgba(11,58,90,.06), #ffffff 55%);
}

/* =========================================================
   9) PROCESS STEPS
   ---------------------------------------------------------
   Similar to services grid but used for numbered steps.
   ========================================================= */
.steps{
  list-style:none;
  padding-left:0;
  margin-top:1.75rem;
  display:flex;
  flex-wrap:wrap;
  margin-left:-0.5rem;
  margin-right:-0.5rem;
}
.steps > li{ padding:0.5rem; width:25%; } /* 4 columns desktop */

.step{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.1rem 1.1rem 1.2rem;
  background:#ffffff;
  transition:border-color .12s ease;
}
.step:hover{ border-color:rgba(11,58,90,.22); }

.step-title{ font-weight:900; margin-bottom:.35rem; }
.step-text{ color:var(--muted); }

/* =========================================================
   10) ABOUT SECTION
   ---------------------------------------------------------
   Two-column layout:
   - copy on left
   - info card on right
   ========================================================= */
.about{
  display:flex;
  align-items:flex-start;
}
.about > * + *{ margin-left:1.5rem; }

.about-copy{ flex:1 1 auto; }
.about-copy p{ color:var(--muted); }

.about-card{
  flex:0 0 360px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem;
  background:#ffffff;
  box-shadow:var(--shadow-sm);
}
.about-card ul{ margin-top:.5rem; }
.about-card li{ margin:.4rem 0; color:var(--muted); }

/* =========================================================
   11) CONTACT SECTION + FORM CONTROLS
   ---------------------------------------------------------
   Left side: contact details
   Right side: form
   ========================================================= */
.contact-grid{
  display:flex;
  align-items:flex-start;
  margin-top:1.75rem;
}
.contact-grid > *{ width:50%; }
.contact-grid > * + *{ margin-left:1rem; }

.contact-card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem;
  background:#ffffff;
  box-shadow:var(--shadow-sm);
}

/* Form spacing: every direct child gets bottom margin */
.form{ margin-top:.75rem; }
.form > *{ margin-bottom:.9rem; }
.form > *:last-child{ margin-bottom:0; }

/* Label is a mini grid:
   label text + input stacked */
label{ display:grid; font-weight:800; }
label > *:last-child{ margin-top:.35rem; }

/* Inputs/textarea:
   - consistent padding
   - rounded corners
   - subtle border */
input, textarea{
  width:100%;
  font:inherit;
  padding:.75rem .85rem;
  border:1px solid #cbd5e1;
  border-radius:14px;
  background:#ffffff;
  outline:none;
}

/* Focus state:
   - accent border
   - focus ring (box-shadow) for accessibility */
input:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(11,58,90,.12);
}

.fineprint{
  margin:.4rem 0 0;
  color:var(--muted2);
  font-size:.9rem;
}

/* Contact note box: dashed border + soft background */
.contact-note{
  margin-top:1rem;
  padding:1rem;
  border-radius:16px;
  border:1px dashed #cbd5e1;
  background:var(--bg-soft);
}
.contact-note p{ color:var(--muted); }

/* =========================================================
   12) FOOTER
   ---------------------------------------------------------
   Simple row with left/right content and wrap for mobile.
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  padding:2rem 0;
  background:#ffffff;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted2);
  font-weight:700;
  flex-wrap:wrap; /* wraps on small screens */
}
.footer-inner > * + *{ margin-left:1rem; }

.footer-inner a{ color:#334155; }
.footer-inner a:hover{ color:var(--ink); }

/* =========================================================
   13) RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------
   These rules change layout when the screen gets smaller.
   ========================================================= */

/* Tablet / small laptop */
@media (max-width:980px){
  /* Hero becomes stacked vertically */
  .hero-inner{ flex-direction:column; }
  .hero-inner > * + *{ margin-left:0; margin-top:2rem; }
  .hero-card{ flex:1 1 auto; width:100%; }

  /* Highlights become full width */
  .hero-highlights .highlight{
    width:100%;
    margin-right:0;
  }

  /* Services grid becomes 2 columns */
  .grid > *{ width:50%; }

  /* Steps become 2 columns */
  .steps > li{ width:50%; }

  /* About becomes stacked */
  .about{ flex-direction:column; }
  .about > * + *{ margin-left:0; margin-top:1.5rem; }
  .about-card{ width:100%; flex:1 1 auto; }

  /* Contact becomes stacked */
  .contact-grid{ flex-direction:column; }
  .contact-grid > *{ width:100%; }
  .contact-grid > * + *{ margin-left:0; margin-top:1rem; }
}

/* Mobile */
@media (max-width:640px){
  /* Hide nav to prevent cramped header */
  .nav{ display:none; }

  /* Reduce section padding for smaller screens */
  .section{ padding:3.5rem 0; }
  .hero{ padding:4rem 0; }

  /* Services + steps become single column */
  .grid > *{ width:100%; }
  .steps > li{ width:100%; }
}