/* ============================================================
   guides.css — guest-guide components for the Villa pack
   Sits ON TOP of personal.css. Adds nothing to the palette:
   every colour here is a personal.css token.
   ============================================================ */

/* ---- top bar additions ---- */
.topbar nav{display:flex;align-items:center;gap:10px}
.langswitch{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.langswitch a{font-size:12.5px;font-weight:600;padding:5px 11px;text-decoration:none;color:var(--muted);line-height:1}
.langswitch a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.langswitch a:hover:not([aria-current="true"]){color:var(--ink)}

/* ---- page head ---- */
.pagehead{padding:34px 0 6px}
.eyebrow{font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}

/* ---- key facts strip ---- */
.factbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:26px 0}
.fact{padding:14px 16px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact .k{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fact .k .ico{font-size:16px}
.fact .v{font-family:var(--font-head);font-weight:700;font-size:1.06rem;line-height:1.25}
.fact .v small{display:block;font-family:var(--font-body);font-weight:400;font-size:.8rem;color:var(--muted)}
@media (max-width:560px){.fact{border-right:0;border-bottom:1px solid var(--line)}.fact:last-child{border-bottom:0}}

/* ---- jump nav ---- */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;padding:0;list-style:none}
.toc a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;text-decoration:none;
  color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;line-height:1}
.toc a:hover{border-color:var(--ink);background:var(--hi)}
.toc .ico{font-size:17px}

/* ---- sections ---- */
.sec{scroll-margin-top:70px;padding-top:8px}
.sec>h2{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sec>h2 .ico{font-size:26px}

/* ---- asides ---- */
.note,.warn{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:1.3em 0;
  display:flex;gap:12px;align-items:flex-start}
.note .ico,.warn .ico{flex:none;font-size:22px;margin-top:1px}
.warn{border-color:var(--mac-orange)}
.warn .ico{color:var(--mac-orange)}
.note .ico{color:var(--mac-blue)}
.note p:last-child,.warn p:last-child{margin-bottom:0}

/* ---- checklists ---- */
.checklist{list-style:none;padding:0;margin:1em 0}
.checklist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist li::before{content:"check_box_outline_blank";font-family:var(--font-icon);font-size:20px;
  line-height:1.3;color:var(--muted);flex:none}

/* ---- steps ---- */
.steps{counter-reset:s;list-style:none;padding:0;margin:1em 0}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 40px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;
  display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:999px;
  font-family:var(--font-head);font-weight:700;font-size:13px}

/* ---- contact placeholder (details deliberately not on the page) ---- */
.contact-hold{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:16px 18px;margin:1.3em 0}
.contact-hold .k{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;
  font-size:1.02rem;margin-bottom:4px}
.hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1em 0 0}
.host{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.host .n{font-family:var(--font-head);font-weight:700;font-size:1.02rem}
.host .l{font-size:.85rem;color:var(--muted)}

/* ---- photo slots: images were never copied out of the export ---- */
.photo{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:11px 14px;margin:1.1em 0;
  display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.88rem}
.photo .ico{font-size:19px;flex:none}

/* ---- rules ---- */
.rules{counter-reset:r;list-style:none;padding:0;margin:1em 0}
.rules li{counter-increment:r;position:relative;padding:11px 0 11px 42px;border-bottom:1px solid var(--line)}
.rules li:last-child{border-bottom:0}
.rules li::before{content:counter(r);position:absolute;left:0;top:11px;width:28px;height:28px;
  display:grid;place-items:center;background:var(--ink);color:var(--bg);border-radius:999px;
  font-family:var(--font-head);font-weight:700;font-size:13px}
.rules b{font-family:var(--font-head)}

/* ---- directory (emergency numbers etc.) ---- */
.dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 22px;margin:1em 0}
.dir div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.dir .n{font-weight:500}
.dir .t{font-family:var(--font-mono);font-size:.9em;white-space:nowrap}

/* ---- cards on the hub page ---- */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:26px 0}
.hub a.card{text-decoration:none;color:var(--ink);display:block;transition:border-color .15s}
.hub a.card:hover{border-color:var(--ink)}
.hub .card .ico{font-size:30px;margin-bottom:8px;display:block}
.hub .card h3{margin:0 0 5px;font-size:1.14rem}
.hub .card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}

/* ---- footer ---- */
.foot{margin:60px 0 40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.foot p{margin:0 0 .4em}

/* ---- internal-use banner (staging only — remove before publishing) ---- */
.staging{background:var(--mac-yellow);color:#000;font-size:12.5px;font-weight:600;
  padding:7px 22px;text-align:center;font-family:var(--font-body)}
.staging a{color:#000}

@media print{
  .topbar,.staging,.toc,.theme-toggle{display:none}
  .sec{page-break-inside:avoid}
}