/*
Theme Name: Onuhiowise Telecom Guide
Theme URI: https://onuhiowise.online/
Author: OpenAI
Description: WordPress conversion of the provided Onuhiowise static telecom guidance website.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: onuhiowise-telecom-guide
*/

/* ═══════════════════════════════════════════
   DIALCOMPARE.ONLINE — Independent UK Mobile Guidance
   Focus: O2 & Three Mobile deep coverage + all networks
   Theme: Cobalt Blue + Amber + White — trustworthy, clean
   Type: Outfit (display) + Inter (body)
   NO official site links anywhere. Full disclaimer everywhere.
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --blue:#1A56DB; --blue-d:#123F9E; --blue-l:#E8EFFD;
  --amber:#F59E0B; --amber-d:#C97D06;
  --ink:#0F172A; --mid:#4B5768; --muted:#8E96A8; --line:#E3E7F0; --line-d:#CCD2E0;
  --paper:#F7F9FC; --white:#FFFFFF;
  --ok:#16A34A; --warn:#C2790F; --bad:#DC2626;
  --three:#A6006B; --o2:#0019A5; --ee:#3FA300; --tesco:#00539F; --voda:#D6004A; --sky:#0072CE; --idm:#2D2D2D;
  --fh:'Outfit',sans-serif; --fb:'Inter',sans-serif;
  --mw:1240px; --gap:clamp(18px,4.5vw,64px); --sec:clamp(56px,7.5vw,96px);
  --r:12px; --rl:16px; --rx:22px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--fb);border:none;background:none}
ul{list-style:none}
section{padding:var(--sec) var(--gap)}
.w{max-width:var(--mw);margin:0 auto;padding:0 var(--gap)}
.ws{max-width:850px;margin:0 auto;padding:0 var(--gap)}

/* ══ TRUST BAR ══ */
.tbar{background:var(--ink);color:rgba(255,255,255,.7);font-size:.74rem;padding:7px var(--gap);display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.tbar b{color:var(--amber)}

/* ══ HEADER ══ */
.hdr{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hi{max-width:var(--mw);margin:0 auto;padding:0 var(--gap);height:72px;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-right:30px}
.logo-mk{width:32px;height:32px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;color:#fff;font-size:1rem}
.logo-tx{font-family:var(--fh);font-size:1.16rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.logo-tx span{color:var(--blue)}
.nav{display:flex;align-items:center;flex:1;gap:1px;height:100%}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-item>a{font-size:.83rem;font-weight:700;color:var(--ink);padding:9px 12px;border-radius:8px;display:flex;align-items:center;gap:5px;transition:.15s}
.nav-item:hover>a{color:var(--blue);background:var(--blue-l)}
.nav-item .car{font-size:.6rem;color:var(--muted);transition:transform .2s}
.nav-item:hover .car{transform:rotate(180deg)}
.megamenu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 24px 50px -10px rgba(11,25,165,.18);min-width:560px;padding:22px;z-index:50}
.nav-item:hover .megamenu{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.mm-col h5{font-family:var(--fh);font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.mm-col a{display:block;font-size:.84rem;font-weight:600;color:var(--ink);padding:6px 0}
.mm-col a:hover{color:var(--blue)}
.hcta{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:8px;background:var(--amber);color:#fff;padding:11px 20px;border-radius:980px;font-family:var(--fh);font-size:.82rem;font-weight:700;transition:.2s}
.hcta:hover{background:var(--amber-d)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:8px}
.burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px}

/* ══ DRAWER ══ */
.dr{display:none;position:fixed;inset:0;z-index:999;background:var(--white);flex-direction:column;padding:90px var(--gap) 40px;overflow-y:auto}
.dr.open{display:flex}
.dr-x{position:absolute;top:18px;right:var(--gap);width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center}
.dr a{padding:13px 0;font-size:.96rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.dr-l{font-family:var(--fh);font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);padding:16px 0 6px;margin-top:6px}
.dr-tel{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:#fff;padding:15px;border-radius:980px;font-family:var(--fh);font-weight:800;margin-top:18px}

/* ══ HERO ══ */
.hero{padding:60px var(--gap) 70px;background:linear-gradient(180deg,var(--blue-l),var(--white))}
.hero-grid{max-width:var(--mw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.h-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:980px;padding:7px 16px;font-size:.78rem;font-weight:700;color:var(--blue);margin-bottom:22px}
.h-dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.hero h1{font-family:var(--fh);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;line-height:1.12;color:var(--ink);margin-bottom:18px;letter-spacing:-.02em}
.hero h1 span{color:var(--blue)}
.hero-sub{font-size:1.02rem;color:var(--mid);line-height:1.72;max-width:520px;margin-bottom:26px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.btn-amber{display:inline-flex;align-items:center;gap:9px;background:var(--amber);color:#fff;padding:14px 28px;border-radius:9px;font-family:var(--fh);font-size:.9rem;font-weight:700;box-shadow:0 10px 26px rgba(245,158,11,.32);transition:.22s}
.btn-amber:hover{background:var(--amber-d);transform:translateY(-1px)}
.btn-blue{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;padding:13px 26px;border-radius:9px;font-family:var(--fh);font-size:.86rem;font-weight:700;transition:.2s}
.btn-blue:hover{background:var(--blue-d)}
.btn-out{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line-d);color:var(--ink);padding:12px 24px;border-radius:9px;font-family:var(--fh);font-size:.85rem;font-weight:700;transition:.2s}
.btn-out:hover{border-color:var(--blue);color:var(--blue)}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;font-size:.78rem;color:var(--mid)}
.hero-trust b{color:var(--ink)}
.hero-panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 20px 50px -10px rgba(11,25,165,.12)}
.hp-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hp-h h3{font-family:var(--fh);font-size:1rem;font-weight:800}
.hp-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.hp-row:last-child{border-bottom:none}
.hp-row b{font-weight:800;color:var(--blue)}

/* ══ SECTION HEAD ══ */
.sh{margin-bottom:42px}
.sh.c{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.sh h2{font-family:var(--fh);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin-bottom:12px}
.sh h2 span{color:var(--blue)}
.sh p{font-size:.98rem;color:var(--mid);line-height:1.72;max-width:600px}
.sh.c p{margin:0 auto}

/* ══ PAGE HERO ══ */
.ph{background:linear-gradient(180deg,var(--blue-l),var(--white));padding:38px var(--gap) 44px;border-bottom:1px solid var(--line)}
.ph-i{max-width:var(--mw);margin:0 auto}
.ph-bc{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.ph-bc a{color:var(--blue);font-weight:700}
.ph-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:980px;padding:6px 14px;font-size:.74rem;font-weight:700;color:var(--amber-d);margin-bottom:14px}
.ph-i h1{font-family:var(--fh);font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;color:var(--ink);line-height:1.2;max-width:780px;margin-bottom:10px}
.ph-i h1 span{color:var(--blue)}
.ph-i p{font-size:.96rem;color:var(--mid);line-height:1.66;max-width:600px}

/* ══ NETWORK GRID ══ */
.ng{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nc{background:var(--white);border:1px solid var(--line);border-radius:var(--rx);overflow:hidden;transition:.22s}
.nc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -12px rgba(11,25,165,.14)}
.nc-top{padding:22px 18px 18px;min-height:140px;display:flex;flex-direction:column}
.nc-chip{display:inline-flex;padding:4px 10px;border-radius:980px;font-size:.6rem;font-weight:800;color:#fff;background:rgba(255,255,255,.22);width:fit-content;margin-bottom:auto}
.nc-top h3{font-family:var(--fh);font-size:1.08rem;font-weight:800;color:#fff;margin-top:14px;margin-bottom:5px}
.nc-top p{font-size:.72rem;color:rgba(255,255,255,.85);line-height:1.5}
.nc-bot{padding:14px 18px 18px;border-top:1px solid var(--line)}
.nc-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dotted var(--line);font-size:.72rem}
.nc-row:last-of-type{border:none;margin-bottom:10px}
.nc-k{color:var(--muted)}
.nc-v{font-weight:700;color:var(--ink);font-size:.74rem}
.nc-a{display:block;text-align:center;padding:9px 12px;border-radius:8px;font-size:.72rem;font-weight:700;color:#fff;transition:opacity .2s}
.nc-a:hover{opacity:.85}

/* ══ FEATURE GRID ══ */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fc{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:24px;transition:.2s}
.fc:hover{background:var(--white);box-shadow:0 14px 32px -10px rgba(11,25,165,.1);transform:translateY(-3px)}
.fc-ic{width:42px;height:42px;border-radius:11px;background:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:13px;font-size:1.1rem}
.fc h3{font-family:var(--fh);font-size:.96rem;font-weight:800;margin-bottom:8px;color:var(--ink)}
.fc p{font-size:.84rem;color:var(--mid);line-height:1.66}

/* ══ KEYWORD CHIP CLOUD ══ */
.kwcloud{display:flex;flex-wrap:wrap;gap:8px}
.kw{padding:7px 14px;border-radius:980px;font-size:.78rem;font-weight:600;background:var(--blue-l);color:var(--blue-d);border:1px solid var(--line)}

/* ══ TOPIC LIST GRID (covers many keyword pages compactly) ══ */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.topic{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.topic h4{font-family:var(--fh);font-size:.9rem;font-weight:800;color:var(--ink);margin-bottom:6px}
.topic p{font-size:.8rem;color:var(--mid);line-height:1.6}

/* ══ TABLE ══ */
.tw{overflow-x:auto;border-radius:var(--rl);border:1px solid var(--line)}
.tb{width:100%;border-collapse:collapse;min-width:680px}
.tb thead tr{background:var(--blue-l)}
.tb th{padding:13px 16px;text-align:left;font-family:var(--fh);font-size:.74rem;font-weight:800;color:var(--blue-d)}
.tb td{padding:13px 16px;font-size:.87rem;color:var(--mid);border-bottom:1px solid var(--line)}
.tb tbody tr:last-child td{border:none}
.tb tbody tr:hover td{background:var(--paper)}
.tn{font-weight:700;color:var(--ink);font-size:.88rem}
.ck{color:var(--ok);font-weight:700}
.cw{color:var(--warn);font-weight:600}
.cx{color:var(--bad);font-weight:700}
.bdg{display:inline-block;padding:3px 10px;border-radius:6px;font-size:.66rem;font-weight:700}
.bm{background:var(--blue-l);color:var(--blue-d)}
.bv{background:#E6F7ED;color:var(--ok)}

/* ══ BOXES ══ */
.ib{background:var(--blue-l);border-left:4px solid var(--blue);padding:15px 18px;font-size:.89rem;color:var(--mid);line-height:1.72;margin:22px 0;border-radius:0 10px 10px 0}
.ib strong{color:var(--blue-d)}
.wb{background:#FFF6E8;border-left:4px solid var(--amber);padding:15px 18px;font-size:.89rem;color:var(--mid);line-height:1.72;margin:22px 0;border-radius:0 10px 10px 0}
.wb strong{color:var(--amber-d)}
.disc-box{background:#F1F3F9;border:1.5px solid var(--line-d);border-radius:14px;padding:20px 22px;font-size:.82rem;color:var(--mid);line-height:1.74}
.disc-box strong{color:var(--ink)}

/* ══ FAQ ══ */
.fi{border-bottom:1px solid var(--line)}
.fq{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;cursor:pointer}
.fq-t{font-size:.95rem;font-weight:700;color:var(--ink)}
.fq-i{width:27px;height:27px;border-radius:50%;background:var(--blue-l);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.82rem;color:var(--blue);flex-shrink:0;transition:.2s}
.fi.op .fq-i{background:var(--blue);color:#fff;border-color:var(--blue);transform:rotate(45deg)}
.fa{display:none;padding:0 0 18px;font-size:.87rem;color:var(--mid);line-height:1.78}
.fi.op .fa{display:block}

/* ══ STAT ROW ══ */
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.sb{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.sn{font-family:var(--fh);font-size:1.5rem;font-weight:800;color:var(--blue);margin-bottom:3px}
.sl{font-size:.68rem;color:var(--muted);font-weight:700}

/* ══ CONTENT CARDS ══ */
.cc2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cc{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px}
.cc h3{font-family:var(--fh);font-size:.96rem;font-weight:800;margin-bottom:8px;color:var(--ink)}
.cc p{font-size:.83rem;color:var(--mid);line-height:1.66;margin-bottom:9px}
.cc ul{display:flex;flex-direction:column;gap:5px}
.cc li{font-size:.81rem;color:var(--mid);padding-left:16px;position:relative;line-height:1.5}
.cc li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700;font-size:.74rem}

/* ══ CONTACT ══ */
.cg{display:grid;grid-template-columns:1fr 1.3fr;gap:34px;align-items:start}
.ci{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px;display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.ci-i{width:36px;height:36px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-l{font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:2px}
.ci-v{font-family:var(--fh);font-size:.9rem;font-weight:800;color:var(--ink)}
.fw{background:var(--white);border:1px solid var(--line);border-radius:var(--rx);padding:30px}
.fw h2{font-family:var(--fh);font-size:1.22rem;font-weight:800;margin-bottom:6px;color:var(--ink)}
.fw p{font-size:.84rem;color:var(--mid);margin-bottom:18px}
.fg2{margin-bottom:12px}
.fg2 label{display:block;font-size:.76rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.fg2 input,.fg2 select,.fg2 textarea{width:100%;padding:10px 13px;background:var(--white);border:1.5px solid var(--line);border-radius:9px;color:var(--ink);font-size:.86rem;font-family:var(--fb);outline:none;-webkit-appearance:none;transition:.18s}
.fg2 input:focus,.fg2 select:focus,.fg2 textarea:focus{border-color:var(--blue)}
.fg2 input::placeholder,.fg2 textarea::placeholder{color:var(--muted)}
.fg2 select{color:var(--ink);cursor:pointer}
.fg2 textarea{resize:vertical;min-height:80px}
.fg2-r{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fg2-c{display:flex;gap:8px;align-items:flex-start;margin:9px 0;font-size:.76rem;color:var(--mid);line-height:1.55}
.fg2-c input{width:auto;margin-top:3px;flex-shrink:0;accent-color:var(--blue)}
.fsub{width:100%;padding:13px;background:var(--amber);color:#fff;font-family:var(--fh);font-size:.9rem;font-weight:700;border-radius:9px;transition:.2s;cursor:pointer}
.fsub:hover{background:var(--amber-d)}

/* ══ PROSE ══ */
.pr h2{font-family:var(--fh);font-size:clamp(1.2rem,2.1vw,1.5rem);font-weight:800;margin:36px 0 11px;color:var(--ink)}
.pr h3{font-family:var(--fh);font-size:1rem;font-weight:800;color:var(--blue);margin:20px 0 8px}
.pr p{font-size:.91rem;color:var(--mid);line-height:1.82;margin-bottom:12px}
.pr ul{padding-left:18px;margin-bottom:13px}
.pr li{font-size:.88rem;color:var(--mid);margin-bottom:5px;line-height:1.62}
.pr strong{color:var(--ink)}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(13px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.3s}

/* ══ FOOTER ══ */
.footer{background:var(--ink);padding:48px var(--gap) 24px}
.ft{max-width:var(--mw);margin:0 auto}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:26px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:22px}
.ft-logo{font-family:var(--fh);font-size:1.08rem;font-weight:800;color:#fff;margin-bottom:10px}
.ft-logo span{color:var(--amber)}
.ft-brand p{font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.72;max-width:230px}
.ft-col h4{font-family:var(--fh);font-size:.7rem;font-weight:700;color:var(--amber);letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.ft-col ul{display:flex;flex-direction:column;gap:8px}
.ft-col a{font-size:.79rem;color:rgba(255,255,255,.5)}
.ft-col a:hover{color:#fff}
.ft-disc{font-size:.71rem;color:rgba(255,255,255,.4);line-height:1.85;padding-top:18px;margin-bottom:14px}
.ft-bot{font-size:.72rem;color:rgba(255,255,255,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.ft-bot a{color:rgba(255,255,255,.45)}

/* ══ RESPONSIVE ══ */
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr}.hero-panel{display:none}.ng{grid-template-columns:repeat(2,1fr)}.fg{grid-template-columns:1fr 1fr}.topic-grid{grid-template-columns:1fr 1fr}.ft-top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:900px){.nav{display:none}.burger{display:flex}}
@media(max-width:780px){.cc2{grid-template-columns:1fr}.cg{grid-template-columns:1fr}.sr{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr}.topic-grid{grid-template-columns:1fr}.ft-top{grid-template-columns:1fr 1fr;gap:20px}.tbar{gap:14px;font-size:.66rem}}
@media(max-width:520px){.ng{grid-template-columns:1fr}.fg2-r{grid-template-columns:1fr}.ft-top{grid-template-columns:1fr}}

/* ══ INDEPENDENCE BANNER — prominent, not buried in footer ══ */
.indie-banner{background:#FFF8E1;border:1.5px solid #F5D98A;border-radius:14px;padding:16px 20px;display:flex;gap:12px;align-items:flex-start;max-width:760px;margin:0 auto 28px}
.indie-banner .ic{font-size:1.3rem;flex-shrink:0}
.indie-banner p{font-size:.84rem;color:var(--mid);line-height:1.6;text-align:left}
.indie-banner strong{color:var(--ink)}
.indie-banner-dark{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:14px;padding:16px 20px;display:flex;gap:12px;align-items:flex-start;max-width:760px;margin:0 auto 28px}
.indie-banner-dark p{font-size:.84rem;color:rgba(255,255,255,.75);line-height:1.6;text-align:left}
.indie-banner-dark strong{color:#fff}

/* ══ CONTACT METHOD CARDS — form first, phone secondary ══ */
.contact-methods{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmethod{border-radius:14px;padding:20px;border:1.5px solid var(--line)}
.cmethod.primary{background:var(--blue);border-color:var(--blue)}
.cmethod.primary h3,.cmethod.primary p{color:#fff}
.cmethod.secondary{background:var(--paper)}
.cmethod h3{font-family:var(--fh);font-size:.95rem;font-weight:800;margin-bottom:6px}
.cmethod p{font-size:.8rem;color:var(--mid);line-height:1.55;margin-bottom:12px}