/* ========================================================================
   yourpreplan.com - responsive + modernisation layer
   Loads after publicstyle.css and after the CMS's inline <style> block, so it
   wins on equal specificity. Bump asset_ver in yourpreplan.json before every
   re-deploy that touches this file: IIS serves it with a long clientCache
   max-age, so without the bump the browser keeps the old copy.

   Parts:
     1-4  base level - the new header/nav, the hero, the rebuilt form, and
                       bugs in the CMS's own desktop layout that were always
                       wrong
     5    <=1240px   - make the fixed 1200px shell fluid (widths only)
     5b   <=1100px   - the header switches to a drawer
     6    <=900px    - un-table the layout
     7    <=560px    - phones
   Anything that would reflow the 1200px desktop design belongs in part 5 or
   below, never in parts 1-4.
   ==================================================================== */

:root {
  --navy: #00223c;
  --red: #ed1f24;
  --blue: #004990;
  --amber: #ff9933;
  --ink: #626364;
  --page: 1200px;
  --gutter: 20px;
  --header-h: 100px;
  --header-h-m: 64px;
}

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

body { -webkit-text-size-adjust: 100%; }

/* --- skip link --------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: #fff; color: var(--navy); padding: 12px 18px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; outline: 3px solid var(--amber); }

/* keyboard focus has to be visible now that the nav is real markup */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* ======================================================================
   1. HEADER + NAV
   Replaces the "Easy Button & Menu Maker" widget: 24 KB of JS and 16 KB of
   CSS to draw four links, with its own hamburger mode switched off.
   ==================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: var(--navy);
  height: var(--header-h);
}
.header-inner {
  max-width: var(--page); height: 100%; margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.brand img { display: block; width: auto; height: 100px; max-width: 100%; }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 4px;
}
.site-nav li { font: inherit; color: inherit; line-height: normal; }
.site-nav a {
  display: block; padding: 14px 18px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 16px; line-height: 28px; font-weight: 400;
  color: #fff; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--amber); text-decoration: none; }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }

/* burger: hidden until the media query needs it */
.nav-toggle {
  display: none; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 4px; margin: 0;
  color: #fff; cursor: pointer;
  font: 700 14px/1 Montserrat, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}
.nav-bars, .nav-bars::before, .nav-bars::after {
  display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
.nav-bars::before { top: -8px; }
.nav-bars::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after { transform: translateY(-8px) rotate(-45deg); }

.nav-backdrop { display: none; }

/* ======================================================================
   2. HERO
   Replaces LayerSlider - greensock + transitions + kreaturamedia + easing +
   transit, ~145 KB of JS - which drove ONE non-rotating slide of static text
   over a background image, with responsive:false.
   ==================================================================== */
.hero {
  position: relative;
  display: flex; align-items: center;
  background: var(--navy) center center / cover no-repeat;
}
.hero-inner {
  width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 32px var(--gutter);
}
.hero-title {
  margin: 0; color: #fff;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif; font-weight: 700;
}
.hero-copy {
  max-width: 600px; margin: 18px 0 0; color: #fff;
}

.hero-home {
  min-height: 400px;
  background-image: url(/slideshow/hero-home.jpg);
}
.hero-home .hero-title { font-size: 40px; line-height: 1.1; }

/* the CMS shipped this band as a 1700x225 PNG of one flat red */
.hero-band {
  min-height: 225px; justify-content: center; text-align: center;
  background-color: var(--red); background-image: none;
}
.hero-band .hero-title { font-size: 55px; line-height: 1.1; }

/* ======================================================================
   3. DESKTOP FIXES in the CMS's own layout
   ==================================================================== */
/* The two photo bands are 1920px wide artwork on rows fixed at 350px/250px.
   Below 1920 `cover` crops them; that is fine, but the rows must not collapse
   under their own content. */
.subFooter2Cell, .subFooter3Cell { background-position: center; }

/* the "WHY DOES A PREPLAN WORK?" cards sit in a table inset with
   `margin-left:550px` so the photo behind them stays visible on the left */
.yp-cards td { color: #fff; }
.yp-cards img { display: inline-block; }

/* the article thumbnails on the Information Library carry a .hoverZoomLink
   class the CMS never shipped a stylesheet for */
.hoverZoomLink {
  transition: transform .2s ease, box-shadow .2s ease;
}
a:hover > .hoverZoomLink, a:focus-visible > .hoverZoomLink {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* the footer disclaimer table was pinned at width:1063px inside a 1200px
   column, which overflowed once padding was added */
.yp-disclaimer { width: 100% !important; height: auto !important; left: auto !important; }

/* ======================================================================
   4. THE CONTACT FORM (rebuilt by fp_forms.py)
   ==================================================================== */
.yppFormWrap { max-width: 620px; margin: 0 auto; padding: 0 var(--gutter); }
.yppForm { display: block; }
.yppRow { margin: 0 0 18px; }
.yppRow label {
  display: block; margin: 0 0 6px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-weight: 600; font-size: 15px; color: var(--navy);
}
.yppRow input, .yppRow textarea {
  display: block; width: 100%;
  font: 400 16px/1.5 Montserrat, "Segoe UI", system-ui, sans-serif;
  color: var(--ink); background: #fff;
  border: 1px solid #c7ccd1; border-radius: 4px;
  padding: 11px 12px;
}
.yppRow textarea { resize: vertical; min-height: 140px; }
.yppRow input:focus, .yppRow textarea:focus { border-color: var(--blue); }
.yppReq { color: var(--red); text-decoration: none; border: 0; }
/* honeypot: off-screen rather than display:none, which some bots skip */
.yppHp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yppSubmit { margin: 24px 0 0; }
.yppBtn {
  display: inline-block; min-width: 200px; padding: 14px 28px;
  font: 700 16px/1 Montserrat, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--red); border: 0; border-radius: 4px;
  cursor: pointer; transition: background .15s ease;
}
.yppBtn:hover { background: #c8161b; }
.yppHint { margin: 16px 0 0; font-size: 15px; }
.yppMsg {
  padding: 18px 20px; margin: 0 0 24px; border-radius: 4px;
  border-left: 5px solid;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
}
.yppMsgOk { background: #eef7ee; border-color: #2e7d32; color: #1b4d1e; }
.yppMsgErr { background: #fdeded; border-color: var(--red); color: #8c1014; }

/* ======================================================================
   5. <= 1240px - make the fixed 1200px shell fluid
   The CMS design is a hard 1200px column inside 1200px-wide tables, so on a
   1024px tablet the whole page scrolled sideways. Everything here is width
   only: the multi-column tables still lay out as columns down to part 6.

   `img{max-width:100%}` is deliberately NOT at base level. The CMS writes a
   fixed width/height PAIR on its content images, and capping the width without
   releasing the height draws them squashed - at 1400px wide the three shield
   icons rendered 51x90 instead of 72x90, a 29% squeeze, because one of the
   three sits in a narrower cell. Above 1240px the layout has the room it was
   designed for and the images are left exactly as the CMS set them.
   ==================================================================== */
@media (max-width: 1240px) {
  img { max-width: 100%; }
  /* the pair moves together; the banner logo carries a height and no width, so
     releasing its height would collapse it */
  img[width][height]:not(#imgBannerLogo) { height: auto !important; }

  /* width:100%, NOT width:auto - `auto` on a <table> means shrink-to-fit, so
     the whole content column collapses to its widest child. On the contact
     page, whose only content is a 620px-capped form, that took the column to
     296px. */
  .contentTable {
    width: 100% !important;
    max-width: var(--page);
  }
  .contentTable > tbody > tr > td { padding-left: var(--gutter); padding-right: var(--gutter); }

  /* the cards panel is inset from the left with a hard `margin-left:550px`, to
     keep the firefighter in the photo behind it visible */
  .yp-cards { margin-left: 45% !important; margin-right: var(--gutter) !important; }

  /* the contact panel (396px) + map (774px) pair, and the disclaimer block */
  .yp-contactblock { width: 100% !important; }
  .yp-contactblock > tbody > tr > td:first-child { width: 40% !important; }
  .yp-contactblock iframe { width: 100% !important; }

  /* the video embeds: two 560px YouTube iframes per row on the Information
     Library, one more inside the "WHY ROSSELOT" band on the home page - so
     this cannot be scoped to .homeCell, which is the inner pages only */
  iframe[src*="youtube"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
  .yp-videos { height: auto !important; }
}

/* ======================================================================
   5b. <= 1100px - the header switches to a drawer
   The logo is 483px wide and the four nav items measure 598px; with the page
   gutters that is 1121px of header, so the desktop row runs out of room well
   before the content does. Below this the nav becomes a drawer and the header
   shrinks - un-tabling the CONTENT happens later, at 900px.
   ==================================================================== */
@media (max-width: 1100px) {
  /* the drawer locks body scroll while it is open; reserving the gutter stops
     the page jumping sideways by the scrollbar width as it opens and closes */
  html { scroll-padding-top: calc(var(--header-h-m) + 8px); scrollbar-gutter: stable; }
  .headerHeight, tr.headerHeight { height: var(--header-h-m) !important; }
  .site-header { height: var(--header-h-m); }
  .brand img { height: 40px; }

  .nav-toggle { display: inline-flex; }

  /* drawer */
  .site-nav {
    position: fixed; top: var(--header-h-m); right: 0;
    width: min(320px, 86vw); height: calc(100dvh - var(--header-h-m));
    background: var(--navy);
    padding: 8px 0 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .35);
    visibility: hidden;
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav ul { display: block; }
  .site-nav a {
    padding: 16px 24px; font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    border-left: 4px solid transparent;
  }
  .site-nav a[aria-current="page"] {
    border-bottom-color: rgba(255, 255, 255, .12);
    border-left-color: var(--red);
  }
  .nav-backdrop {
    display: block; position: fixed; inset: var(--header-h-m) 0 0 0; z-index: 999;
    background: rgba(0, 0, 0, .45);
  }
  .nav-backdrop[hidden] { display: none; }
  body.nav-open { overflow: hidden; }
}

/* ======================================================================
   6. <= 900px - un-table the layout
   A <table> will not render below its min-content width, and width:auto only
   makes it shrink-to-fit that same minimum, so every table has to become a
   block before anything else can be made to fit.
   ==================================================================== */
@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--header-h-m) + 8px); }

  .bigTable, .bigTable > tbody, .bigTable > tbody > tr, .bigTable > tbody > tr > td,
  .contentTable, .contentTable tbody, .contentTable tr, .contentTable td,
  .homeCell table, .homeCell tbody, .homeCell tr, .homeCell td,
  .footerCell table, .footerCell tbody, .footerCell tr, .footerCell td,
  .subFooter2Cell table, .subFooter2Cell tbody, .subFooter2Cell tr, .subFooter2Cell td,
  .subFooter3Cell table, .subFooter3Cell tbody, .subFooter3Cell tr, .subFooter3Cell td,
  .subFooter4Cell table, .subFooter4Cell tbody, .subFooter4Cell tr, .subFooter4Cell td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* The header row is the spacer that clears the fixed header, and its only
     child IS that fixed element - so once display:block drops the row's
     `height`, the cell measures zero and the hero slides up underneath the
     logo. The height has to move onto the CELL, and this has to out-specify
     the un-tabling rule above (both carry !important, so specificity decides:
     3 classes here against 1 there). */
  .bigTable > tbody > tr.headerHeight > td.headerCell {
    height: var(--header-h-m) !important;
    padding: 0 !important;
  }

  /* --- hero ------------------------------------------------------------ */
  .hero-home { min-height: 320px; }
  .hero-home .hero-title { font-size: 30px; }
  .hero-band { min-height: 150px; }
  .hero-band .hero-title { font-size: 34px; }
  .hero-copy { max-width: none; }

  /* --- the CMS's inset rails ------------------------------------------ */
  /* FlexSite insets a panel with fixed-width spacer cells either side of the
     copy. Un-tabled those become full-width empty blocks, so the text ends up
     flush against the panel edge - collapse them and give the panel its own
     padding, matching the page gutter so the copy lines up with the rest. */
  .homeCell td:empty, .footerCell td:empty,
  .subFooter4Cell td:empty { display: none !important; }

  .contentTable > tbody > tr > td,
  .homeCell > table > tbody > tr > td { padding-left: var(--gutter); padding-right: var(--gutter); }

  /* --- "WHY DOES A PREPLAN WORK?" -------------------------------------- */
  .subFooter2Cell { padding: 32px 0; }
  .subFooter2Cell h2 { text-align: center !important; font-size: 26px; line-height: 1.15; }
  .yp-cards { margin: 24px 0 0 !important; }
  .yp-cards > tbody > tr > td { padding: 0 var(--gutter); }
  /* each card is its own nested table: icon cell + copy cell */
  .yp-cards td[style*="background-color: #00223c"] { padding: 16px !important; }
  .yp-cards img { width: 56px !important; }

  /* --- "WHY ROSSELOT FINANCIAL GROUP?" --------------------------------- */
  .subFooter4Cell { padding: 32px 0; }
  .subFooter4Cell h2 { font-size: 26px; line-height: 1.15; }
  .yp-why td { text-align: left !important; padding: 0 0 20px; }

  /* --- footer: contact panel + map ------------------------------------- */
  .footerCell { padding: 0 0 32px; }
  .yp-contactblock { margin-top: 0 !important; }
  /* the 40% split from part 5 has to be undone here by the SAME selector: it
     carries !important and out-specifies the un-tabling rule, so without this
     the CONTACT INFO panel stays a 40%-wide column - 134px on a phone - and
     the address wraps one word per line */
  .yp-contactblock > tbody > tr > td:first-child {
    width: auto !important;
    padding: 28px var(--gutter) !important;
  }
  .yp-contactblock iframe { width: 100% !important; height: 260px !important; }
  .yp-disclaimer td { padding: 0 var(--gutter); }

  /* --- Information Library --------------------------------------------- */
  /* the videos table is two 560px iframes per row inside a 1200px column */
  .yp-videos td { padding: 0 0 20px; }
  /* the article thumbnails are a 4-column table of 225px squares */
  .homeCell td > a > img[src*="/img/Information/"] { width: 225px !important; }
  .homeCell td[style*="width: 25%"] { padding: 0 0 28px; }

}

/* ======================================================================
   7. <= 560px - phones
   ==================================================================== */
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .brand img { height: 34px; }
  .nav-toggle-text { display: none; }
  .hero-home { min-height: 260px; }
  .hero-home .hero-title { font-size: 24px; }
  .hero-band { min-height: 120px; }
  .hero-band .hero-title { font-size: 26px; }
  .subFooter2Cell h2, .subFooter4Cell h2 { font-size: 22px; }
  .yp-contactblock td span[style*="font-size: 36px"] { font-size: 26px !important; }
  .yp-contactblock iframe { height: 220px !important; }
  .yppBtn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}