/*
Theme Name: Keyanok
Theme URI: https://keyanok.online/
Author: Keyanok
Description: Independent UK mobile network information theme for keyanok.online. Fixed left sidebar on desktop, slide-in menu drawer on phones, information panels, guidance line and full legal pages. Works with the companion "Keyanok Content" plugin, which installs every page automatically.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keyanok
Tags: one-column, custom-menu, full-width-template
*/


:root{--bg:#f4f6f5;--card:#ffffff;--ink:#111827;--inkD:#0a0f18;--body:#495057;--mut:#828d92;
--teal:#0d6e63;--tealD:#095149;--tealL:#e7f2f0;--line:#e3e8e7;--amber:#b7791f}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Karla',system-ui,sans-serif;background:var(--bg);color:var(--body);font-size:17px;line-height:1.75}
h1,h2,h3,h4{font-family:'Rubik',system-ui,sans-serif;color:var(--ink);font-weight:600;line-height:1.28}
a{color:var(--tealD)}
svg{display:block}
/* ══ SHELL: sidebar + main, exactly two children ══ */
.shell{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh}
@media(max-width:1000px){.shell{grid-template-columns:1fr}}
/* ══ SIDEBAR ══ */
.side{background:var(--ink);color:#aeb8bd;padding:0 0 26px;position:sticky;top:0;height:100vh;overflow-y:auto}
@media(max-width:1000px){.side{position:static;height:auto}}
.side .brand{display:flex;gap:11px;align-items:center;text-decoration:none;padding:22px 22px 18px;
border-bottom:1px solid #222b36}
.side .brand .n{font-family:'Rubik';font-weight:600;color:#fff;font-size:1.1rem;line-height:1.2}
.side .brand .s{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#7f8c93;margin-top:4px}
.side .grp{padding:18px 14px 4px}
.side .grp h6{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#6d7a82;padding:0 8px 8px;font-weight:600;font-family:'Karla'}
.side a.lk{display:block;color:#c3cdd2;text-decoration:none;font-size:.87rem;padding:7px 10px;border-radius:6px;line-height:1.4}
.side a.lk:hover{background:#1c2532;color:#fff}
.side a.lk.on{background:var(--teal);color:#fff;font-weight:600}
.side .callbox{margin:16px 14px 0;background:#1a2330;border:1px solid #2a3542;border-radius:9px;padding:15px 16px}
.side .callbox h6{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#79cabb;margin-bottom:7px;font-weight:600;font-family:'Karla'}
.side .callbox a{display:block;background:var(--teal);color:#fff;text-decoration:none;text-align:center;
font-family:'Rubik';font-weight:600;font-size:1.02rem;padding:9px 0;border-radius:7px;margin-bottom:9px}
.side .callbox em{font-style:normal;font-size:.71rem;color:#93a0a8;line-height:1.55;display:block}
/* ══ MAIN ══ */
main{min-width:0}
.topstrip{background:var(--card);border-bottom:1px solid var(--line);padding:10px 0}
.topstrip .i{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.79rem;color:#5f6b70}
.topstrip b{color:var(--ink)}
.pad{max-width:1000px;margin:0 auto;padding:0 26px}
/* ══ SHEET HEAD ══ */
.sheet{background:var(--card);border-bottom:1px solid var(--line);padding:28px 0 24px}
.sheet .lbl{display:inline-block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
font-weight:700;background:var(--tealL);padding:5px 12px;border-radius:5px}
.sheet h1{font-size:clamp(1.6rem,3.6vw,2.25rem);margin:14px 0 0}
.sheet p{margin-top:11px;max-width:70ch;color:#5c666b}
.sheet .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:20px;
background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sheet .grid div{background:var(--card);padding:12px 15px}
.sheet .grid b{display:block;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.sheet .grid span{font-family:'Rubik';font-size:.96rem;color:var(--ink)}
/* ══ INDEX STRIP ══ */
.ix{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:15px 18px;margin:22px 0 18px}
.ix h5{font-size:.61rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:10px;font-weight:700}
.ix ol{margin:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 16px;counter-reset:x}
.ix li{margin:0}
.ix a{display:block;padding:5px 0;text-decoration:none;color:var(--body);font-size:.86rem;border-bottom:1px dotted var(--line)}
.ix a i{font-style:normal;color:var(--teal);font-weight:700;margin-right:8px;font-size:.76rem}
.ix a:hover{color:var(--tealD)}
/* ══ PANELS ══ */
.pan{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.pan .bar{background:var(--ink);color:#fff;padding:12px 20px;display:flex;gap:11px;align-items:center}
.pan .bar .l{background:var(--teal);border-radius:5px;width:26px;height:26px;display:grid;place-items:center;
font-family:'Rubik';font-size:.78rem;font-weight:600;flex:none}
.pan .bar h2{color:#fff;font-size:1.06rem;font-weight:500}
.pan .split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr)}
@media(max-width:820px){.pan .split{grid-template-columns:1fr}}
.pan .facts{background:#fafbfb;border-right:1px solid var(--line);padding:18px 20px}
@media(max-width:820px){.pan .facts{border-right:none;border-bottom:1px solid var(--line)}}
.pan .facts h4{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:11px;font-family:'Karla';font-weight:700}
.pan .facts dl{margin:0}
.pan .facts dt{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin-top:11px}
.pan .facts dt:first-child{margin-top:0}
.pan .facts dd{font-size:.92rem;color:var(--ink);margin:2px 0 0;line-height:1.5}
.pan .mean{padding:20px 24px}
.pan .mean h4{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:11px;font-family:'Karla';font-weight:700}
.pan .mean p{margin:11px 0}
.pan .mean p:first-of-type{margin-top:0}
.pan .mean ul,.pan .mean ol{margin:11px 0 11px 20px}
.pan .mean li{margin:6px 0}
.pan .mean b{color:var(--ink);font-weight:700}
/* steps */
.steps{list-style:none;margin-left:0!important;counter-reset:st}
.steps li{position:relative;padding-left:31px;margin:10px 0}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:2px;width:21px;height:21px;
border-radius:50%;background:var(--tealL);color:var(--tealD);font-size:.7rem;font-weight:700;display:grid;place-items:center}
/* table */
.t{width:100%;border-collapse:collapse;margin:13px 0;font-size:.9rem}
.t th{text-align:left;font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);
padding:8px 11px;border-bottom:2px solid var(--ink);font-weight:700}
.t td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.t tr:last-child td{border-bottom:none}
.t td:first-child{width:36%;color:var(--ink);font-weight:600}
@media(max-width:620px){.t td{display:block;width:auto!important}.t thead{display:none}
.t tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}.t td:first-child{border:none;padding-bottom:0}}
/* flag */
.flag{background:#fdf7ec;border:1px solid #efdcbc;border-left:4px solid var(--amber);border-radius:7px;
padding:13px 17px;margin:13px 0;font-size:.91rem}
.flag b{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8a5d13;margin-bottom:5px;font-weight:700}
/* verdict */
.vd{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:700px){.vd{grid-template-columns:1fr}}
.vd div{padding:18px 22px;font-size:.92rem}
.vd .g{background:#f2f9f6;border-right:1px solid var(--line)}
.vd .b{background:#fbf4f4}
.vd h4{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;font-family:'Karla';font-weight:700}
.vd .g h4{color:#1a7052}.vd .b h4{color:#a33a3a}
.vd ul{margin:0 0 0 18px}
.vd li{margin:6px 0}
/* call strip */
.cs{background:var(--ink);border-radius:10px;color:#b6c0c5;padding:20px 24px;margin:16px 0;
display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
@media(max-width:700px){.cs{grid-template-columns:1fr}}
.cs h4{color:#fff;font-size:1.04rem;margin-bottom:5px}
.cs p{font-size:.85rem;margin:0;max-width:52ch}
.cs a{background:var(--teal);color:#fff;text-decoration:none;font-family:'Rubik';font-weight:600;font-size:1.06rem;
padding:11px 24px;border-radius:7px;display:inline-block;text-align:center;white-space:nowrap}
.cs em{font-style:normal;display:block;font-size:.71rem;color:#8f9ba1;margin-top:8px;max-width:32ch}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px;margin:16px 0}
.tiles a{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:9px;
padding:17px 19px;text-decoration:none;color:var(--body);display:block}
.tiles a:hover{border-color:var(--teal);box-shadow:0 3px 10px rgba(13,110,99,.08)}
.tiles b{display:block;font-family:'Rubik';font-weight:600;font-size:1rem;color:var(--ink);margin-bottom:4px}
.tiles span{font-size:.85rem;color:var(--mut);line-height:1.5}
/* home blocks */
.blk{padding:30px 0}
.blk h2{font-size:1.45rem}
.blk .sub{color:var(--mut);margin-top:8px;max-width:68ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:16px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.box h3{font-size:1.02rem;margin-bottom:9px}
.box ul{margin:0 0 0 19px;font-size:.92rem}
.box li{margin:6px 0}
.box p{font-size:.92rem}
/* note */
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:9px;
padding:15px 19px;margin:16px 0;font-size:.82rem;color:#5a6469}
.note b{color:var(--ink)}
/* cookie */
.ckb{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:min(620px,92vw);
background:var(--ink);color:#c3cdd2;border-radius:10px;padding:16px 20px;font-size:.84rem;z-index:90;
box-shadow:0 14px 32px rgba(17,24,39,.28)}
.ckb.show{display:block}
.ckb a{color:#79cabb}
.ckb button{background:var(--teal);color:#fff;border:none;padding:8px 18px;border-radius:6px;cursor:pointer;
font-weight:700;font-size:.79rem;margin-top:9px;font-family:'Karla'}
/* footer */
.ft{background:var(--inkD);color:#8b969c;font-size:.85rem;margin-top:28px}
.ft .cta{background:var(--ink);padding:28px 0;text-align:center;border-bottom:1px solid #202935}
.ft .cta h4{color:#fff;font-size:1.24rem;margin-bottom:8px}
.ft .cta p{color:#b6c0c5;max-width:60ch;margin:0 auto 15px;font-size:.9rem}
.ft .cta a{background:var(--teal);color:#fff;text-decoration:none;font-family:'Rubik';font-weight:600;
font-size:1.16rem;padding:12px 30px;border-radius:8px;display:inline-block}
.ft .cta em{font-style:normal;display:block;color:#8b969c;font-size:.74rem;margin-top:12px;max-width:58ch;margin-left:auto;margin-right:auto}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;padding:28px 0 20px}
.ft h5{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:#79cabb;margin-bottom:10px;font-weight:700;font-family:'Karla'}
.ft a{color:#8b969c;text-decoration:none}
.fg a{display:block;padding:3px 0;font-size:.85rem}
.fg a:hover{color:#fff}
.fend{border-top:1px solid #1c2531;padding:17px 0 26px;font-size:.75rem;color:#78838a}


/* ── WordPress core classes ── */
.alignleft{float:left;margin:0 1.2em 1em 0}
.alignright{float:right;margin:0 0 1em 1.2em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.82rem;color:var(--mut)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:#fff;color:var(--ink);padding:10px 16px;z-index:999;border-radius:6px}
.entry-content > *:first-child{margin-top:0}
.wp-block-image img{max-width:100%;height:auto}
.k-404{padding:60px 0;text-align:center}
.k-404 h1{font-size:2rem;margin-bottom:12px}
.k-search{padding:40px 0}
.k-search .res{border-bottom:1px solid var(--line);padding:14px 0}
.k-search .res a{font-family:'Rubik';font-size:1.05rem;color:var(--ink);text-decoration:none}
.k-search .res p{font-size:.88rem;color:var(--mut);margin-top:4px}
.k-form input[type=search]{padding:10px 14px;border:1px solid var(--line);border-radius:7px;font-size:.95rem;min-width:240px}
.k-form button{background:var(--teal);color:#fff;border:none;padding:11px 20px;border-radius:7px;cursor:pointer;font-weight:700}


/* ══════════════════════════════════════════════════════════════
   MOBILE HEADER AND SLIDE-IN MENU
   On phones and small tablets the sidebar becomes a drawer, so the
   page opens on the content instead of on thirty menu links.
   ══════════════════════════════════════════════════════════════ */

.mtop{display:none}

/* the bar itself */
.mtop{
  position:sticky;top:0;z-index:130;
  background:var(--ink);color:#fff;
  align-items:center;gap:10px;
  padding:9px 12px;
  border-bottom:1px solid #222b36;
}
.mtop .burger{
  flex:none;width:42px;height:42px;border-radius:9px;
  background:#1c2532;border:1px solid #2a3542;
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.mtop .burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative}
.mtop .burger span::before,.mtop .burger span::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px;
}
.mtop .burger span::before{top:-6px}
.mtop .burger span::after{top:6px}
.mtop .mbrand{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
}
.mtop .mbrand svg{flex:none}
.mtop .mbrand .n{
  font-family:'Rubik';font-weight:600;font-size:1.02rem;color:#fff;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.mtop .mbrand .s{
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:#7f8c93;display:block;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mtop .mcall{
  flex:none;background:var(--teal);color:#fff;text-decoration:none;
  font-family:'Rubik';font-weight:600;font-size:.82rem;
  padding:10px 14px;border-radius:9px;white-space:nowrap;
}

/* the drawer close button, only visible when the drawer is open */
.side .k-close{
  display:none;position:absolute;top:14px;right:12px;
  width:36px;height:36px;border-radius:8px;
  background:#1c2532;border:1px solid #2a3542;color:#fff;
  font-size:1.15rem;line-height:1;cursor:pointer;
}

.k-backdrop{
  display:none;position:fixed;inset:0;background:rgba(10,15,24,.62);
  z-index:110;opacity:0;transition:opacity .22s ease;
}
.k-backdrop.k-show{display:block;opacity:1}

@media (max-width:1000px){

  html,body{overflow-x:hidden}

  .mtop{display:flex}

  /* sidebar becomes an off-canvas drawer */
  .side{
    position:fixed;top:0;left:0;bottom:0;
    width:min(320px,86vw);
    height:100vh;height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-102%);
    transition:transform .26s ease;
    z-index:120;
    box-shadow:0 0 40px rgba(0,0,0,.45);
    padding-bottom:40px;
  }
  .side.k-open{transform:translateX(0)}
  .side .k-close{display:block}
  .side .brand{padding-right:58px}

  body.k-locked{overflow:hidden}

  .shell{grid-template-columns:1fr;min-height:0}

  /* content breathes properly on a phone */
  .pad{padding:0 16px}
  .sheet{padding:20px 0 18px}
  .sheet h1{font-size:1.45rem}
  .sheet p{font-size:.97rem}
  .sheet .grid{grid-template-columns:1fr 1fr}
  .topstrip{padding:9px 0}
  .topstrip .i{flex-direction:column;gap:4px;font-size:.75rem;text-align:center;align-items:center}
  .ix ol{grid-template-columns:1fr}
  .pan .bar{padding:11px 15px}
  .pan .bar h2{font-size:.98rem}
  .pan .facts,.pan .mean{padding:15px 16px}
  .cs{padding:17px 18px}
  .cs a{width:100%}
  .blk{padding:22px 0}
  .tiles{grid-template-columns:1fr}
  .ft .cta{padding:24px 0}
  .fg{grid-template-columns:1fr 1fr;gap:18px;padding:24px 0 16px}
}

@media (max-width:520px){
  body{font-size:16px}
  .sheet .grid{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}
  .mtop .mbrand .s{display:none}
  .mtop .mcall{font-size:.78rem;padding:9px 12px}
  .ft .cta a{font-size:1.05rem;padding:11px 22px}
}

/* long tables never break the layout on a phone */
.entry-content table{max-width:100%}