/* ═══════════════════════════════════════════════════════════════
   Yellow Ribbon Insurance — shared site shell (header, footer, fonts)
   One file for every page. All classes are yr- prefixed so page
   styles can't collide with them.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Funnel Display';
  src: url(/fonts/funnel-display-latin-wght-normal.woff2) format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Funnel Sans';
  src: url(/fonts/funnel-sans-latin-wght-normal.woff2) format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  --yr-navy: #0B1F3A;
  --yr-navy-mid: #142B52;
  --yr-navy-light: #1E3A6E;
  --yr-gold: #F5C518;
  --yr-gold-dark: #D4A017;
  --yr-gold-text: #8C6A00;
  --yr-mist: #F0F4F8;
  --yr-line: #D8DEE7;
  --yr-muted: #6B7280;
  --yr-display: 'Funnel Display', ui-sans-serif, system-ui, sans-serif;
  --yr-sans: 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --yr-gutter: clamp(16px, 4vw, 56px);
}

/* Sticky header needs a non-scrolling root; "clip" keeps horizontal overflow hidden without breaking sticky */
html, body { overflow-x: clip !important; }
body { font-family: var(--yr-sans); -webkit-font-smoothing: antialiased; }

.yr-ribbon, .yr-header, .yr-mobile-menu, .yr-footer, .yr-sticky { font-family: var(--yr-sans); line-height: 1.5; }
.yr-header *, .yr-mobile-menu *, .yr-footer *, .yr-sticky * { box-sizing: border-box; margin: 0; padding: 0; }
.yr-header a, .yr-mobile-menu a, .yr-footer a, .yr-sticky a { text-decoration: none; color: inherit; }
.yr-header ul, .yr-footer ul { list-style: none; }
.yr-header button, .yr-mobile-menu button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.yr-header svg, .yr-footer svg, .yr-sticky svg, .yr-mobile-menu svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.yr-header :focus-visible, .yr-mobile-menu :focus-visible, .yr-footer :focus-visible, .yr-sticky :focus-visible { outline: 3px solid var(--yr-gold); outline-offset: 2px; border-radius: 6px; }

.yr-wrap { width: 100%; max-width: calc(1312px + var(--yr-gutter) * 2); margin: 0 auto; padding: 0 var(--yr-gutter); }

/* ── Brand lockup ── */
.yr-brand { display: inline-flex; align-items: center; gap: 12px; }
.yr-brand img { width: 44px; height: 44px; display: block; }
.yr-wordmark { font-family: var(--yr-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--yr-navy); white-space: nowrap; }
.yr-wordmark span { font-weight: 400; color: var(--yr-muted); }

/* ── Buttons ── */
.yr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 11px; font-family: var(--yr-sans); font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; transition: background-color .15s, transform .15s, border-color .15s; }
.yr-btn:hover { transform: translateY(-1px); }
.yr-btn-navy { background: var(--yr-navy); color: #fff !important; }
.yr-btn-navy:hover { background: var(--yr-navy-light); }
.yr-btn-navy svg { color: var(--yr-gold); width: 16px; height: 16px; }
.yr-btn-ghost { border: 1px solid var(--yr-line); color: var(--yr-navy) !important; background: #fff; }
.yr-btn-ghost:hover { border-color: var(--yr-navy); }
.yr-btn-gold { background: var(--yr-gold); color: var(--yr-navy) !important; box-shadow: 0 8px 24px rgba(245,197,24,.28); }
.yr-btn-gold:hover { background: #FFD43B; }
.yr-btn-outline-light { border: 1px solid rgba(255,255,255,.3); color: #fff !important; }
.yr-btn-outline-light:hover { border-color: #fff; }

/* ── Header ── */
.yr-ribbon { height: 6px; background: var(--yr-gold); }
.yr-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.95); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(11,31,58,.06); }
.yr-header-inner { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.yr-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; color: var(--yr-navy-mid); }
.yr-nav > a, .yr-dd-trigger { padding: 8px 0; transition: color .15s; }
.yr-nav > a:hover, .yr-dd-trigger:hover, .yr-nav a[aria-current="page"] { color: var(--yr-gold-text); }
.yr-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--yr-gold); }
.yr-dd { position: relative; }
.yr-dd-trigger { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 15px; color: var(--yr-navy-mid) !important; }
.yr-dd-trigger svg { width: 14px; height: 14px; stroke-width: 2.4; transition: transform .2s; }
.yr-dd-menu { position: absolute; top: calc(100% + 8px); left: -16px; min-width: 230px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--yr-line); box-shadow: 0 20px 50px rgba(11,31,58,.14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .18s ease; }
.yr-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.yr-dd-menu a { display: block; padding: 10px 14px; border-radius: 9px; color: var(--yr-navy); font-weight: 600; }
.yr-dd-menu a:hover { background: var(--yr-mist); }
.yr-dd:hover .yr-dd-menu, .yr-dd:focus-within .yr-dd-menu, .yr-dd.open .yr-dd-menu { opacity: 1; visibility: visible; transform: none; }
.yr-dd.open .yr-dd-trigger svg { transform: rotate(180deg); }
.yr-actions { display: flex; align-items: center; gap: 10px; }
.yr-burger { display: none; width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--yr-line) !important; background: #fff !important; align-items: center; justify-content: center; color: var(--yr-navy) !important; }
.yr-burger svg { width: 22px; height: 22px; }
.yr-burger .yr-i-close { display: none; }
.yr-burger[aria-expanded="true"] .yr-i-open { display: none; }
.yr-burger[aria-expanded="true"] .yr-i-close { display: block; }

/* ── Mobile menu ── */
.yr-mobile-menu { display: none; position: fixed; left: 0; right: 0; top: 86px; bottom: 0; z-index: 999; background: #fff; padding: 8px var(--yr-gutter) 120px; overflow-y: auto; border-top: 1px solid var(--yr-line); }
.yr-mobile-menu.open { display: block; }
.yr-mob-label { display: block; margin: 18px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yr-gold-text); }
.yr-mobile-menu a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--yr-mist); font-weight: 600; font-size: 17px; color: var(--yr-navy); }
.yr-mob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.yr-mobile-menu .yr-btn { display: flex; width: 100%; margin-top: 20px; min-height: 54px; font-size: 16px; border-bottom: 0; }

/* ── Footer ── */
.yr-footer { background: var(--yr-navy); color: rgba(255,255,255,.7); padding: 72px 0 40px; font-size: 15px; }
.yr-footer .yr-wordmark { color: #fff; font-size: 21px; }
.yr-footer .yr-wordmark span { color: rgba(255,255,255,.6); }
.yr-footer-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.yr-footer-cta-title { font-family: var(--yr-display); font-weight: 700; font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; }
.yr-footer-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.yr-footer-cta .yr-btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
.yr-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding: 56px 0; }
.yr-footer-desc { max-width: 320px; margin-top: 16px !important; line-height: 1.7; }
.yr-footer-col { display: flex; flex-direction: column; gap: 10px; }
.yr-footer-head { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yr-gold); margin-bottom: 4px !important; }
.yr-footer-col a:hover, .yr-footer-bottom a:hover { color: var(--yr-gold); }
.yr-footer-phone { color: #fff !important; font-weight: 700; }
.yr-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.yr-footer-bottom a { text-decoration: underline !important; text-underline-offset: 3px; }
.yr-footer-vet { color: var(--yr-gold); font-weight: 700; }

/* ── Sticky mobile call bar ── */
.yr-sticky { display: none; }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .yr-nav, .yr-actions .yr-btn-ghost { display: none; }
  .yr-burger { display: inline-flex; }
}
@media (max-width: 1024px) {
  .yr-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yr-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .yr-footer-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .yr-ribbon { height: 5px; }
  .yr-header-inner { height: 64px; }
  .yr-mobile-menu { top: 69px; }
  .yr-brand { gap: 10px; }
  .yr-brand img { width: 38px; height: 38px; }
  .yr-header .yr-wordmark { font-size: 19px; }
  .yr-actions .yr-btn-navy { display: none; }
  .yr-footer-cta-btns { width: 100%; }
  .yr-footer-cta .yr-btn { flex: 1 1 auto; }
  .yr-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  html:not(.yr-no-sticky) body { padding-bottom: 76px; }
  html:not(.yr-no-sticky) .yr-sticky { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; height: 72px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--yr-navy); border-top: 3px solid var(--yr-gold); }
  .yr-sticky a { display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; font-size: 16px; }
  .yr-sticky-call { border: 1px solid rgba(255,255,255,.25); color: var(--yr-gold) !important; }
  .yr-sticky-call svg { width: 20px; height: 20px; stroke-width: 2.2; }
  .yr-sticky-quote { background: var(--yr-gold); color: var(--yr-navy) !important; }
}
@media (max-width: 380px) {
  .yr-header .yr-wordmark span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yr-header *, .yr-footer *, .yr-mobile-menu * { transition: none !important; }
}

/* guides: text cards linking the insurance-advice articles (homepage + service pages) */
.yr-guides { background: #F7F5F0; padding: 90px 8%; }
.yr-guides-inner { max-width: 1160px; margin: 0 auto; }
.yr-guides .section-title { margin-bottom: 36px; }
.yr-guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.yr-guide { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #FFFFFF; border: 1px solid #E5E9EF; border-top: 3px solid #F5C518; border-radius: 16px; color: #0B1F3A; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.yr-guide:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,31,58,.1); }
.yr-guide-meta { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8C6A00; }
.yr-guide h3 { font-size: 19px; line-height: 1.3; margin: 0; color: #0B1F3A; }
.yr-guide p { font-size: 15px; line-height: 1.55; margin: 0; color: #4B5563; flex: 1; }
.yr-guide-more { font-size: 14px; font-weight: 700; color: #0B1F3A; }
.yr-guide:hover .yr-guide-more { color: #8C6A00; }
.yr-guides-row { margin: 22px 0 0; font-size: 15px; line-height: 1.8; color: #4B5563; }
.yr-guides-row strong { color: #0B1F3A; margin-right: 4px; }
.yr-guides-row a { color: #0B1F3A; text-decoration: underline; text-underline-offset: 3px; }
.yr-guides-all { display: inline-block; margin-top: 22px; font-weight: 700; color: #0B1F3A; text-decoration: none; border-bottom: 2px solid #F5C518; }
@media (max-width: 900px) { .yr-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yr-guides { padding: 64px 5%; } .yr-guides-grid { grid-template-columns: 1fr; } }