/* ==========================================================================
   Senior Flight Guide — Over 60 Travel Secrets
   Design notes: warm off-white ground (less glare than pure white), deep navy
   for trust, terracotta for warmth. Base font 20px, line-height 1.75,
   all body links underlined, minimum 48px touch targets, WCAG AA contrast.
   ========================================================================== */

:root{
  --navy:#14395e;
  --navy-dark:#0e2a46;
  --navy-soft:#e8eef5;
  --terracotta:#a8481b;
  --terracotta-dark:#8b3a15;
  --terracotta-soft:#fbeee6;
  --green:#2c6448;
  --green-soft:#e7f1ec;
  --ink:#1e2a35;
  --ink-soft:#4a5866;
  --cream:#fbf8f3;
  --card:#ffffff;
  --line:#e0d9cd;
  --line-strong:#c9c0b1;
  --focus:#b4541f;

  --font-head: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --wrap: 74rem;
  --read: 40rem;
  --radius: 10px;
  --shadow: 0 2px 4px rgba(20,57,94,.06), 0 8px 24px rgba(20,57,94,.07);
}

/* Reader-controlled text size (buttons in the header, saved in the browser) */
html{font-size:20px; scroll-behavior:smooth;}
html[data-size="large"]{font-size:23px;}
html[data-size="xlarge"]{font-size:26px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:1rem; line-height:1.75;
  -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}

h1,h2,h3,h4{font-family:var(--font-head); color:var(--navy-dark); line-height:1.25; margin:0 0 .5em;}
h1{font-size:2.1rem; letter-spacing:-.01em;}
h2{font-size:1.5rem; margin-top:2.2em;}
h3{font-size:1.2rem; margin-top:1.6em;}
p{margin:0 0 1.1em;}
a{color:var(--navy); text-underline-offset:3px; text-decoration-thickness:2px;}
a:hover{color:var(--terracotta-dark);}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px;}

.wrap{width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto;}
.narrow{width:min(100%, var(--read));}

/* ---------- Skip link ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:.8em 1.2em; z-index:100; text-decoration:none;}
.skip:focus{left:.5rem; top:.5rem;}

/* ---------- Header ---------- */
.site-head{background:var(--card); border-bottom:3px solid var(--navy); position:relative;}
.head-inner{display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding:.9rem 0; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; min-height:48px;}
.brand-mark{width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:var(--navy);
  color:#fff; display:grid; place-items:center; font-family:var(--font-head);
  font-size:1.05rem; font-weight:700; letter-spacing:.02em;}
.brand-text strong{display:block; font-family:var(--font-head); font-size:1.15rem;
  color:var(--navy-dark); line-height:1.2;}
.brand-text span{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--terracotta); font-weight:700;}

nav.main a{display:inline-block; padding:.55em .85em; margin:.15em .1em; text-decoration:none;
  font-weight:600; color:var(--navy-dark); border-radius:8px; min-height:48px; line-height:2;}
nav.main a:hover,nav.main a:focus{background:var(--navy-soft);}
nav.main a[aria-current="page"]{background:var(--navy); color:#fff;}

.textsize{display:flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--ink-soft);}
.textsize button{min-width:44px; min-height:44px; border:2px solid var(--line-strong);
  background:var(--card); color:var(--navy-dark); border-radius:8px; cursor:pointer;
  font-family:var(--font-head); font-weight:700; padding:0 .5em;}
.textsize button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy);}
.textsize button:nth-of-type(1){font-size:.85rem;}
.textsize button:nth-of-type(2){font-size:1.05rem;}
.textsize button:nth-of-type(3){font-size:1.25rem;}

/* ---------- Buttons ---------- */
.btn{display:inline-block; background:var(--terracotta); color:#fff; text-decoration:none;
  font-weight:700; padding:.85em 1.6em; border-radius:var(--radius); border:2px solid var(--terracotta);
  min-height:48px; font-size:1.02rem;}
.btn:hover,.btn:focus{background:var(--terracotta-dark); border-color:var(--terracotta-dark); color:#fff;}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-ghost:hover,.btn-ghost:focus{background:var(--navy); color:#fff;}
.btn-yt{background:#c4302b; border-color:#c4302b;}
.btn-yt:hover,.btn-yt:focus{background:#a32623; border-color:#a32623;}

/* ---------- Hero ---------- */
.hero{background:var(--navy); color:#fff;}
.hero-grid{display:grid; gap:2rem; align-items:center; padding:2.6rem 0 2.8rem;}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr; gap:3rem; padding:3.4rem 0;}}
.hero h1{color:#fff; font-size:2.35rem;}
.hero p.lede{font-size:1.12rem; color:#dfe8f1; margin-bottom:1.5em;}
.hero .eyebrow{display:inline-block; background:rgba(255,255,255,.14); color:#fff;
  padding:.35em 1em; border-radius:99px; font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.2em;}
.hero-figure img{border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.3);}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem;}

/* ---------- Sections ---------- */
section{padding:2.8rem 0;}
.section-head{max-width:44rem; margin-bottom:1.8rem;}
.section-head h2{margin-top:0; font-size:1.75rem;}
.section-head p{color:var(--ink-soft); font-size:1.04rem;}
.band{background:var(--card); border-block:1px solid var(--line);}
.band-soft{background:var(--navy-soft);}

/* ---------- Pain points ---------- */
.pains{display:grid; gap:1.1rem;}
@media(min-width:640px){.pains{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.pains{grid-template-columns:repeat(3,1fr);}}
.pain{background:var(--card); border:1px solid var(--line); border-left:6px solid var(--terracotta);
  border-radius:var(--radius); padding:1.4rem 1.4rem 1.1rem;}
.pain h3{margin:0 0 .4em; font-size:1.14rem;}
.pain p{margin:0 0 .9em; color:var(--ink-soft); font-size:.95rem;}
.pain .fix{display:block; font-weight:700; font-size:.95rem;}

/* ---------- Cards ---------- */
.cards{display:grid; gap:1.6rem; list-style:none; padding:0; margin:0;}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr);}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);}
.card img{aspect-ratio:16/9; object-fit:cover; width:100%;}
.card-body{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1;}
.card h3{margin:0 0 .45em; font-size:1.17rem;}
.card h3 a{text-decoration:none; color:var(--navy-dark);}
.card h3 a:hover,.card h3 a:focus{text-decoration:underline; color:var(--terracotta-dark);}
.card p{font-size:.94rem; color:var(--ink-soft); margin:0 0 1em;}
.card .more{margin-top:auto; font-weight:700; font-size:.95rem;}
.tag{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--terracotta); margin-bottom:.6em;}

/* ---------- Article ---------- */
.crumbs{font-size:.85rem; color:var(--ink-soft); padding:1rem 0 0;}
.crumbs a{color:var(--ink-soft);}
.article-head{padding:1rem 0 1.6rem;}
.article-head h1{max-width:24ch; font-size:2.2rem;}
.article-head .standfirst{font-size:1.1rem; color:var(--ink-soft); max-width:var(--read);}
.byline{font-size:.85rem; color:var(--ink-soft); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:.7em 0; margin:1.4em 0 0;
  display:flex; flex-wrap:wrap; gap:.4em 1.4em;}
.article-body{max-width:var(--read); margin-inline:auto; font-size:1.03rem;}
.article-body h2{scroll-margin-top:1rem;}
.article-body ul,.article-body ol{padding-left:1.3em; margin:0 0 1.3em;}
.article-body li{margin-bottom:.6em;}
.article-body ul{list-style:none; padding-left:0;}
.article-body ul li{position:relative; padding-left:1.7em;}
.article-body ul li::before{content:"✓"; position:absolute; left:0; top:0;
  color:var(--green); font-weight:700;}
.article-body ol li::marker{font-weight:700; color:var(--navy);}
figure{margin:2rem 0; max-width:var(--read);}
figure img{border-radius:var(--radius); box-shadow:var(--shadow);}
figcaption{font-size:.85rem; color:var(--ink-soft); padding-top:.6em; font-style:italic;}

/* Quick answer box — the GEO / AI-answer summary */
.answer{background:var(--green-soft); border:1px solid #bcd6c8; border-left:6px solid var(--green);
  border-radius:var(--radius); padding:1.3rem 1.4rem; margin:0 0 2rem; max-width:var(--read);}
.answer h2{margin:0 0 .4em; font-size:1.05rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--green); font-family:var(--font-body);}
.answer p{margin:0; font-size:1.05rem;}

/* Table of contents */
.toc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin:0 0 2.2rem; max-width:var(--read);}
.toc h2{margin:0 0 .5em; font-size:1rem; text-transform:uppercase; letter-spacing:.09em;
  font-family:var(--font-body); color:var(--ink-soft);}
.toc ol{margin:0; padding-left:1.3em;}
.toc li{margin-bottom:.35em;}

/* Tables */
.table-scroll{overflow-x:auto; margin:0 0 1.8em; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card);}
table{border-collapse:collapse; width:100%; font-size:.95rem; min-width:34rem;}
th,td{text-align:left; padding:.85em 1em; border-bottom:1px solid var(--line); vertical-align:top;}
thead th{background:var(--navy); color:#fff; font-family:var(--font-body); font-weight:700;
  font-size:.9rem;}
tbody tr:nth-child(even){background:#faf7f2;}
tbody tr:last-child td{border-bottom:none;}

/* Video block */
.video-block{background:var(--navy); color:#fff; border-radius:var(--radius);
  padding:1.4rem; margin:2.4rem 0; max-width:var(--read);}
.video-block h2{color:#fff; margin:0 0 .3em; font-size:1.2rem;}
.video-block p{color:#d7e2ee; font-size:.92rem; margin:0 0 1rem;}
.yt-facade{position:relative; display:block; aspect-ratio:16/9; border-radius:8px;
  overflow:hidden; background:#000; border:0; padding:0; cursor:pointer; width:100%;}
.yt-facade img{width:100%; height:100%; object-fit:cover; opacity:.82;}
.yt-facade:hover img,.yt-facade:focus img{opacity:1;}
.yt-play{position:absolute; inset:0; display:grid; place-items:center;}
.yt-play span{display:block; width:76px; height:54px; border-radius:12px; background:#c4302b;
  position:relative; box-shadow:0 4px 16px rgba(0,0,0,.4);}
.yt-play span::after{content:""; position:absolute; top:50%; left:50%;
  transform:translate(-42%,-50%); border-style:solid; border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent #fff;}
.yt-facade iframe{width:100%; height:100%; border:0;}

/* Callouts */
.note{background:var(--terracotta-soft); border:1px solid #eccdb8; border-left:6px solid var(--terracotta);
  border-radius:var(--radius); padding:1.1rem 1.3rem; margin:2rem 0; max-width:var(--read); font-size:.96rem;}
.note strong{color:var(--terracotta-dark);}
.note p:last-child{margin-bottom:0;}

/* FAQ */
.faq{max-width:var(--read); margin-inline:auto;}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.8rem; overflow:hidden;}
.faq summary{cursor:pointer; padding:1em 1.2em; font-weight:700; font-family:var(--font-head);
  font-size:1.06rem; color:var(--navy-dark); min-height:48px; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--terracotta); line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq summary:hover{background:var(--navy-soft);}
.faq .answer-body{padding:0 1.2em 1.1em; color:var(--ink-soft);}
.faq .answer-body p{margin:0;}

/* Sources */
.sources{max-width:var(--read); margin:2.6rem auto 0; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem;}
.sources h2{margin:0 0 .5em; font-size:1.05rem;}
.sources ul{margin:0; padding-left:1.2em; font-size:.92rem;}
.sources li{margin-bottom:.5em;}
.updated{font-size:.85rem; color:var(--ink-soft); margin-top:1em;}

/* Related */
.related{max-width:var(--read); margin:2.4rem auto 0;}
.related h2{font-size:1.2rem; margin-top:0;}
.related ul{list-style:none; padding:0; margin:0;}
.related li{border-bottom:1px solid var(--line);}
.related li:last-child{border-bottom:none;}
.related a{display:block; padding:.9em 0; font-weight:700; text-decoration:none; min-height:48px;}
.related a:hover,.related a:focus{color:var(--terracotta-dark); text-decoration:underline;}
.related a small{display:block; font-weight:400; color:var(--ink-soft); font-size:.85rem;}

/* ---------- Forms ---------- */
.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow); max-width:38rem;}
.field{margin-bottom:1.4rem;}
.field label{display:block; font-weight:700; margin-bottom:.4em; color:var(--navy-dark);}
.field .hint{display:block; font-weight:400; font-size:.85rem; color:var(--ink-soft); margin-bottom:.5em;}
.field input,.field textarea,.field select{
  width:100%; font-family:inherit; font-size:1rem; padding:.75em .9em;
  border:2px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--ink);
  min-height:52px;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy); outline:3px solid var(--focus); outline-offset:1px;}
.field textarea{min-height:11rem; resize:vertical;}
.required{color:var(--terracotta-dark);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-note{font-size:.85rem; color:var(--ink-soft);}

/* ---------- Legal / long text pages ---------- */
.legal{max-width:var(--read); margin-inline:auto;}
.legal h2{font-size:1.35rem;}
.legal h3{font-size:1.08rem;}
.legal ul{padding-left:1.3em;}
.legal li{margin-bottom:.5em;}

/* ---------- Footer ---------- */
.site-foot{background:var(--navy-dark); color:#c9d7e5; margin-top:3rem; padding:2.6rem 0 2rem;
  font-size:.92rem;}
.site-foot h2{color:#fff; font-size:1.05rem; margin:0 0 .7em;}
.foot-grid{display:grid; gap:2rem;}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.site-foot a{color:#fff;}
.site-foot ul{list-style:none; padding:0; margin:0;}
.site-foot li{margin-bottom:.55em;}
.site-foot li a{text-decoration:none;}
.site-foot li a:hover,.site-foot li a:focus{text-decoration:underline; color:#f4c9ab;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18); margin-top:2rem; padding-top:1.3rem;
  font-size:.85rem; color:#a9bccd; display:flex; flex-wrap:wrap; gap:.6em 1.5em; justify-content:space-between;}

/* ---------- Utility ---------- */
.center{text-align:center;}
.mt2{margin-top:2rem;}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;}
.cat-block{margin-bottom:3rem;}
.cat-block > h2{border-bottom:3px solid var(--terracotta); display:inline-block;
  padding-bottom:.15em; margin-bottom:1.4rem;}

@media print{
  .site-head,.site-foot,.video-block,.textsize,.toc{display:none;}
  body{background:#fff; font-size:12pt;}
  a::after{content:" (" attr(href) ")"; font-size:9pt; color:#555;}
}

/* ==========================================================================
   Small screens — keep the header compact so content starts sooner,
   without losing the large tap targets.
   ========================================================================== */
@media (max-width:46rem){
  html{font-size:19px;}
  .head-inner{padding:.55rem 0; gap:.5rem 1rem;}
  .brand{gap:.55rem;}
  .brand-mark{width:38px; height:38px; flex-basis:38px; font-size:.85rem;}
  .brand-text strong{font-size:1rem;}
  .brand-text span{font-size:.6rem; letter-spacing:.1em;}
  nav.main{order:3; width:100%; display:flex; flex-wrap:wrap; gap:.15rem;
           border-top:1px solid var(--line); padding-top:.35rem; margin-top:.15rem;}
  nav.main a{flex:1 1 auto; text-align:center; padding:.5em .4em; font-size:.92rem;
             line-height:1.6; min-height:44px; display:flex; align-items:center; justify-content:center;}
  .textsize{font-size:.72rem; gap:.25rem;}
  .textsize span[aria-hidden]{display:none;}
  .textsize button{min-width:44px; min-height:44px;}
  .textsize::before{content:"Text"; color:var(--ink-soft); font-size:.72rem;}

  h1{font-size:1.7rem;}
  .hero h1{font-size:1.8rem;}
  .article-head h1{font-size:1.75rem;}
  .hero p.lede{font-size:1.02rem;}
  h2{font-size:1.32rem;}
  .section-head h2{font-size:1.45rem;}
  section{padding:2rem 0;}
  .hero-grid{padding:1.8rem 0 2rem;}
  .form-card{padding:1.3rem;}
  .answer,.toc,.sources,.note,.video-block{padding:1.1rem;}
  .wrap{width:min(100% - 1.8rem, var(--wrap));}
  .site-foot li a{display:block; padding:.5em 0;}
  .sources li,.toc li{padding:.15em 0;}
}

/* Larger screens: keep the reading column comfortable but not stretched */
@media (min-width:1500px){
  :root{--read:42rem;}
}

/* The check-mark bullets belong to the article prose only — not to the
   navigation, source and FAQ lists that also sit inside .article-body. */
.article-body .related ul,
.article-body .sources ul,
.article-body .toc ol,
.article-body .faq ul{list-style:none;}
.article-body .related ul li,
.article-body .sources ul li,
.article-body .toc ol li{padding-left:0; position:static;}
.article-body .related ul li::before,
.article-body .sources ul li::before,
.article-body .toc ol li::before{content:none;}
.article-body .sources ul{list-style:disc; padding-left:1.3em;}
.article-body .sources ul li{padding-left:.2em;}
.article-body .sources li::marker{color:var(--terracotta);}