/* ==========================================================================
   COLORADOHEALTH.COM  —  STYLESHEET
   ==========================================================================

   TOM — READ THIS FIRST:

   You should almost never need to open this file.

   - To change WORDS, LINKS or PHOTOS  ->  edit index.html
   - To change a COLOUR                ->  edit the short list right below
   - Everything arranges itself for phones automatically.
     There are no "move this 20 pixels" numbers to maintain.

   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLOURS AND PAGE WIDTH
   Change a colour here and it updates everywhere on the site.
   -------------------------------------------------------------------------- */
:root {
  --navy:        #003f67;   /* blue button bar, top colour    */
  --navy-dark:   #002e50;   /* blue button bar, bottom colour */
  --green:       #24652d;   /* green button bar, top colour   */
  --green-dark:  #1a5524;   /* green button bar, bottom       */
  --address-bar: #001f38;   /* dark bar with the street address */
  --ink:         #061f3b;   /* normal text colour */
  --link:        #00527f;   /* link colour */
  --page-width:  1524px;    /* how wide the site gets on a big monitor */
  --photo-band:  570px;     /* how tall the mountain photo is at the top */
}


/* --------------------------------------------------------------------------
   2. BASICS
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #eef5f9;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Keyboard users can always see what they have selected */
a:focus-visible { outline: 3px solid #ffb100; outline-offset: 2px; }

img { max-width: 100%; }

#page {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 18px 70px rgba(0, 28, 56, .18);
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   3. TOP SECTION (mountain photo, logo, phone numbers, headline, cards)

   The mountain photo and the soft fade over it are both pinned to the top
   570px of the page (the --photo-band setting above). Everything below the
   photo sits on white, exactly like the printed mock-up.
   -------------------------------------------------------------------------- */
#hero {
  position: relative;
  /* Side margins shrink smoothly as the screen narrows (63px on a big
     monitor, down to 16px on a phone) so the cards keep their room. */
  padding: 24px clamp(16px, 4.134vw, 63px) 20px;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,0)   27%,
      rgba(0,45,54,.20)     38%,
      rgba(0,32,58,.14)     53%,
      rgba(255,255,255,.02) 64%,
      rgba(255,255,255,.55) 88%,
      #ffffff               100%),
    url("../images/1.jpg");
  background-size:     auto var(--photo-band), auto var(--photo-band);
  background-position: center top, center top;
  background-repeat:   no-repeat, no-repeat;
  background-color:    #ffffff;
}

/* --- logo (left) and phone numbers (right) ------------------------------- */
/* "flex" puts them side by side, and "wrap" lets the phone block drop
   underneath the logo by itself when the screen is too narrow. */
.hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
}

.brand { text-align: center; }
.brand a { display: block; }
.brand img { width: 323px; height: auto; display: block; filter: drop-shadow(0 7px 6px rgba(0,0,0,.36)); }
.brand .serving {
  margin-top: 4px;
  font-size: clamp(20px, 1.97vw, 30px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: .03em;
  color: #092546;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.call {
  text-align: center;
  margin-right: 22px;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.call .label { font-size: clamp(18px, 1.44vw, 22px); font-weight: 900; margin-bottom: 5px; }
.call .phone { display: block; font-size: clamp(26px, 2.1vw, 32px); line-height: 1.03; font-weight: 900; letter-spacing: -.035em; }
.call .email { display: inline-block; margin-top: 5px; font-size: clamp(18px, 1.44vw, 22px); font-weight: 900; color: #0000EE; text-decoration: underline; }

/* --- big white headline over the mountains -------------------------------- */
/* clamp(smallest, flexible, largest) = the text shrinks on small screens
   and stops growing once it hits the largest size. */
h1.headline {
  margin: 72px 0 0;
  text-align: center;
  color: #fff;
  font-size: clamp(30px, 1.2rem + 2.283vw, 54px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow: 0 3px 7px rgba(0,0,0,1);
  text-wrap: balance;
}
.subhead {
  margin: 14px 0 0;
  text-align: center;
  color: #fff;
  font-size: clamp(17px, 1.77vw, 27px);
  line-height: 1.2;
  font-weight: 900;
  text-shadow: 0 3px 7px rgba(0,0,0,1);
}

/* --- the three quote cards ------------------------------------------------ */
/*  ***  THIS IS THE LINE THAT DOES THE RESPONSIVE WORK  ***
    repeat(auto-fit, minmax(300px, 1fr)) means:
      "fit as many 300-pixel-wide columns across as you can,
       then share the leftover space between them equally."
    Wide monitor -> 3 across.  Tablet -> 2 across.  Phone -> 1 across.
    Nothing to switch on or off. If you ever add a 4th card, it just works. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin: 12px clamp(0px, 3.871vw, 59px) 0;
}

.card {
  display: block;
  background: #fff;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 13px;
  box-shadow: 0 15px 30px rgba(0,30,60,.18);
  padding-bottom: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 23px 44px rgba(0,30,60,.28); text-decoration: none; }

/* The round icon is anchored to the bottom edge of the photo, so if you ever
   swap in a taller or shorter photo the icon stays in the right place. */
.card .photo-wrap { display: block; position: relative; }
.card .text { display: block; }
.card .photo { display: block; width: 100%; height: 242px; object-fit: cover; border-radius: 11px 11px 0 0; }
.card .icon {
  position: absolute;
  left: 50%;
  bottom: -47px;
  transform: translateX(-50%);
  width: 94px;
  height: 94px;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.card .title {
  display: block;
  padding: 64px 12px 0;
  text-align: center;
  font-size: clamp(19px, 1.57vw, 24px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--ink);
  text-transform: uppercase;
}
.card .cta {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--link);
}

/* --- white pill holding the insurance company logos ----------------------- */
/* "flex-wrap" lets the logos flow onto a second row on small screens
   instead of running off the side. */
.carriers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 12px 20px;
  margin-top: 26px;
  padding: 13px 26px;
  background: rgba(255,255,255,.96);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,26,50,.12);
}
.carriers img { width: auto; }
.carriers .anthem  { height: 34px; }
.carriers .cigna   { height: 44px; }
.carriers .select  { height: 42px; }
.carriers .connect { height: 42px; }
.carriers .kaiser  { height: 36px; }
.carriers .rocky   { height: 47px; }
.carriers .elevate { height: 32px; }


/* --------------------------------------------------------------------------
   4. THE BLUE AND GREEN BUTTON BARS

   Same one-line trick as the cards. Five buttons sit across on a monitor,
   two across on a phone. Add or remove a button in index.html and the rest
   re-space themselves — you never set a width.
   -------------------------------------------------------------------------- */
.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  color: #fff;
}
.nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px;
  min-height: 128px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.5);
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.nav img { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }

.nav-blue  { background: linear-gradient(180deg, var(--navy)  0%, var(--navy-dark)  100%); }
.nav-green { background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%); }
.nav-green a { min-height: 90px; padding: 12px 10px; font-size: clamp(14px, 1.11vw, 17px); }
.nav-green img { width: 34px; height: 34px; }

.address {
  padding: 15px 20px;
  background: var(--address-bar);
  color: #fff;
  text-align: center;
  font-size: clamp(15px, 1.18vw, 18px);
  font-weight: 900;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
}


/* --------------------------------------------------------------------------
   5. THE THREE INFORMATION BOXES NEAR THE BOTTOM
   -------------------------------------------------------------------------- */
#content-area {
  padding: 45px clamp(16px, 4.593vw, 70px) 70px;
  background: linear-gradient(180deg, #fff 0%, #f7fbfe 100%);
}
.info-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
/* On a monitor the first box is widest and the BBB box is narrow,
   matching the approved design. Below 1000px they even out by themselves. */
@media (min-width: 1000px) {
  .info-boxes { grid-template-columns: 2fr 1.4fr .7fr; }
}

.box {
  background: #fff;
  border: 1px solid #d8e3ed;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(0,31,60,.09);
  padding: 28px 32px;
}
.box h2 { margin: 0 0 14px; font-size: clamp(20px, 1.57vw, 24px); font-weight: 900; color: #031f3b; letter-spacing: -.02em; }
.box p  { margin: 0 0 18px; color: #415a77; font-size: clamp(16px, 1.18vw, 18px); line-height: 1.48; font-weight: 500; }
.box a  { color: var(--link); font-weight: 800; }
.box.centered { text-align: center; }
.bbb-logo { width: 86px; height: auto; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.bbb-rating { margin-top: 10px; font-size: 22px; font-weight: 900; color: #05213e; }

.pill {
  display: inline-block;
  margin: 5px 5px 0 0;
  padding: 8px 15px;
  border-radius: 999px;
  background: #eef7fc;
  border: 1px solid #cfdfeb;
  color: #113c60;
  font-size: 14px;
  font-weight: 900;
}

#footer {
  padding: 22px 30px 30px;
  background: #fff;
  color: #5d7185;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  border-top: 1px solid #e0eaf2;
}
#footer a { color: var(--link); font-weight: 800; }


/* --------------------------------------------------------------------------
   6. PHONE ADJUSTMENTS

   This is the ONLY screen-size rule in the whole file, and it only makes
   things smaller and tighter on phones. The rearranging is already handled
   automatically by the grid lines above.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  #hero { padding: 18px 16px 16px; }

  /* How far down the phone screen the mountain photo reaches before it
     turns to white. SMALLER number = less photo, more white behind the
     cards. Try 380, 400, 430 to taste.
     Don't go much below 380 or the white headline text starts to sit on
     white background and becomes hard to read. */
  /* RE-MEASURED 31 August 2026, after the 800 number came off the
     header. Losing that line pulled every word up about 26px, so the
     old bands (400 / 450) ran past the text and behind the top of the
     first card. Same rule as before - white arrives about ten pixels
     under the last word:

         width   sentence ends   first card starts
          320         410               438
          344         414               442
          360         396               424
          375+        365               393
     -------------------------------------------------------------- */
  #hero {
    --photo-band: 375px;
    /* On a phone the photo stays dark behind the headline and then turns
       to white quickly at the bottom, so the quote cards sit on clean
       white instead of on a washed-out photo. */
    /* THE TOP OF THE PHOTO IS DARKENED, NOT LIGHTENED.
       The first three stops used to add white at the top, which left the
       snow bright and the dark navy text on it unreadable in patches -
       "303-782-0123" measured 1.7:1 against the lightest pixel behind it,
       where 3:1 is the minimum. They add dark now, so the white text
       below has something to sit on.
       The last three stops are unchanged: the photo still fades to white
       at the bottom so the quote cards sit on clean white.
       MORE dark = higher first two numbers. Try .82, .76, .70 to taste. */
    /* 1.jpg, not 1.png: the same photograph, 255 KB instead of 2.1 MB.
       A photo saved as PNG was the single biggest thing on the whole site. */
    background-image:
      linear-gradient(180deg,
        rgba(0,26,45,.82)     0%,
        rgba(0,26,45,.74)    26%,
        rgba(0,33,50,.52)    46%,
        rgba(0,32,58,.24)    86%,
        rgba(0,32,58,.20)    95%,
        #ffffff             100%),
      url("../images/1.jpg");
  }

  /* --- NARROW PHONES: the photo has to reach further down --------------
     Under 375px the headline wraps from two lines to three, which
     pushes the sentence below it about 40px down the screen. With the
     band left at 400px that sentence ended up BELOW the fade - white
     words on white background, held up only by their shadow.

     Measured on the live page, 31 August 2026:

         width   sentence ends   first card starts
          320         437               465
          344         441               469
          360         422               450
          375+        391               419

     450 clears the words at all three narrow widths and still stops at
     or above the first card, so the cards keep their clean white.
     If the headline wording ever changes, re-measure with
     subpage-work/herowidths.js and move this one number. */
  @media (max-width: 374px) {
    #hero { --photo-band: 425px; }
  }

  /* --- the hero text turns white ---------------------------------------
     Everything on the photograph is white now, which is the rule the
     headline below already followed. The shadow flips from white to a
     soft dark one: a white shadow behind white text does nothing.

     19px on "Serving Colorado", not 17. At 17px it needed 4.5:1 and
     measured 4.2:1; at 18.66px and bold it counts as large text, which
     needs 3:1. Raising the size was cheaper than fighting the photo. */
  .brand .serving {
    color: #fff;
    font-size: 19px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }
  .call { text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
  .call .label { color: #fff; }
  .call .phone { color: #fff; }
  /* light blue, so it still reads as a link against the white numbers */
  .call .email { color: #d6ecff; }


  /* Centre the logo and phone block instead of pushing them apart */
  .hero-top { justify-content: center; text-align: center; }
  .call { margin-right: 0; }
  .brand img { margin: 0 auto; }

  h1.headline { margin-top: 26px; }

  /* On a phone the three quote cards become short wide rows, so all three
     choices fit on the first screen instead of needing three scrolls. */
  /* 28px top margin gives the first card room to clear the photo */
  .cards { margin: 28px 0 0; gap: 14px; }
  .card { display: flex; align-items: center; gap: 14px; padding: 0 14px 0 0; }
  .card .photo-wrap { flex: 0 0 122px; }
  .card .photo { height: 104px; border-radius: 11px 0 0 11px; }
  .card .icon { width: 46px; height: 46px; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
  .card .text { flex: 1 1 auto; }
  .card .title { padding: 0; text-align: left; font-size: 18px; }
  .card .cta { margin-top: 5px; text-align: left; font-size: 12px; }

  /* A wrapped row of logos looks wrong inside a pill, so square it off
     and shrink the logos so they sit two or three to a line. */
  .carriers { border-radius: 18px; padding: 12px 14px; gap: 10px 16px; justify-content: center; }
  .carriers img { height: 22px; }
  .carriers .cigna, .carriers .rocky { height: 28px; }

  .nav a { min-height: 104px; padding: 14px 8px; }
  .nav-green a { min-height: 92px; }

  #content-area { padding: 28px 16px 36px; }
  .box { padding: 22px 20px; }
}


/* Respect the visitor's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}