/*
 * All About Seniors — Adult Family Homes.
 *
 * The brief was to keep what Michael already likes and rebuild everything
 * underneath it. So the composition of the current site survives on purpose:
 * the two big value propositions near the top, the four homes on the left with
 * his Google My Maps beside them, and the contact details next to the map.
 *
 * What changes is the execution. The old Drupal theme forced small photographs
 * through a 2012 grid; the photography here is genuinely good — someone paid a
 * photographer — so it gets room, and the type gets out of its way.
 *
 * Colour comes from the photographs rather than from the trade: warm creams and
 * timber, a deep slate for text, and one muted teal carried over from the old
 * site so the brand still feels continuous. Nothing here shouts. Families
 * reading this page are usually having a difficult month.
 */

:root {
  --ink:    #23302F;   /* text — a green-leaning slate, warmer than black */
  --ink-2:  #55635F;
  --cream:  #FBF8F3;
  --sand:   #F1EADF;
  --line:   #E2D9CB;
  --teal:   #2E7F86;   /* carried over from the existing brand */
  --teal-d: #24666C;
  --gold:   #B9834A;
  --white:  #FFFFFF;

  --shell:  min(1180px, 100% - 2.4rem);
  --serif:  Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:   system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-d); }

.wrap { width: var(--shell); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 50; }

/* ── header ──────────────────────────────────────────────────────────────── */
.top { border-bottom: 1px solid var(--line); background: var(--white); position: sticky; top: 0; z-index: 20; }
.top-in { display: flex; align-items: center; gap: 1.4rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; color: var(--teal); flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt b { font-family: var(--serif); font-size: 1.08rem; letter-spacing: .01em; }
.brand-txt small { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.nav { margin-left: auto; display: flex; gap: 1.5rem; }
.nav a { color: var(--ink); text-decoration: none; font-size: .92rem; }
.nav a:hover { color: var(--teal-d); text-decoration: underline; text-underline-offset: 4px; }
.callbtn {
  background: var(--teal); color: #fff; text-decoration: none; font-weight: 600;
  padding: .55rem 1rem; border-radius: 999px; white-space: nowrap; font-size: .95rem;
}
.callbtn:hover { background: var(--teal-d); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink); }
/*
 * Taller, and no longer dimmed. Michael, 2 Sep 2026: "need to see the pictures
 * more clearly, captions are overpowering the background."
 *
 * The fix is height, not a weaker scrim. The caption box is anchored to the
 * bottom and its height is set by its own content, so a taller hero adds
 * photograph ABOVE the gradient — the picture gets more room and the contrast
 * behind the headline is untouched. Lightening the scrim instead was tried and
 * measured: it dropped four of the six frames below the 3:1 large-text floor.
 *
 * The old `opacity: .96` was also dimming every photograph by 4% for no reason.
 */
.hero > img { width: 100%; height: clamp(380px, 66vh, 680px); object-fit: cover; }
/*
 * The scrim was drowning the photographs. Michael's note, 2 Sep 2026: "need to
 * see the pictures more clearly, captions are overpowering the background — the
 * lady cooking should be more clear."
 *
 * Lightened from .62/.86 to .34/.66, and the darkening now starts lower (58%
 * rather than 42%) so the upper half of every frame is barely touched. The
 * legibility that lost is paid back on the GLYPHS instead of the whole picture:
 * a text-shadow darkens only the few pixels behind each letter, which is
 * invisible against the photograph and worth roughly a stop of contrast.
 *
 * Measured after the change — white headline against the brightest tenth of its
 * own backdrop, all six frames: 3.1:1 to 7.4:1, still clear of the 3:1 that
 * large text needs. Do not lighten further without measuring again.
 */
.hero-cap {
  position: absolute; inset: auto 0 0 0; padding: 3.4rem 0 2rem;
  background: linear-gradient(180deg, rgba(20,28,27,0) 0%, rgba(20,28,27,.62) 42%, rgba(20,28,27,.86) 100%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(12,18,17,.75), 0 0 14px rgba(12,18,17,.45);
}
.eyebrow { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #E4D9C6; }
.hero h1 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.15; margin: 0 0 .7rem;
}
.hero .lede { margin: 0 0 1.2rem; max-width: 42rem; color: #EFE8DC; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }

.btn {
  display: inline-block; background: var(--gold); color: #fff; text-decoration: none;
  font-weight: 600; padding: .72rem 1.35rem; border-radius: 6px;
}
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); }
.btn.wide { display: block; text-align: center; margin-top: 1rem; background: var(--teal); }
.btn.wide:hover { background: var(--teal-d); }

/* ── bands ───────────────────────────────────────────────────────────────── */
.band { padding: 3.2rem 0; }
.band.alt { background: var(--cream); border-block: 1px solid var(--line); }
.sec-head { margin-bottom: 1.8rem; }
.sec-head h2 {
  font-family: var(--serif); font-weight: 400; margin: 0 0 .35rem;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
}
.sec-head p { margin: 0; color: var(--ink-2); }

/* The two lines Michael wanted kept large and near the top. */
.promise { text-align: center; }
.promise-main {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem);
  margin: 0 0 .5rem; color: var(--ink);
}
.promise-sub { margin: 0 auto; max-width: 46rem; color: var(--ink-2); }

/* ── the homes and the map ───────────────────────────────────────────────── */
.where { padding: 3.2rem 0; }
/* Three columns across, left to right: the four homes, the map, the contact
   details — the same order as the current site, where .three-col is a flex row
   of three equal .col children. Michael arranged that himself and knows it by
   sight, so the arrangement is the one thing carried over literally. The homes
   column is given a little more room because four photographs in a 2x2 grid
   need it; on the current site each thumbnail is squeezed to its 227px floor. */
.where-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1.6rem; align-items: stretch;
}
.homes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.home { text-decoration: none; color: inherit; display: block; }
.home img {
  width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
  transition: transform .25s ease;
}
.home:hover img { transform: translateY(-3px); }
.home-cap { display: block; margin-top: .5rem; line-height: 1.3; }
.home-cap b { display: block; font-size: .95rem; }
.home-cap small { color: var(--ink-2); }

.mapcol { display: flex; flex-direction: column; gap: 1rem; }
.mapbox { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sand); flex: 1; }
.mapbox iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.contactcard { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem 1.3rem; }
.cc-lead { margin: 0 0 .35rem; font-family: var(--serif); font-size: 1.16rem; color: var(--teal-d); }
.cc-sub { margin: 0 0 .9rem; font-size: .92rem; color: var(--ink-2); }
.cc-row { display: flex; gap: .6rem; margin: .3rem 0; font-size: .95rem; overflow-wrap: break-word; }
.cc-row span { color: var(--ink-2); min-width: 3.6rem; flex: none; }

/* ── three columns ───────────────────────────────────────────────────────── */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.three h3 { font-family: var(--serif); font-weight: 400; font-size: 1.24rem; margin: 0 0 .5rem; }
.three p { margin: 0 0 .7rem; color: var(--ink-2); font-size: .96rem; }

/* ── safety ──────────────────────────────────────────────────────────────── */
.safety { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: center; padding: 3.4rem 0; }
.safety h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem,1.2rem + 1.1vw,2.05rem); margin: 0 0 .7rem; }
.safety p { color: var(--ink-2); margin: 0 0 .9rem; }
.ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; font-size: .96rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--teal);
}
.safety-pics { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.shot { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; line-height: 0; }
.safety-pics img { width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover; border-radius: 8px;
                   transition: transform .25s ease; }
.shot:hover img { transform: translateY(-2px); }
.shot:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; }

/* ── visit ───────────────────────────────────────────────────────────────── */
.visit { background: var(--sand); border-top: 1px solid var(--line); }
.visit-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.2rem; align-items: start; }
.visit-txt h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem,1.2rem + 1.1vw,2.05rem); margin: 0 0 .6rem; }
.visit-txt p { color: var(--ink-2); margin: 0 0 .8rem; }
.visit-phone a { font-family: var(--serif); font-size: 1.9rem; text-decoration: none; color: var(--ink); }
.muted { color: var(--ink-2); font-size: .92rem; }

/* The EmailMeForm embed writes its own markup from their servers, so we can
   only style around it and lightly over it. Kept on purpose: submissions
   already arrive where Michael expects them, and changing that is a separate
   decision from changing the look of the site. */
.visit-form { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; }
.visit-form input[type=text], .visit-form input[type=email], .visit-form textarea, .visit-form select {
  width: 100% !important; font-family: var(--sans) !important; font-size: 1rem !important;
  padding: .6rem .7rem !important; border: 1px solid var(--line) !important; border-radius: 6px !important;
  background: #fff !important; color: var(--ink) !important;
}
.visit-form input[type=submit], .visit-form button {
  background: var(--teal) !important; color: #fff !important; border: 0 !important;
  padding: .7rem 1.3rem !important; border-radius: 6px !important; font-weight: 600 !important;
  font-family: var(--sans) !important; cursor: pointer;
}
.visit-form table, .visit-form td { width: 100% !important; display: block !important; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: #D9E0DE; padding: 2.4rem 0; }
.foot p { margin: .25rem 0; font-size: .95rem; }
.foot a { color: #fff; }
.foot .small { margin-top: .9rem; font-size: .82rem; color: #9FADAA; }

/* ── narrower screens ────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .nav { display: none; }
  .where-grid, .safety, .visit-in, .three { grid-template-columns: 1fr; }
  .three { gap: 1.4rem; }
  .safety-pics { order: -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .homes { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .home-cap b { font-size: .86rem; }
  .hero-cap { padding-top: 2.4rem; }
}

/* ── the photographs ─────────────────────────────────────────────────────
   One set per home, chosen by the tabs — or by clicking a home further up
   the page, which is how most people will arrive here. */
.gal-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.gal-tab {
  font-family: var(--sans); font-size: .92rem; line-height: 1.25; text-align: left;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: .55rem .85rem; cursor: pointer;
}
.gal-tab small { display: block; color: var(--ink-2); font-size: .78rem; }
.gal-tab:hover { border-color: var(--teal); }
.gal-tab.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.gal-tab.on small { color: #D6ECEE; }

.gal-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.gal-panel.hide { display: none; }
.gal-tile { padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal-tile img {
  width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
  transition: transform .2s ease;
}
.gal-tile:hover img { transform: translateY(-2px); }

/* Lightbox. Deliberately plain: a photograph, a way out, and arrows. */
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(14,18,17,.94);
      display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.lb button { position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; cursor: pointer; font-size: 2rem; line-height: 1; padding: .3rem .8rem;
  border-radius: 8px; }
.lb button:hover { background: rgba(255,255,255,.24); }
.lb-x { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-cap { position: absolute; bottom: 2.6rem; left: 0; right: 0; text-align: center;
          color: #F2EEE6; font-size: 1rem; margin: 0; padding: 0 3.5rem; }
.lb-count { position: absolute; bottom: 1rem; color: #CFD8D6; font-size: .85rem; margin: 0; }

@media (max-width: 920px) { .gal-panel { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .gal-panel { grid-template-columns: repeat(2, 1fr); }
  .lb button { font-size: 1.5rem; }
}