/*
Theme Name: Wire Wire
Theme URI: https://wireme.co.za
Author: Wire Wire
Description: Wire Wire prepaid internet theme. Built for Elementor - header, footer and nav live here; every page body is an Elementor template you can edit freely.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: wire-wire
Tags: elementor, one-column, custom-menu, custom-logo, full-width-template
*/

:root{
  --ww-purple:#63207f;
  --ww-purple-deep:#3d0f52;
  --ww-purple-dark:#2a0a3a;
  --ww-yellow:#f5c400;
  --ww-yellow-soft:#ffe680;
  --ww-lilac:#f4ebf8;
  --ww-lilac-2:#e6d6ee;
  --ww-ink:#2b1533;
  --ww-paper:#ffffff;
  --ww-mist:#faf7fb;
  --ww-r:26px;
  --ww-r-sm:16px;
  --ww-r-pill:999px;
  --ww-shell:min(1560px,95vw);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ww-mist);
  color:var(--ww-ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ww-purple);text-decoration:none}
a:hover{color:var(--ww-purple-deep);text-decoration:underline}
h1,h2,h3,h4,h5,h6{font-family:'Archivo',system-ui,sans-serif;font-weight:800;line-height:1.05;margin:0 0 .5em}
:focus-visible{outline:2px solid var(--ww-purple);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.ww-skip{position:absolute;left:-9999px}
.ww-skip:focus{left:16px;top:16px;z-index:999;background:#fff;padding:12px 18px;border-radius:var(--ww-r-pill)}

/* ---------- Header ---------- */
.ww-header{position:sticky;top:0;z-index:50;background:var(--ww-paper);box-shadow:0 1px 0 rgba(43,21,51,.08)}
.ww-header__inner{
  max-width:var(--ww-shell);margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:16px clamp(16px,4vw,32px);
}
.ww-logo{display:flex;align-items:center;flex:0 0 auto}
.ww-logo img{height:clamp(32px,3.4vw,46px);width:auto}
.ww-logo .ww-logo__text{font-weight:800;font-size:22px;color:var(--ww-purple)}
.ww-nav{flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
.ww-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:2px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;
}
.ww-nav ul::-webkit-scrollbar{display:none}
.ww-nav ul ul{display:none}
.ww-nav a{
  display:block;padding:9px 12px;border-radius:var(--ww-r-pill);
  font-size:13.5px;font-weight:700;color:var(--ww-ink);white-space:nowrap;text-decoration:none;
}
.ww-nav a:hover{background:var(--ww-lilac);color:var(--ww-purple);text-decoration:none}
.ww-nav .current-menu-item>a,.ww-nav .current_page_item>a{background:var(--ww-lilac);color:var(--ww-purple)}
.ww-header__cta{
  flex:0 0 auto;background:var(--ww-yellow);color:var(--ww-ink);
  padding:12px 20px;border-radius:var(--ww-r-pill);
  font-weight:800;font-size:14px;white-space:nowrap;text-decoration:none;
}
.ww-header__cta:hover{background:var(--ww-yellow-soft);color:var(--ww-ink);text-decoration:none}
.ww-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ww-ink)}
.ww-burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}

@media(max-width:900px){
  .ww-burger{display:block;order:3}
  .ww-nav{order:4;flex:1 1 100%;display:none}
  .ww-nav.is-open{display:block}
  .ww-nav ul{flex-wrap:wrap;justify-content:flex-start;padding-top:8px}
  .ww-header__inner{flex-wrap:wrap}
}

/* ---------- Site content ---------- */
.ww-main{display:block}
.ww-shell{max-width:var(--ww-shell);margin:0 auto;padding:clamp(20px,3vw,34px) clamp(16px,4vw,32px) 60px}
.ww-prose h1{font-size:clamp(30px,4vw,60px)}
.ww-prose h2{font-size:clamp(24px,3vw,42px)}
.ww-prose{background:var(--ww-paper);border-radius:var(--ww-r);padding:clamp(24px,3vw,44px)}

/* ---------- Footer ---------- */
.ww-footer{background:var(--ww-purple-dark);color:#fff}
.ww-footer a{color:#fff}
.ww-footer__inner{position:relative;overflow:hidden;max-width:var(--ww-shell);margin:0 auto;padding:clamp(34px,4vw,60px) clamp(16px,4vw,32px)}
.ww-footer__watermark{position:absolute;left:-4%;bottom:-34%;width:40%;opacity:.06;pointer-events:none}
.ww-footer__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:34px;
}
.ww-footer__lockup{height:84px;width:auto;margin-bottom:18px}
.ww-footer__tag{font-weight:800;font-size:20px;line-height:1.15}
.ww-footer__label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ww-yellow);margin-bottom:14px}
.ww-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ww-footer__btn{display:inline-block;background:var(--ww-yellow);color:var(--ww-ink)!important;padding:14px 22px;border-radius:var(--ww-r-pill);font-weight:800;font-size:15px}
.ww-footer__btn:hover{background:var(--ww-yellow-soft);text-decoration:none}
.ww-footer__badges{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px}
.ww-footer__badges .ww-pay{display:flex;align-items:center;gap:18px;flex-wrap:wrap;opacity:.75}
.ww-footer__badges .ww-pay img{height:20px;width:auto}
.ww-footer__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-size:13px;opacity:.72}

/* ---------- Ticker (also used by the Elementor widget) ---------- */
@keyframes ww-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ww-ticker{background:var(--ww-purple-deep);color:#fff;overflow:hidden;padding:11px 0}
.ww-ticker__track{display:flex;width:max-content;animation:ww-marquee 30s linear infinite}
.ww-ticker__set{display:flex;align-items:center;gap:44px;padding-right:44px;flex:0 0 auto;
  font-weight:800;font-size:clamp(11px,.85vw,16px);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ww-ticker__set span:nth-child(even){color:var(--ww-yellow)}
@media(prefers-reduced-motion:reduce){.ww-ticker__track{animation:none}}