/*
Theme Name: AiNet DeviceBase
Theme URI: https://ainet.ng/
Author: AiNet
Author URI: https://ainet.ng/
Description: An Elementor-compatible Nigerian technology publication theme with a structured phone specification database, finder, comparison and CSV tools.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ainet-devicebase
Tags: news, technology, elementor, custom-logo, featured-images, responsive-layout
*/

:root {
  --adb-ink: #0b1728;
  --adb-navy: #071a2e;
  --adb-navy-2: #0d2c49;
  --adb-teal: #00a67d;
  --adb-teal-dark: #007d61;
  --adb-lime: #c9ff63;
  --adb-amber: #ffbd59;
  --adb-paper: #f4f7fa;
  --adb-white: #fff;
  --adb-muted: #687486;
  --adb-line: #dce3eb;
  --adb-soft: #eaf1f5;
  --adb-danger: #b42318;
  --adb-radius: 18px;
  --adb-radius-lg: 28px;
  --adb-shadow: 0 18px 48px rgba(7, 26, 46, .10);
  --adb-container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--adb-paper); color: var(--adb-ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; margin: 0; }
body.admin-bar .adb-site-header { top: 32px; }
a { color: var(--adb-teal-dark); text-decoration: none; }
a:hover { color: var(--adb-teal); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--adb-amber); outline-offset: 3px; }
img { height: auto; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.adb-container { margin-left: auto; margin-right: auto; max-width: var(--adb-container); padding-left: 22px; padding-right: 22px; width: 100%; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; width: 1px; }
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; color: var(--adb-ink); display: block; height: auto; left: 8px; padding: 12px; top: 8px; width: auto; z-index: 100000; }

.adb-site-header { background: var(--adb-white); box-shadow: 0 8px 24px rgba(7,26,46,.06); position: sticky; top: 0; z-index: 999; }
.adb-topbar { background: var(--adb-navy); color: #b8c7d7; font-size: 11px; }
.adb-topbar > div { align-items: center; display: flex; justify-content: space-between; min-height: 34px; }
.adb-topbar ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.adb-topbar a { color: #d9e3ec; }
.adb-header-main { align-items: center; display: grid; gap: 28px; grid-template-columns: auto minmax(280px, 1fr) auto auto; min-height: 92px; }
.adb-branding { align-items: flex-start; display: flex; flex-direction: column; }
.custom-logo { display: block; max-height: 52px; width: auto; }
.adb-wordmark { color: var(--adb-navy) !important; font-size: 34px; font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.adb-wordmark span { color: var(--adb-teal); }
.adb-branding small { color: var(--adb-muted); font-size: 9px; font-weight: 800; letter-spacing: .11em; margin-top: 7px; text-transform: uppercase; }
.adb-live-search { justify-self: center; max-width: 600px; position: relative; width: 100%; }
.adb-live-search > input { background: #f1f5f8; border: 1px solid transparent; border-radius: 999px; color: var(--adb-ink); height: 48px; padding: 0 52px 0 20px; width: 100%; }
.adb-live-search > input:focus { background: #fff; border-color: var(--adb-teal); box-shadow: 0 0 0 4px rgba(0,166,125,.10); outline: 0; }
.adb-live-search > button { background: var(--adb-teal); border: 0; border-radius: 50%; color: #fff; cursor: pointer; font-size: 24px; height: 38px; line-height: 1; position: absolute; right: 5px; top: 5px; width: 38px; }
.adb-live-search__results { background: #fff; border: 1px solid var(--adb-line); border-radius: 14px; box-shadow: var(--adb-shadow); left: 0; max-height: 480px; overflow-y: auto; padding: 8px; position: absolute; right: 0; top: calc(100% + 9px); z-index: 50; }
.adb-live-result { align-items: center; border-radius: 10px; color: var(--adb-ink) !important; display: grid; gap: 12px; grid-template-columns: 52px 1fr auto; padding: 9px; }
.adb-live-result:hover { background: var(--adb-paper); }
.adb-live-result img, .adb-live-result__placeholder { align-items: center; background: var(--adb-soft); border-radius: 8px; display: flex; height: 52px; justify-content: center; object-fit: contain; width: 52px; }
.adb-live-result strong { display: block; font-size: 13px; line-height: 1.3; }
.adb-live-result small { color: var(--adb-teal-dark); font-size: 11px; font-weight: 700; }
.adb-live-search__state { color: var(--adb-muted); font-size: 13px; padding: 16px; text-align: center; }
.adb-header-compare { align-items: center; color: var(--adb-ink) !important; display: flex; font-size: 12px; font-weight: 800; gap: 8px; }
.adb-header-compare span { align-items: center; background: var(--adb-lime); border-radius: 50%; display: flex; height: 27px; justify-content: center; width: 27px; }
.adb-menu-toggle { background: transparent; border: 0; cursor: pointer; display: none; height: 40px; padding: 8px; width: 42px; }
.adb-menu-toggle > span:not(.screen-reader-text) { background: var(--adb-ink); display: block; height: 2px; margin: 5px 0; width: 24px; }
.adb-primary-nav { border-top: 1px solid var(--adb-line); }
.adb-menu { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.adb-menu > li { position: relative; }
.adb-menu > li > a { color: var(--adb-ink); display: block; font-size: 12px; font-weight: 800; padding: 15px 0; text-transform: uppercase; }
.adb-menu > li > a:hover { color: var(--adb-teal-dark); }
.adb-menu .sub-menu { background: #fff; border: 1px solid var(--adb-line); border-radius: 12px; box-shadow: var(--adb-shadow); display: none; left: -15px; list-style: none; margin: 0; min-width: 210px; padding: 8px; position: absolute; top: 100%; }
.adb-menu li:hover > .sub-menu, .adb-menu li:focus-within > .sub-menu { display: block; }
.adb-menu .sub-menu a { border-radius: 8px; color: var(--adb-ink); display: block; font-size: 13px; padding: 9px 10px; }
.adb-menu .sub-menu a:hover { background: var(--adb-paper); }

.adb-button { align-items: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 800; justify-content: center; min-height: 45px; padding: 10px 18px; }
.adb-button--primary { background: var(--adb-teal); color: #fff !important; }
.adb-button--primary:hover { background: var(--adb-teal-dark); }
.adb-button--lime { background: var(--adb-lime); color: var(--adb-navy) !important; }
.adb-button--lime:hover { background: #d9ff91; }
.adb-button--ghost { border-color: rgba(7,26,46,.22); color: var(--adb-ink) !important; }
.adb-button--ghost-light { border-color: rgba(255,255,255,.25); color: #fff !important; }
.adb-eyebrow { color: var(--adb-teal-dark) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: .14em; margin: 0 0 10px !important; text-transform: uppercase; }

.adb-home-hero { background: var(--adb-navy); color: #fff; overflow: hidden; padding: clamp(52px,7vw,92px) 0; position: relative; }
.adb-home-hero::after { background: radial-gradient(circle, rgba(0,166,125,.35), transparent 65%); content: ''; height: 700px; pointer-events: none; position: absolute; right: -300px; top: -350px; width: 700px; }
.adb-home-hero__grid { align-items: center; display: grid; gap: clamp(38px,6vw,80px); grid-template-columns: minmax(0,.95fr) minmax(390px,1.05fr); position: relative; z-index: 1; }
.adb-home-hero .adb-eyebrow { color: var(--adb-lime) !important; }
.adb-home-hero__copy h1 { color: #fff; font-size: clamp(48px,6vw,78px); font-weight: 850; letter-spacing: -.06em; line-height: .98; margin: 0 0 24px; }
.adb-home-hero__copy > p:not(.adb-eyebrow) { color: #b7c6d5; font-size: 17px; line-height: 1.7; margin: 0 0 30px; max-width: 650px; }
.adb-home-hero__copy > div { display: flex; flex-wrap: wrap; gap: 10px; }
.adb-home-hero__copy .adb-button--ghost { border-color: rgba(255,255,255,.25); color: #fff !important; }
.adb-home-hero__finder { background: #fff; border-radius: var(--adb-radius-lg); box-shadow: 0 28px 80px rgba(0,0,0,.22); color: var(--adb-ink); padding: clamp(24px,4vw,42px); }
.adb-home-hero__finder > p { font-size: 21px; font-weight: 850; letter-spacing: -.025em; margin: 0 0 18px; }
.adb-hero-promises { border-top: 1px solid var(--adb-line); color: var(--adb-muted); display: flex; flex-wrap: wrap; font-size: 10px; font-weight: 750; gap: 8px 16px; letter-spacing: .04em; margin-top: 20px; padding-top: 18px; text-transform: uppercase; }
.adb-hero-promises span::before { color: var(--adb-teal); content: '✓'; margin-right: 6px; }
.adb-brand-rail { background: #fff; border-bottom: 1px solid var(--adb-line); }
.adb-brand-rail > div { align-items: center; display: flex; gap: 22px; min-height: 74px; overflow-x: auto; }
.adb-brand-rail > div > span { color: var(--adb-muted); flex: 0 0 auto; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.adb-brand-rail > div > div { display: flex; gap: 9px; }
.adb-brand-rail a { align-items: center; background: var(--adb-paper); border-radius: 999px; color: var(--adb-ink); display: flex; flex: 0 0 auto; font-size: 12px; font-weight: 750; gap: 8px; padding: 8px 12px; }
.adb-brand-rail a:hover { background: var(--adb-lime); }
.adb-brand-rail small { align-items: center; background: #fff; border-radius: 50%; color: var(--adb-muted); display: flex; height: 19px; justify-content: center; width: 19px; }
.adb-home-section { padding-bottom: 88px; padding-top: 88px; }
.adb-section-heading { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 28px; }
.adb-section-heading h2 { color: var(--adb-navy); font-size: clamp(34px,4vw,54px); font-weight: 850; letter-spacing: -.05em; line-height: 1; margin: 0; }
.adb-section-heading > a { border-bottom: 2px solid var(--adb-teal); color: var(--adb-ink); font-size: 12px; font-weight: 800; padding: 6px 0; }
.adb-discovery-strip { background: #e7f6f1; padding: 72px 0; }
.adb-discovery-strip > div { align-items: center; display: grid; gap: 44px; grid-template-columns: .75fr 1.25fr; }
.adb-discovery-strip h2 { color: var(--adb-navy); font-size: clamp(34px,4vw,55px); letter-spacing: -.05em; line-height: 1; margin: 0; }
.adb-discovery-links { display: grid; gap: 10px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.adb-discovery-links a { background: #fff; border: 1px solid rgba(7,26,46,.08); border-radius: var(--adb-radius); color: var(--adb-ink); min-height: 150px; padding: 22px; transition: transform .18s ease, box-shadow .18s ease; }
.adb-discovery-links a:hover { box-shadow: var(--adb-shadow); transform: translateY(-4px); }
.adb-discovery-links strong { display: block; font-size: 26px; letter-spacing: -.04em; margin-bottom: 34px; }
.adb-discovery-links span { color: var(--adb-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }

.adb-page-heading { margin-bottom: 34px; max-width: 880px; }
.adb-page-heading > p { color: var(--adb-teal-dark); font-size: 10px; font-weight: 850; letter-spacing: .15em; margin: 0 0 10px; text-transform: uppercase; }
.adb-page-heading h1 { color: var(--adb-navy); font-size: clamp(42px,6vw,76px); font-weight: 850; letter-spacing: -.06em; line-height: .98; margin: 0 0 18px; }
.adb-page-heading > span { color: var(--adb-muted); display: block; font-size: 16px; line-height: 1.7; }
.adb-archive, .adb-content-shell, .adb-shortcode-shell { padding-bottom: 82px; padding-top: 64px; }
.adb-shortcode-shell { margin: auto; max-width: var(--adb-container); padding-left: 22px; padding-right: 22px; }
.adb-content-shell .nav-links, .adb-archive .nav-links, .adb-pagination ul { display: flex; gap: 7px; justify-content: center; list-style: none; margin: 38px 0 0; padding: 0; }
.page-numbers { align-items: center; background: #fff; border: 1px solid var(--adb-line); border-radius: 8px; color: var(--adb-ink); display: flex; font-size: 12px; height: 38px; justify-content: center; min-width: 38px; padding: 0 10px; }
.page-numbers.current { background: var(--adb-navy); color: #fff; }

.adb-story-grid { display: grid; gap: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.adb-story-card { background: #fff; border: 1px solid var(--adb-line); border-radius: var(--adb-radius); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.adb-story-card:hover { box-shadow: var(--adb-shadow); transform: translateY(-4px); }
.adb-story-card__image { background: var(--adb-soft); display: block; height: 220px; overflow: hidden; }
.adb-story-card__image img { height: 100%; object-fit: cover; transition: transform .4s ease; width: 100%; }
.adb-story-card:hover img { transform: scale(1.035); }
.adb-story-card > div { padding: 22px; }
.adb-story-card h2 { font-size: 21px; letter-spacing: -.025em; line-height: 1.22; margin: 0 0 12px; }
.adb-story-card h2 a { color: var(--adb-ink); }
.adb-story-card > div > p:not(.adb-eyebrow) { color: var(--adb-muted); font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
.adb-story-card time { color: var(--adb-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }

.adb-article { display: grid; gap: 50px; grid-template-columns: minmax(0,1fr) 300px; padding-bottom: 86px; padding-top: 64px; }
.adb-article > article { min-width: 0; }
.adb-article-header { max-width: 920px; }
.adb-article-header h1 { color: var(--adb-navy); font-size: clamp(42px,5.5vw,72px); letter-spacing: -.055em; line-height: 1; margin: 0 0 22px; }
.adb-article-header > div { color: var(--adb-muted); display: flex; font-size: 12px; gap: 20px; }
.adb-article-image { border-radius: var(--adb-radius-lg); margin: 34px 0; overflow: hidden; }
.adb-article-image img { display: block; width: 100%; }
.adb-prose { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.82; }
.adb-prose h2, .adb-prose h3, .adb-prose h4 { color: var(--adb-navy); font-family: Inter,ui-sans-serif,sans-serif; letter-spacing: -.035em; line-height: 1.15; }
.adb-prose h2 { font-size: 36px; margin-top: 54px; }
.adb-prose h3 { font-size: 27px; margin-top: 42px; }
.adb-prose img { border-radius: 14px; }
.adb-prose table { border-collapse: collapse; display: block; font-family: Inter,ui-sans-serif,sans-serif; font-size: 14px; overflow-x: auto; width: 100%; }
.adb-prose th, .adb-prose td { border: 1px solid var(--adb-line); padding: 12px; text-align: left; }
.adb-prose th { background: var(--adb-soft); }
.adb-article-sidebar { padding-top: 120px; }
.adb-widget { background: #fff; border: 1px solid var(--adb-line); border-radius: var(--adb-radius); margin-bottom: 18px; padding: 22px; }
.adb-widget__title { font-size: 17px; margin: 0 0 14px; }

.adb-not-found { min-height: 65vh; padding-bottom: 100px; padding-top: 90px; text-align: center; }
.adb-not-found > span { color: var(--adb-teal); font-size: 120px; font-weight: 900; letter-spacing: -.08em; line-height: 1; }
.adb-not-found h1 { font-size: clamp(38px,6vw,70px); letter-spacing: -.06em; margin: 10px 0; }
.adb-not-found p { color: var(--adb-muted); }
.adb-not-found > div { display: flex; gap: 10px; justify-content: center; margin-top: 25px; }

.adb-site-footer { background: var(--adb-navy); color: #aebdcc; padding: 66px 0 24px; }
.adb-footer-grid { display: grid; gap: 60px; grid-template-columns: 1.1fr .7fr 1fr; }
.adb-wordmark--footer { color: #fff !important; display: inline-block; margin-bottom: 17px; }
.adb-footer-grid p { font-size: 13px; line-height: 1.7; margin: 0; max-width: 460px; }
.adb-footer-grid h2 { color: #fff; font-size: 13px; letter-spacing: .08em; margin: 0 0 16px; text-transform: uppercase; }
.adb-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.adb-footer-grid li { margin-bottom: 8px; }
.adb-footer-grid a { color: #cdd8e2; font-size: 13px; }
.adb-footer-bottom { border-top: 1px solid rgba(255,255,255,.11); display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .05em; margin-top: 50px; padding-top: 20px; text-transform: uppercase; }

@media (max-width: 1050px) {
  .adb-header-main { grid-template-columns: auto 1fr auto; }
  .adb-menu-toggle { display: block; }
  .adb-primary-nav { display: none; }
  .adb-primary-nav.is-open { display: block; }
  .adb-menu { align-items: stretch; flex-direction: column; gap: 0; padding: 10px 0 18px; }
  .adb-menu > li > a { padding: 10px 0; }
  .adb-menu .sub-menu { box-shadow: none; display: block; padding: 0 0 0 16px; position: static; }
  .adb-home-hero__grid, .adb-discovery-strip > div { grid-template-columns: 1fr; }
  .adb-discovery-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .adb-story-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .adb-article { grid-template-columns: 1fr; }
  .adb-article-sidebar { padding-top: 0; }
}

@media (max-width: 782px) { body.admin-bar .adb-site-header { top: 46px; } }

@media (max-width: 720px) {
  .adb-container, .adb-shortcode-shell { padding-left: 14px; padding-right: 14px; }
  .adb-topbar { display: none; }
  .adb-header-main { gap: 13px; grid-template-columns: auto 1fr auto; min-height: 72px; }
  .adb-branding small, .adb-header-compare { display: none; }
  .adb-live-search { grid-column: 1 / -1; grid-row: 2; max-width: none; padding-bottom: 13px; }
  .adb-wordmark { font-size: 29px; }
  .adb-home-hero { padding: 50px 0; }
  .adb-home-hero__grid { gap: 34px; }
  .adb-home-hero__copy h1 { font-size: clamp(43px,13vw,60px); }
  .adb-home-hero__finder { padding: 22px 16px; }
  .adb-brand-rail > div { align-items: flex-start; flex-direction: column; gap: 9px; padding-bottom: 15px; padding-top: 15px; }
  .adb-brand-rail > div > div { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .adb-home-section { padding-bottom: 60px; padding-top: 60px; }
  .adb-section-heading { align-items: flex-start; flex-direction: column; }
  .adb-discovery-strip { padding: 55px 0; }
  .adb-discovery-links { grid-template-columns: 1fr 1fr; }
  .adb-discovery-links a { min-height: 125px; padding: 16px; }
  .adb-discovery-links strong { margin-bottom: 25px; }
  .adb-story-grid { grid-template-columns: 1fr; }
  .adb-story-card__image { height: 230px; }
  .adb-page-heading h1 { font-size: clamp(40px,13vw,62px); }
  .adb-article { padding-top: 42px; }
  .adb-article-header h1 { font-size: clamp(39px,12vw,58px); }
  .adb-prose { font-size: 17px; }
  .adb-footer-grid { grid-template-columns: 1fr; }
  .adb-footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; } }