/* ===========================================================
   Rosgorm Cottage - Islay guide pages
   Reusable components for evergreen visitor guides.
   Loaded after style.css; everything is scoped to .guide
   so the home page is unaffected.
   =========================================================== */

/* Accessible colour overrides (WCAG AA on white and tint) */
.guide{--g-text:#4d4d46;--g-muted:#66665e;--g-link:#5f6d4c;--g-btn:#5f6d4c;--g-btn-hover:#4b5a3c;}
.guide a{color:var(--g-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.guide a:hover{color:var(--heather-dark);}
.guide .btn{background:var(--g-btn);color:#fff;text-decoration:none;}
.guide .btn:hover{background:var(--g-btn-hover);color:#fff;}
.guide .btn-ghost{background:#fff;color:var(--g-btn);border:1px solid var(--g-btn);}
.guide .btn-ghost:hover{background:var(--g-btn);color:#fff;}
.guide .eyebrow{color:var(--g-link);}
.guide p,.guide li{color:var(--g-text);}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--green-head);padding:10px 16px;border:2px solid var(--green-head);}
.skip-link:focus{left:12px;top:12px;}

/* Breadcrumbs */
.breadcrumbs{font-size:.8rem;color:var(--g-muted);padding-top:18px;}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.breadcrumbs li{color:var(--g-muted);}
.breadcrumbs li+li::before{content:"/";margin-right:6px;color:var(--line);}
.breadcrumbs [aria-current]{color:var(--g-text);}

/* Guide hero: image with overlapping card */
.guide-hero{position:relative;max-width:var(--max);margin:18px auto 0;padding:0 28px;}
.guide-hero picture img{width:100%;height:auto;aspect-ratio:1600/1067;max-height:560px;object-fit:cover;border-radius:4px;}
.guide-hero-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 18px 50px rgba(60,65,45,.14);padding:40px 44px;max-width:640px;margin:-120px 0 0 44px;}
.guide-hero-card h1{margin:0;font-size:clamp(2.3rem,4.4vw,3.3rem);}
.guide-hero-card .lede{font-size:1.06rem;margin:0 0 1.2rem;}
.guide-meta{font-size:.8rem;color:var(--g-muted);margin:0 0 1.2rem;}
.guide-hero .hero-btns{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:760px){
  .guide-hero{padding:0;}
  .guide-hero picture img{border-radius:0;max-height:320px;}
  .guide-hero-card{margin:-40px 16px 0;padding:28px 22px;}
}

/* Body layout */
.guide-body{padding:56px 0 20px;}
.guide-body h2{margin-top:3.2rem;scroll-margin-top:100px;}
.guide-body h2:first-child{margin-top:0;}
.guide-body h3{scroll-margin-top:100px;}
.guide-body ul,.guide-body ol{padding-left:1.25rem;margin:0 0 1.2rem;}
.guide-body li{margin-bottom:.45rem;}
.guide-body figure{margin:2rem 0;}
.guide-body figure img{width:100%;height:auto;border-radius:4px;}
.guide-body figcaption{font-size:.82rem;color:var(--g-muted);margin-top:.5rem;}

/* At-a-glance box */
.glance{background:var(--tint);border-left:3px solid var(--sage-deep);padding:26px 30px;border-radius:3px;margin:0 0 2.4rem;}
.glance h2{font-size:1.6rem;margin:0 0 .8rem;}
.glance dl{margin:0;display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:10px 22px;}
.glance dt{font-weight:500;color:var(--green-head);}
.glance dd{margin:0;color:var(--g-text);}
@media (max-width:560px){.glance dl{grid-template-columns:1fr;gap:2px;}.glance dd{margin-bottom:10px;}}

/* Table of contents */
.toc{border:1px solid var(--line);border-radius:4px;padding:22px 28px;margin:0 0 2.6rem;}
.toc h2{font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-muted);margin:0 0 .8rem;font-weight:500;}
.toc ol{columns:2;column-gap:36px;margin:0;padding-left:1.1rem;}
.toc li{break-inside:avoid;margin-bottom:.35rem;font-size:.95rem;}
@media (max-width:640px){.toc ol{columns:1;}}

/* Species / site cards */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:1.4rem 0 2rem;}
.info-card{border:1px solid var(--line);border-radius:4px;padding:22px 24px;background:#fff;}
.info-card h3{margin:0 0 .4rem;font-size:1.3rem;}
.info-card p{margin:0 0 .6rem;font-size:.95rem;}
.info-card p:last-child{margin-bottom:0;}
.info-card .tag{display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g-link);margin-bottom:.4rem;}
@media (max-width:700px){.info-grid{grid-template-columns:1fr;}}

/* Place list */
.place{border-top:1px solid var(--line);padding:20px 0 6px;}
.place h3{margin:0 0 .35rem;}
.place .facts{font-size:.86rem;color:var(--g-muted);margin-bottom:.6rem;}

/* Seasonal table (extends .rates) */
.season-table{min-width:560px;}
.guide .rates th{color:var(--g-muted);}
.season-table th[scope=row]{font-weight:500;color:var(--green-head);text-transform:none;letter-spacing:0;font-size:.95rem;white-space:nowrap;vertical-align:top;}
.season-table td{vertical-align:top;color:var(--g-text);}
.table-wrap:focus-visible{outline:2px solid var(--green-head);outline-offset:2px;}

/* Callout */
.callout{background:#fff;border:1px solid var(--line);border-top:3px solid var(--heather);border-radius:3px;padding:24px 28px;margin:1.6rem 0 2rem;}
.callout h3{margin-top:0;}
.callout ul{margin-bottom:0;}

/* Inline and banner CTAs */
.cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  background:var(--tint);border-radius:4px;padding:22px 26px;margin:2.2rem 0;}
.cta-inline p{margin:0;font-family:var(--serif);font-size:1.35rem;color:var(--green-head);line-height:1.3;max-width:34ch;}
.cta-band{background:var(--forest);color:#fff;text-align:center;padding:64px 0;margin-top:40px;}
.cta-band h2{color:#fff;margin:0 0 .6rem;}
.cta-band p{color:#eef1e7;max-width:620px;margin:0 auto 1.6rem;}
.cta-band .btn{background:#fff;color:var(--forest);}
.cta-band .btn:hover{background:var(--cream);color:var(--forest-dark);}
.cta-band a:not(.btn){color:#fff;}

/* Rosgorm base section */
.stay-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin:1.2rem 0 1rem;}
.stay-split picture img{width:100%;height:auto;border-radius:4px;}
@media (max-width:760px){.stay-split{grid-template-columns:1fr;gap:20px;}}
.note{font-size:.9rem;color:var(--g-muted);}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:4px 0;}
.faq details:first-of-type{border-top:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;
  font-family:var(--serif);font-size:1.3rem;color:var(--green-head);line-height:1.3;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-family:var(--sans);font-size:1.5rem;color:var(--g-link);}
.faq details[open] summary::after{content:"\2212";}
.faq details>div{padding:0 0 12px;}

/* Sources */
.sources{font-size:.86rem;}
.sources li{color:var(--g-muted);margin-bottom:.5rem;word-break:break-word;}
.reviewed{font-size:.86rem;color:var(--g-muted);border-top:1px solid var(--line);padding-top:16px;margin-top:2rem;}

/* Visible keyboard focus (guide pages) */
.guide a:focus-visible,.guide button:focus-visible,.guide summary:focus-visible,
.guide .btn:focus-visible{outline:3px solid var(--heather-dark);outline-offset:3px;border-radius:2px;}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ---------- Added for the family guide ---------- */
/* Two-column "suits / think twice" decision panel */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:1.4rem 0 2rem;}
.fit>div{border:1px solid var(--line);border-radius:4px;padding:22px 24px;background:#fff;}
.fit h3{margin:0 0 .6rem;font-size:1.3rem;}
.fit ul{margin:0;padding-left:1.1rem;}
.fit .fit-yes{border-top:3px solid var(--sage-deep);}
.fit .fit-check{border-top:3px solid var(--heather);}
@media (max-width:700px){.fit{grid-template-columns:1fr;}}

/* Day-by-day plan: a real sequence, so numbered */
.days{list-style:none;padding:0;margin:1.4rem 0 2rem;counter-reset:day;display:grid;gap:14px;}
.days li{counter-increment:day;border-left:3px solid var(--sage);padding:4px 0 4px 20px;margin:0;}
.days h3{margin:0 0 .3rem;font-size:1.25rem;}
.days h3::before{content:"Day " counter(day) ": ";color:var(--g-link);}
.days p{margin:0;}

/* Two images side by side (stacks on small screens) */
.figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:2rem 0;}
.figure-pair figure{margin:0;}
.place figure{margin:1rem 0 .4rem;}
@media (max-width:760px){.figure-pair{grid-template-columns:1fr;}}