/*
Theme Name: VOGICE
Theme URI: https://vogice.sa/
Author: VOGICE
Description: Conversion-focused theme for dry ice supply and industrial cleaning businesses in Saudi Arabia. Bilingual English/Arabic with full RTL, built-in dry ice calculator, WhatsApp-first lead capture and LocalBusiness, Service, Product and FAQ schema. Designed for speed: no jQuery, no framework, one stylesheet, one script.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vogice
Tags: business, one-column, custom-colors, custom-logo, custom-menu, rtl-language-support, translation-ready, block-patterns, full-width-template
*/

:root{
 --bg:#0B2031;--bg2:#0E2A3C;--panel:#10303F;--panel2:#123A4D;--hover:#154458;
 --ice:#81CCEC;--ice2:#A8DDF3;--iceink:#0B2031;--wa:#1FAF54;--wa2:#25C763;
 --text:#DADBDD;--mid:#BCC8CE;--soft:#9AAAB4;--dim:#8A9BA6;--faint:#7C8E9A;
 --navy:#015B7D;--blue:#2E99BB;--frost:#CFE7F3;
 --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.14);--line3:rgba(255,255,255,.2);
 --disp:"Archivo",system-ui,sans-serif;--mono:"IBM Plex Mono",monospace;--ar:"IBM Plex Sans Arabic",Tahoma,sans-serif;

  --img-hero:url('assets/img/hero.svg');
 --img-blast:url('assets/img/blast.svg');
 --img-g1:url('assets/img/gallery-1.svg');
 --img-g2:url('assets/img/gallery-2.svg');
 --img-g3:url('assets/img/gallery-3.svg');
 --img-g4:url('assets/img/gallery-4.svg');
}

/* photo box: uses your image, falls back to a gradient if the slot is empty */
.ph{position:relative;border:1px solid rgba(255,255,255,.1);background-color:var(--panel);
 background-position:center;background-size:cover;background-repeat:no-repeat;aspect-ratio:4/3;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,12,0) 45%,rgba(7,9,12,.75))}
.ph figcaption{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:16px 18px;font-size:12.5px;color:var(--mid)}
/* drawn scene shown until you set a real photo — the JS at the bottom of the
   page removes it automatically the moment that slot has a url() in it */
.ph.h1i{background-image:var(--img-blast),linear-gradient(150deg,#103A52,#0A2634)}
.g1{background-image:var(--img-g1),linear-gradient(150deg,#0E3D55,#0A2634)}
.g2{background-image:var(--img-g2),linear-gradient(150deg,#0B2A3C,#0A2634)}
.g3{background-image:var(--img-g3),linear-gradient(150deg,#124559,#0A2634)}
.g4{background-image:var(--img-g4),linear-gradient(150deg,#0D3347,#0A2634)}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.gal .ph{border:0;aspect-ratio:1/1}

/* drawn illustrations sit on the product cards */
.art{display:block;width:100%;height:104px;margin-bottom:16px}
.ico{width:26px;height:26px;color:var(--ice);margin-bottom:12px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--disp);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ice);text-decoration:none}
a:hover{color:var(--ice2)}
ul{margin:0;padding:0;list-style:none}
p,h1,h2,h3{margin:0}
::selection{background:var(--ice);color:var(--bg)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:24px}
.sec{padding-block:clamp(48px,6vw,76px)}
.sec-t{padding-block:clamp(30px,4vw,44px)}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(30px,4vw,52px);align-items:center}
.split.top{align-items:start}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.hair{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.h2c{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.h3c{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.h4c{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.hair>*{background:var(--panel);padding:28px}
.hair a:hover,a.cell:hover{background:var(--hover)}

h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;letter-spacing:-.028em;line-height:1.03;text-wrap:balance}
h2{font-size:clamp(27px,3.3vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.h4{font-size:16px;font-weight:700}
.lead{font-size:17px;line-height:1.7;color:var(--soft);max-width:60ch;text-wrap:pretty}
.p{font-size:14.5px;line-height:1.7;color:var(--dim)}
.p.br{color:var(--soft)}
.ice{color:var(--ice)}
.lab{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ice);text-transform:uppercase}
.lab.dim{color:var(--faint)}
.badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ice);border:1px solid rgba(129,204,236,.34);padding:7px 12px;text-transform:uppercase}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ice);display:inline-block}
.dot.live{background:#1FAF54;animation:pulse 2s ease-in-out infinite}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:15px;padding:14px 24px;border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.btn.ice{background:linear-gradient(135deg,var(--blue),var(--ice));color:var(--iceink)}
.btn.ice:hover{background:linear-gradient(135deg,#3FA9C9,var(--ice2));color:var(--iceink)}
.btn.gh{border-color:var(--line3);color:var(--text);background:transparent}
.btn.gh:hover{border-color:var(--ice);color:var(--ice)}
.btn.sm{padding:10px 16px;font-size:13.5px}
.btn.full{width:100%}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.tl{font-size:14px;font-weight:600;color:var(--ice);border-bottom:1px solid rgba(129,204,236,.45);padding-bottom:3px}

header{position:sticky;top:0;z-index:50;background:rgba(11,32,49,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:22px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;margin-inline-end:auto;color:var(--text)}
.mark{width:34px;height:34px;border:1.5px solid var(--ice);display:grid;place-items:center;position:relative;flex:none}
.mark i{width:12px;height:12px;background:var(--ice);display:block}
.mark::after{content:"";position:absolute;inset:-1.5px;border:1.5px solid rgba(129,204,236,.28);transform:rotate(45deg)}
.wm{font-size:19px;font-weight:800;letter-spacing:.16em;line-height:1;font-family:var(--disp)}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--faint);margin-top:3px;text-transform:uppercase;display:block}
nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav a{padding:8px 12px;font-size:13.5px;font-weight:500;color:var(--mid)}
nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.lng{font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:8px 11px;border:1px solid var(--line2);color:var(--mid);background:none;cursor:pointer}
.lng:hover{border-color:var(--ice);color:var(--ice)}

.hero{position:relative;overflow:hidden;background-image:var(--img-hero);background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;top:-20%;left:50%;width:120vw;height:70vh;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(46,153,187,.28),rgba(11,32,49,0) 62%);pointer-events:none;animation:drift 18s ease-in-out infinite;z-index:1}
/* scrim keeps the headline readable over any photo you drop in */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,32,49,.94) 38%,rgba(11,32,49,.60));pointer-events:none}
.hero>.wrap{position:relative;z-index:2}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}

.spec{border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(1,91,125,.42),rgba(14,42,60,.95));padding:28px}
.st b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.st b small{font-size:16px;color:var(--faint)}
.st span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);margin-top:8px;text-transform:uppercase}
.st.big b{font-size:28px;color:var(--ice)}
.st.big span{font-family:var(--disp);font-size:13px;letter-spacing:0;color:var(--dim);text-transform:none;line-height:1.5}

.step{border-top:2px solid var(--line2);padding-top:18px}
.step.one{border-top-color:var(--ice)}
.step .lab{color:var(--faint)}
.step.one .lab{color:var(--ice)}
.step h3{margin-top:10px}
.step .p{margin-top:8px}

.tw{border:1px solid rgba(255,255,255,.1);overflow-x:auto}
table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}
th{background:var(--panel2);font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ice);text-align:start;padding:16px 18px;font-weight:400;text-transform:uppercase}
td{padding:16px 18px;border-top:1px solid var(--line);color:var(--soft)}
td:first-child{font-weight:700;color:var(--text)}
tbody tr:nth-child(even){background:var(--bg2)}
.yes{color:var(--ice)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line2);padding:7px 12px;font-size:13px;color:var(--mid);background:none;font-family:inherit;cursor:default}
button.chip{cursor:pointer}
.rows{display:grid;gap:14px;margin-top:16px;font-size:14px}
.row{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px}
.row:last-child{border-bottom:none;padding-bottom:0}
.row b{font-family:var(--mono);color:var(--ice);font-weight:400;letter-spacing:.08em}

details{border-top:1px solid var(--line);padding-block:18px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:16.5px;font-weight:700}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ice);font-size:22px;line-height:1;flex:none}
details[open] summary::after{content:"\2013"}
details .p{margin-top:12px;max-width:78ch}

label.f{display:block;margin-bottom:14px}
label.f>span{display:block;font-size:12.5px;color:var(--soft);margin-bottom:7px}
input,select{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--text);padding:12px 13px;font-size:14px;font-family:var(--disp);border-radius:0}
input:focus,select:focus{border-color:var(--ice);outline:none}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--ice)}
.fine{font-size:12px;color:var(--faint);line-height:1.6;margin-top:14px}

.float{position:fixed;bottom:24px;inset-inline-end:24px;z-index:90;display:inline-flex;align-items:center;gap:11px;background:var(--wa);color:#fff;padding:13px 19px;border-radius:999px;box-shadow:0 10px 32px rgba(0,0,0,.55);font-weight:700;font-size:14.5px}
.float:hover{background:var(--wa2);color:#fff}

footer{border-top:1px solid var(--line);background:var(--bg)}
footer ul{display:grid;gap:9px;font-size:13.5px}
footer ul a{color:var(--soft)}
footer ul a:hover{color:#fff}
.fbar{border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#6A8598;padding-block:20px 40px;text-transform:uppercase}

@keyframes drift{0%,100%{transform:translateX(-50%) scale(1);opacity:.55}50%{transform:translateX(-48%) scale(1.12);opacity:.8}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
html{scroll-behavior:smooth}

/* ---- ARABIC / RTL ---- */
html[dir=rtl] body{font-family:var(--ar);line-height:1.9}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .h4,
html[dir=rtl] .btn,html[dir=rtl] input,html[dir=rtl] select,html[dir=rtl] summary{font-family:var(--ar);letter-spacing:0}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{font-weight:700;line-height:1.35}
/* IBM Plex Mono has no Arabic glyphs, and letter-spacing breaks joined letterforms */
html[dir=rtl] .lab,html[dir=rtl] .badge,html[dir=rtl] .tag,html[dir=rtl] .trust,
html[dir=rtl] th,html[dir=rtl] .st span,html[dir=rtl] .fbar,html[dir=rtl] .row b,html[dir=rtl] .lng{
 font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12px}
html[dir=rtl] .wm{font-family:var(--disp);letter-spacing:.16em;direction:ltr}
html[dir=rtl] .lead{max-width:56ch}
/* keep Latin runs from reordering inside RTL text: −78.5°C must not become C°78.5− */
bdi{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ==========================================================================
   WordPress integration
   ========================================================================== */
.hcta{display:flex;align-items:center;gap:10px}
.mark-img{flex:none}
.custom-logo{max-height:52px;width:auto;flex:none}
@media (max-width:600px){.custom-logo{max-height:40px}}
.btn-lg{font-size:16px;padding:17px 30px}
.cta-band{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(1,91,125,.35),rgba(11,32,49,1))}
.cta-row{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.opt.on{border-color:var(--ice);color:var(--ice)}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--ice)}
.crumb span{margin-inline:8px}

/* menus from Appearance → Menus */
nav ul{display:flex;align-items:center;gap:2px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
nav li a{padding:8px 12px;font-size:13.5px;font-weight:500;color:var(--mid);display:block}
nav li a:hover{background:rgba(255,255,255,.06);color:#fff}
nav .current-menu-item>a{color:var(--ice)}
footer nav ul{display:grid;gap:9px}
footer nav li a{padding:0;color:var(--soft);font-size:13.5px}

/* sticky header would otherwise hide the top of a jumped-to section */
section[id]{scroll-margin-top:88px}

/* editor content */
.entry{font-size:16px;color:var(--mid);line-height:1.8}
.entry h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 12px}
.entry h3{font-size:20px;margin:28px 0 10px}
.entry p{margin:0 0 16px}
.entry ul,.entry ol{margin:0 0 18px;padding-inline-start:22px;list-style:revert}
.entry li{margin-bottom:8px}
.entry a{border-bottom:1px solid rgba(129,204,236,.45)}
.entry blockquote{border-inline-start:2px solid var(--ice);padding-inline-start:18px;margin:24px 0;color:var(--soft)}
.entry img,.entry figure{margin:24px 0}
.entry table{min-width:0}
.entry code{font-family:var(--mono);font-size:.9em;background:var(--panel);padding:2px 6px}
.entry pre{background:var(--panel);border:1px solid var(--line);padding:18px;overflow-x:auto}

.nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav-links a,.nav-links span{padding:9px 14px;border:1px solid var(--line2);font-size:14px}
.nav-links a:hover{border-color:var(--ice)}
.post-navigation .nav-links{justify-content:space-between}

.comment-list{list-style:none;margin:24px 0;padding:0}
.comment-list li{border-top:1px solid var(--line);padding-block:18px}
.comment-form input,.comment-form textarea{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--text);padding:12px 13px;font-family:var(--disp);font-size:16px}
.comment-form label{display:block;font-size:12.5px;color:var(--soft);margin-bottom:6px}
.comment-form p{margin-bottom:14px}
.comment-form .submit{width:auto;background:var(--ice);color:var(--iceink);border:0;padding:14px 24px;font-weight:700;cursor:pointer}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{max-width:none}
.aligncenter{margin-inline:auto;text-align:center}
.wp-caption-text,.entry figcaption{font-size:12.5px;color:var(--faint);margin-top:8px}

/* ==========================================================================
   MOBILE
   Most visitors arrive on a phone, so this section is not an afterthought.
   ========================================================================== */

/* Grids: min(100%, N) stops a track wider than the screen from forcing
   horizontal scroll on narrow phones. Plain minmax(320px,1fr) overflows
   below ~360px, which is where a lot of Android traffic sits. */
.split{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.h2c{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.h3c{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.h4c{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.gal{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* Menu toggle */
.burger{display:none;width:46px;height:46px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:1px solid var(--line2);cursor:pointer;padding:0;flex:none}
.burger span{display:block;width:20px;height:2px;background:var(--text);transition:transform .2s ease,opacity .15s ease}
.burger:hover{border-color:var(--ice)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
	.burger{display:flex}
	.hrow{gap:12px;padding-block:12px}

	/* The menu collapses instead of wrapping into three cramped rows. */
	/* Shown by default so the menu still works if the script fails to load;
	   the .js class (set in the head) is what hides it and hands control to
	   the button. A menu that depends entirely on JS is a menu that
	   occasionally is not there. */
	.nav-main{order:3;width:100%;display:block;border-top:1px solid var(--line);margin-top:2px;padding-block:4px 8px}
	html.js .nav-main{display:none}
	html.js .nav-main.open{display:block}
	html:not(.js) .burger{display:none}
	.nav-main a,.nav-main li a{display:block;padding:15px 2px;font-size:16px;color:var(--mid);
	  border-bottom:1px solid rgba(255,255,255,.07)}
	.nav-main a:hover,.nav-main li a:hover{background:transparent;color:var(--ice)}
	.nav-main ul{display:block;gap:0}
	.nav-main a:last-child,.nav-main li:last-child a{border-bottom:0}

	.hair>*{padding:22px}
	.sec{padding-block:44px}
	.split{gap:30px}
}

@media (max-width:760px){
	/* 16px is the threshold below which iOS Safari zooms the whole page in
	   when a field is focused, and never zooms back out. */
	input,select,textarea,.input,.vg-input{font-size:16px}

	h1{font-size:clamp(30px,8.2vw,42px);line-height:1.08}
	h2{font-size:clamp(24px,6vw,32px)}
	.lead{font-size:16px}
	.wrap{padding-inline:18px}

	/* Wide spec tables scroll sideways — make that discoverable rather than
	   letting people assume the last columns do not exist. */
	.tw{position:relative}
	.tw::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:34px;
	  background:linear-gradient(to left,var(--bg),transparent);pointer-events:none}
	html[dir="rtl"] .tw::after{background:linear-gradient(to right,var(--bg),transparent)}
	table{min-width:520px}
	th,td{padding:13px 14px}

	.trust{gap:14px;font-size:10px;margin-top:28px;padding-top:20px}
	.cta-row{gap:22px}
	.btn-lg{width:100%}

	/* Quantity and city stop being a squeezed two-up. */
	#qform div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}

	/* Room for the floating button so it never sits on the legal line. */
	.fbar{padding-bottom:96px}
	footer .g4{gap:28px}
}

@media (max-width:480px){
	.float span{display:none}
	.float{padding:15px;inset-inline-end:16px;bottom:16px}

	/* Header CTA text is redundant next to the floating button at this width. */
	.hcta .btn.sm{display:none}
	.tag{display:none}
	.wm{font-size:17px}

	.btns .btn{width:100%}
	.hair>*{padding:20px}
	.spec{padding:22px}
	.st b{font-size:26px}
	.badge{font-size:10px;letter-spacing:.14em;padding:6px 10px}
	.chips{gap:6px}
	.chip{font-size:12.5px;padding:9px 12px}
	summary{font-size:15.5px}
	.lng{padding:10px 12px}
}

/* Anything tappable should clear roughly 44px, per the iOS and Android
   guidelines — undersized targets are the most common mobile usability
   complaint and they cost conversions on a phone-first site. */
@media (pointer:coarse){
	.btn{min-height:46px}
	.opt,.lng,.chip{min-height:42px;display:inline-flex;align-items:center}
	summary{padding-block:4px}
	footer ul a,.nav-links a{display:inline-block;padding-block:6px}
}