/*
Theme Name: Terminal Compass
Description: Reference theme for airport terminal maps. Departure-board airline lookup, map-first airport pages, dark mode. Requires the TC Core plugin for airport data.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: terminal-compass
*/

:root{
  --ink:#12212F; --paper:#FBFAF8; --card:#FFFFFF; --card-2:#F4F2ED;
  --board:#12212F; --signal:#F5B301; --concrete:#6C7480; --line:#E4E2DD;
  --live:#2FA37A; --alert:#C4502E; --text:#12212F; --text-2:#4A5563;
  --sans:'Barlow',system-ui,-apple-system,sans-serif;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1); --wrap:1120px;
}
[data-theme="dark"]{
  --paper:#0B141D; --card:#141F2B; --card-2:#1B2836; --board:#060D14;
  --line:#243444; --text:#EDF1F5; --text-2:#9BA8B6; --concrete:#7E8B99;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;transition:background .3s var(--ease),color .3s var(--ease)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{font:400 14px/1 var(--sans);color:var(--concrete)}

/* bar */
.bar{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(12px)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font:600 15px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.brand i{width:13px;height:13px;border:2px solid var(--signal);border-radius:50%;position:relative;display:block}
.brand i::after{content:"";position:absolute;top:2px;right:2px;width:3px;height:3px;background:var(--signal);border-radius:50%}
.bar-r{display:flex;align-items:center;gap:8px}
.kbd{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--sans);color:var(--concrete);background:var(--card-2);border:1px solid var(--line);padding:8px 12px;border-radius:7px;transition:border-color .2s}
.kbd:hover{border-color:var(--concrete)}
.kbd kbd{font:500 11px/1 var(--mono);border:1px solid var(--line);border-radius:3px;padding:3px 5px;background:var(--card)}
.icon{width:36px;height:36px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:7px;color:var(--text-2);transition:border-color .2s,color .2s}
.icon:hover{border-color:var(--concrete);color:var(--text)}

/* hero */
.hero{padding:76px 0 44px;text-align:center}
.hero h1{font:700 clamp(46px,8.5vw,88px)/.94 var(--cond);letter-spacing:-.015em;text-transform:uppercase;max-width:15ch;margin:0 auto}
.hero h1 mark{background:none;color:var(--signal)}
.hero > p{max-width:52ch;margin:22px auto 0;color:var(--text-2);font-size:18px}

/* finder */
.finder{max-width:660px;margin:34px auto 0;position:relative}
.f-in{position:relative}
.f-in svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--concrete)}
.f-in input{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:12px;color:var(--text);font:400 18px/1 var(--sans);padding:20px 20px 20px 54px;transition:border-color .2s,box-shadow .2s}
.f-in input::placeholder{color:var(--concrete)}
.f-in input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(245,179,1,.14)}
.res{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 20px 44px -24px rgba(0,0,0,.4);z-index:20;display:none}
.res.on{display:block}
.res a{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.res a:last-child{border-bottom:0}
.res a:hover,.res a.sel{background:var(--card-2)}
.res .rc{font:700 26px/1 var(--cond);min-width:52px}
.res .rn{flex:1;text-align:left;font-size:15px}
.res .rn small{display:block;color:var(--concrete);font-size:13px}
.res .rd{font:400 12px/1 var(--mono);color:var(--live)}
.res .rd.off{color:var(--concrete)}

.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin-top:30px;font:400 14px/1 var(--sans);color:var(--concrete)}
.trust span{display:flex;align-items:center;gap:8px}
.trust b{width:6px;height:6px;background:var(--live);border-radius:50%}

/* sections */
.sec{padding:70px 0 0}
.sec-flat{margin-bottom:52px}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.16em;color:var(--concrete);text-transform:uppercase;margin-bottom:14px}
.sec-hd .eyebrow{margin-bottom:10px}
.sec-hd h2,.sec-h{font:600 clamp(26px,4vw,34px)/1.1 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin-bottom:18px}
.sec-hd h2{margin-bottom:0}

/* airport cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.ap{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:6px;transition:transform .28s var(--ease),border-color .2s,box-shadow .28s var(--ease)}
.ap:hover{transform:translateY(-3px);border-color:var(--concrete);box-shadow:0 14px 30px -22px rgba(0,0,0,.45)}
.ap .c{font:700 42px/.9 var(--cond)}
.ap .n{font-size:15px;line-height:1.35}
.ap .m{display:flex;align-items:center;gap:7px;font:400 12px/1 var(--mono);color:var(--live);margin-top:6px}
.ap .m b{width:5px;height:5px;background:var(--live);border-radius:50%}
.ap.soon{border-style:dashed;background:none}
.ap.soon .c,.ap.soon .n,.ap.soon .m{color:var(--concrete)}
.ap.soon .m b{background:var(--concrete)}

/* how */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:32px;padding-top:28px}
.how h3{font:600 17px/1.3 var(--sans);margin-bottom:8px;display:flex;align-items:center;gap:9px}
.how h3 i{width:22px;height:2px;background:var(--signal);display:block}
.how p{color:var(--text-2);font-size:15.5px}

/* airport masthead */
.mast{padding:52px 0 32px}
.code{font:700 clamp(76px,15vw,132px)/.82 var(--cond);letter-spacing:-.02em;display:block}
.full{font:500 clamp(19px,3vw,26px)/1.25 var(--cond);letter-spacing:.03em;color:var(--concrete);margin-top:10px;text-transform:uppercase}
.stamp{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font:500 12px/1 var(--mono);letter-spacing:.07em;color:var(--live);border:1px solid var(--live);padding:7px 11px;border-radius:3px}
.stamp b{width:6px;height:6px;background:var(--live);border-radius:50%}

/* departure board */
.board{background:var(--board);border-radius:12px;overflow:hidden;margin:8px 0 40px;box-shadow:0 14px 34px -20px rgba(18,33,47,.55)}
.board-hd{padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.board-hd h2{font:600 13px/1 var(--mono);letter-spacing:.16em;color:var(--signal);text-transform:uppercase}
.board-hd p{font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.55);margin-top:7px}
.field{position:relative;padding:16px 22px 18px}
.field input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);border-radius:6px;color:#fff;font:400 17px/1 var(--sans);padding:15px 15px 15px 44px}
.field input::placeholder{color:rgba(255,255,255,.42)}
.field input:focus{outline:2px solid var(--signal);outline-offset:1px;background:rgba(255,255,255,.11)}
.field svg{position:absolute;left:37px;top:50%;transform:translateY(-50%);opacity:.45}
.rows{max-height:296px;overflow-y:auto;border-top:1px solid rgba(255,255,255,.1)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.row:last-child{border-bottom:0}
.row-a{font:500 15px/1.2 var(--mono);letter-spacing:.04em;color:#fff;text-transform:uppercase}
.row-a span{display:block;font:400 12px/1.4 var(--sans);letter-spacing:0;color:rgba(255,255,255,.45);text-transform:none;margin-top:3px}
.row-t{font:700 30px/1 var(--cond);color:var(--signal);white-space:nowrap;text-align:right}
.row-t em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:rgba(255,255,255,.4);display:block;margin-bottom:4px}
.board .empty{padding:30px 22px;color:rgba(255,255,255,.5);font-size:15px;text-align:center}

/* map */
.mapwrap{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
.mapfoot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font:400 13px/1.5 var(--sans);color:var(--concrete);margin-bottom:44px}
.embed{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--text);background:none;border:1px solid var(--line);padding:11px 15px;border-radius:6px;text-transform:uppercase;transition:border-color .2s}
.embed:hover{border-color:var(--text)}

/* notice */
.notice{display:flex;gap:14px;background:var(--card-2);border-left:3px solid var(--signal);border-radius:0;padding:18px 20px;margin-bottom:44px}
.notice h3{font:600 15px/1.3 var(--sans);margin-bottom:5px}
.notice p{font-size:15px;color:var(--text-2)}

/* terminal cards */
.tcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:9px}
.tcard:hover{border-color:var(--concrete)}
.tcard .n2{font:700 46px/.85 var(--cond)}
.tcard .who{font:500 15px/1.35 var(--sans)}
.tcard .sub{font-size:14px;color:var(--concrete)}
.tcard.shut{background:var(--card-2);border-style:dashed}
.tcard.shut .n2,.tcard.shut .who{color:var(--concrete)}
.tag{align-self:flex-start;font:500 11px/1 var(--mono);letter-spacing:.09em;padding:5px 8px;border-radius:3px;text-transform:uppercase;background:rgba(47,163,122,.13);color:var(--live)}
.tag.red{background:rgba(196,80,46,.13);color:var(--alert)}

/* prose + faq */
.doc{max-width:74ch;padding:52px 0 0}
.doc-h{font:600 clamp(30px,5vw,44px)/1.08 var(--cond);text-transform:uppercase;margin-bottom:24px}
.doc-body{max-width:70ch}
.doc-body p{margin-bottom:16px}
.doc-body h2{font:600 26px/1.2 var(--cond);text-transform:uppercase;margin:32px 0 12px}
.doc-body h3{font:600 19px/1.3 var(--sans);margin:24px 0 8px}
.doc-body ul,.doc-body ol{margin:0 0 16px 22px}
.doc-body li{margin-bottom:6px}
.doc-body a{color:var(--text);border-bottom:1.5px solid var(--signal)}
.q{border-top:1px solid var(--line);padding:20px 0}
.q:last-of-type{border-bottom:1px solid var(--line)}
.q h3{font:600 17px/1.4 var(--sans);margin-bottom:7px}
.q p{color:var(--text-2);max-width:70ch}

footer{border-top:1px solid var(--line);margin-top:74px;padding:34px 0;font-size:14px;color:var(--concrete)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer a{margin-right:20px;color:var(--text-2)}
footer a:hover{color:var(--signal)}
footer ul{list-style:none;display:flex;flex-wrap:wrap}

@media (max-width:600px){
  .hero{padding:46px 0 30px}
  .mast{padding:34px 0 24px}
  .kbd{display:none}
  .f-in input{font-size:16px;padding:17px 16px 17px 48px}
  .f-in svg{left:17px}
  .row{padding:13px 16px}
  .field{padding:14px 16px 16px}
  .field svg{left:31px}
  .board-hd{padding:17px 16px 14px}
  .mapwrap{padding:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}