/*
Theme Name: Oradion
Theme URI: https://www.oradion.com
Author: Oradion
Description: Corporate theme for Oradion — Lebanon-based Managed Service Provider and technology advisory company. Built on the Waveguide identity: heavy capitals sliced by one unbroken horizontal channel, reused as the site's structural device. No images, no framework, no build step.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary — all rights reserved
Text Domain: oradion
Tags: business, custom-menu, custom-logo, translation-ready, accessibility-ready
*/

/* Oradion — site styles. Design system carried from the Waveguide identity. */

:root{
  --ink:#0B1F3A; --ink-2:#122a4a; --deep:#0B1F3A;
  --paper:#F5F4F0; --paper-2:#EAE8E2; --line:#D8D5CD; --line-2:#C9C5BB; --edge:#8A8474;
  --muted:#57647A; --ink-soft:#2A3646;
  --on-dark:#F5F4F0; --on-dark-2:#C6D2E0; --on-dark-3:#8FA3BC; --rule-dark:#24405F;
  --signal:#356F86; --signal-light:#7FB4C6;
  --pad:clamp(20px, 6.6vw, 96px);
  --sans:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Newsreader,"Times New Roman",Georgia,serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
p{margin:0;}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:600;letter-spacing:-0.02em;line-height:1.12;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--signal);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;}
ul{margin:0;padding:0;list-style:none;}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-dark);
  padding:12px 20px;z-index:100;font-size:14px;font-weight:600;}
.skip:focus{left:0;}

.wrap{padding-inline:var(--pad);}
.lbl{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;}
.body{font-family:var(--serif);font-size:clamp(16.5px,0.14vw + 15.92px,18px);line-height:1.65;font-weight:400;max-width:66ch;}
.lead{font-family:var(--serif);font-size:clamp(18.5px,0.24vw + 17.54px,21px);line-height:1.5;font-weight:300;max-width:62ch;}
.muted{color:var(--muted);}
.h-xl{font-size:clamp(38px,3.85vw + 22.6px,78px);letter-spacing:-0.035em;line-height:1.03;}
.h-lg{font-size:clamp(30px,2.5vw + 20px,56px);letter-spacing:-0.03em;line-height:1.06;}
.h-md{font-size:clamp(26px,1.73vw + 19.1px,44px);}
.h-sm{font-size:clamp(22px,0.96vw + 18.15px,32px);}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:20px;padding-inline:var(--pad);}
.brand{display:block;flex-shrink:0;}
.brand svg{color:var(--ink);}
.brand svg.on-dark{color:var(--on-dark);}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{font-size:14px;font-weight:500;}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ink);}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 22px;font-size:13.5px;font-weight:600;font-family:var(--sans);border:1px solid transparent;}
.btn-primary{background:var(--ink);color:var(--on-dark);}
.btn-primary:hover{background:var(--ink-2);color:var(--on-dark);}
.btn-ghost{border-color:var(--edge);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.btn-invert{background:var(--paper);color:var(--ink);}
.btn-invert:hover{background:#fff;color:var(--ink);}
.btn-outline-d{border-color:#63799B;color:var(--on-dark);}
.btn-outline-d:hover{border-color:var(--signal-light);color:var(--on-dark);}
.btn-lg{min-height:52px;padding:16px 30px;font-size:14.5px;}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--ink);margin-right:-10px;}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--paper);}
.mobile-nav.open{display:block;}
.mobile-nav a{display:flex;align-items:center;min-height:56px;padding-inline:var(--pad);
  border-bottom:1px solid var(--line);font-size:16px;font-weight:600;}

@media (max-width:900px){
  .nav{display:none;}
  .menu-btn{display:flex;}
}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--on-dark);padding-block:clamp(48px,7vw,104px);}
.hero .eyebrow{color:var(--signal-light);margin-bottom:clamp(20px,3vw,34px);}
.cut{position:relative;}
/* the channel: the identity's own device, slicing the headline edge to edge */
.cut::after{content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);
  top:calc(var(--h1) * 0.49);height:max(2px, calc(var(--h1) * 0.048));background:var(--ink);pointer-events:none;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,44px);}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:clamp(44px,7vw,96px);border-top:1px solid var(--rule-dark);}
.stats > div{padding:24px 22px 28px;border-right:1px solid var(--rule-dark);}
.stats > div:last-child{border-right:0;}
.stats .n{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-0.02em;}
.stats .lbl{color:var(--on-dark-3);margin-top:8px;}

/* ---------- generic sections ---------- */
.sec{padding-block:clamp(52px,7vw,104px);}
.sec-dark{background:var(--ink);color:var(--on-dark);}
.sec-dark .lbl{color:var(--signal-light);}
.sec-dark .body{color:var(--on-dark-2);}
.sec-tint{background:var(--paper-2);}
.rule-top{border-top:1px solid var(--line);padding-top:clamp(28px,4vw,44px);}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(32px,6vw,88px);}
.two-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);}
@media (max-width:860px){.two-wide{grid-template-columns:1fr;}}

/* hairline grid of cells */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.cells > *{background:var(--paper);}
.sec-dark .cells{background:var(--rule-dark);border-color:var(--rule-dark);}
.sec-dark .cells > *{background:var(--ink);}
.sec-tint .cells{background:#D3CFC5;border-color:#D3CFC5;}
.sec-tint .cells > *{background:var(--paper-2);}
.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.c6{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:1280px){.c6{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:980px){.c3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){.c6{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.c3,.c2{grid-template-columns:1fr;}}
@media (max-width:480px){.c6{grid-template-columns:1fr;}}

.card{padding:28px 26px 32px;display:flex;flex-direction:column;gap:13px;}
.card svg{width:26px;height:26px;color:var(--signal);}
.card h3{font-size:18.5px;}
.card p{font-family:var(--serif);font-size:15px;line-height:1.62;color:var(--muted);}
a.card:hover{background:var(--paper-2);color:var(--ink);}
a.card:hover h3{color:var(--signal);}
.sec-dark .card p{color:var(--on-dark-3);}

.cell-row{padding:17px 20px;font-size:14.5px;font-weight:500;}

/* chain diagram */
.chain{position:relative;margin-top:clamp(40px,6vw,76px);}
.chain::before{content:"";position:absolute;left:0;right:0;top:31px;height:6px;background:var(--ink);}
.chain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;}
.chain-grid > div{padding-right:32px;}
.chain .dot{width:68px;height:68px;border:6px solid var(--ink);border-radius:50%;background:var(--paper);}
.chain h3{font-size:19px;margin-top:10px;letter-spacing:-0.015em;}
.chain p{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--muted);margin-top:8px;}
@media (max-width:860px){
  .chain::before{display:none;}
  .chain-grid{grid-template-columns:1fr;gap:0;}
  .chain-grid > div{padding:18px 0;border-top:1px solid var(--line);display:grid;
    grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;}
  .chain .dot{width:38px;height:38px;border-width:5px;}
  .chain .chain-txt{grid-column:2;}
  .chain .lbl{grid-column:2;grid-row:1;}
}

/* definition rows */
.rows{border-top:1px solid var(--line);}
.rows > div{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;
  padding:24px 0;border-bottom:1px solid var(--line);}
.rows h3{font-size:17px;}
.rows p{font-family:var(--serif);font-size:15.5px;line-height:1.65;color:var(--muted);}
@media (max-width:760px){.rows > div{grid-template-columns:1fr;gap:8px;}}

.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{border:1px solid var(--edge);padding:11px 18px;font-size:14.5px;font-weight:500;}

.note{background:var(--paper-2);padding:clamp(28px,4vw,52px);}
.sec-dark .note{background:var(--ink-2);}

/* sidebar layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0;}
.split > .main{padding:clamp(44px,6vw,76px) clamp(28px,4vw,72px) clamp(52px,7vw,96px) var(--pad);}
.split > .side{border-left:1px solid var(--line);
  padding:clamp(44px,6vw,76px) var(--pad) clamp(52px,7vw,96px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:36px;}
@media (max-width:1000px){
  .split{grid-template-columns:1fr;}
  .split > .main{padding-inline:var(--pad);}
  .split > .side{border-left:0;border-top:1px solid var(--line);padding-inline:var(--pad);padding-top:44px;}
}

/* forms */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{color:var(--muted);}
.field input,.field textarea,.field select{font-family:var(--sans);font-size:15px;color:var(--ink);
  border:1px solid var(--edge);background:#fff;padding:13px 14px;min-height:48px;border-radius:0;}
.field textarea{min-height:132px;resize:vertical;}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:640px){.grid2{grid-template-columns:1fr;}}

/* footer */
.ftr{background:var(--deep);color:var(--on-dark);padding-block:clamp(48px,6vw,72px) 40px;}
.ftr a{color:#DDE5EE;}
.ftr a:hover{color:var(--signal-light);}
.ftr-cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);}
@media (max-width:900px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.ftr-cols{grid-template-columns:1fr;}}
.ftr .lbl{color:var(--on-dark-3);}
.ftr-links{display:flex;flex-direction:column;gap:11px;font-size:14.5px;}
.ftr-bottom{border-top:1px solid #17304C;margin-top:clamp(32px,5vw,52px);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;}
.ftr-bottom .body{font-size:13.5px;color:var(--on-dark-3);}

.prose p + p{margin-top:18px;}
.prose h2{margin-top:38px;margin-bottom:14px;font-size:22px;}
.prose ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.prose li{font-family:var(--serif);font-size:16.5px;line-height:1.7;color:var(--ink-soft);
  padding-left:20px;position:relative;}
.prose li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1.5px;background:var(--signal);}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none !important;}}
@media print{.hdr,.mobile-nav,.hero-actions{display:none;}body{background:#fff;}}

/* ---------- review fixes ---------- */
/* .card p (0,1,1) was beating .lbl (0,1,0): labels rendered 15px serif inside cards */
.card .lbl,.chain .lbl,.ftr .lbl,.side .lbl{font-family:var(--sans);font-size:11px;
  font-weight:600;letter-spacing:0.16em;text-transform:uppercase;line-height:1.4;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* incident path: one tap from any page on mobile */
.tel-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  background:var(--ink);color:var(--on-dark);font-size:13px;font-weight:600;}
.tel-btn:hover{background:var(--ink-2);color:var(--on-dark);}
.tel-btn svg{width:17px;height:17px;}
@media (max-width:900px){.tel-btn{display:inline-flex;}.hdr-in{gap:10px;}}
@media (max-width:380px){.tel-btn span{display:none;}.tel-btn{padding:0 12px;}}
.mnav-tel{background:var(--ink);color:var(--on-dark) !important;}
.mnav-tel:hover{background:var(--ink-2);color:var(--on-dark) !important;}
.mnav-tel .num{font-weight:700;}

/* form validation */
.req{color:var(--signal);font-weight:700;}
.field-hint{font-size:12.5px;color:var(--muted);}
.err{font-size:13px;font-weight:500;color:#A32F2F;margin-top:6px;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#A32F2F;
  box-shadow:inset 0 0 0 1px #A32F2F;}
.form-status{padding:16px 18px;font-size:15px;font-weight:500;margin-top:24px;}
.form-status[data-state="error"]{background:#F7E9E9;color:#8A2727;border-left:3px solid #A32F2F;}
.form-status[data-state="ok"]{background:#E7F0EA;color:#1F5133;border-left:3px solid #2E7D4F;}
.chip:has(input:checked){background:var(--ink);color:var(--on-dark);border-color:var(--ink);}

/* 2.4.11 Focus Not Obscured — the sticky header is ~85px and would cover focused targets */
html{scroll-padding-top:110px;}
:target,[id]:focus{scroll-margin-top:110px;}
#main:focus{outline:none;}

/* map placeholder label was 2.96:1 */
.map-ph{color:#6B6555;}

/* print: dark sections would otherwise print white-on-white */
@media print{
  .hero,.sec-dark,.ftr{background:#fff !important;color:#000 !important;}
  .hero *,.sec-dark *,.ftr *{color:#000 !important;}
  .cut::after{display:none;}
  .btn{border:1px solid #000 !important;background:#fff !important;color:#000 !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;}
}

/* desktop incident affordance — .tel-btn is mobile-only by design */
.nav-tel{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ink);border:1px solid var(--edge);padding:9px 13px;min-height:40px;}
.nav-tel:hover{border-color:var(--ink);color:var(--ink);}
@media (max-width:900px){.nav-tel{display:none;}}

/* ---------- typography review ---------- */
/* Measure was unconstrained: .rows p ran to 98 cpl at 1440, .prose p to 95. */
.prose p,.prose li,.rows p{max-width:66ch;}
.chain p,.cell-row{max-width:52ch;}

/* .cut derives BOTH position and height from --h1, so this must mirror .h-xl exactly.
   Single source of truth: do not redeclare --h1 on .cut anywhere else. */
.cut{--h1:clamp(38px,3.85vw + 22.6px,78px);}

/* 15 measured widows across the site, no text-wrap anywhere. */
h1,h2,h3,h4{text-wrap:balance;}
p,li{text-wrap:pretty;}

/* A span-2 card in a 3-track grid creates an implicit track, which defeated the
   single-column collapse below 640px and overflowed a 320px viewport. */
.cells.c3 > .card-wide{grid-column:span 2;}
@media (max-width:640px){.cells.c3 > .card-wide{grid-column:auto;}}

/* ---------- hero channel ----------
   The channel device reads as a strikethrough on a multi-line hero headline: it says
   the opposite of the sentence it cuts. Removed from headings; the motif stays where
   it works — the through-line joining the four nodes of the chain diagram. */
.cut::after{display:none;}