/*
Theme Name: XpertAdmin
Theme URI: https://xpertadmin.com/
Author: XpertAdmin
Author URI: https://xpertadmin.com/
Description: Lightweight theme for the XpertAdmin website, built to be edited with Elementor. On activation it creates the Home page as an editable Elementor layout, plus Privacy Policy, Terms of Service and Support pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xpertadmin
Tags: one-column, custom-menu, custom-logo, full-width-template, block-styles
*/

/* =========================================================
   Design tokens. Change colours here and the whole site follows.
   ========================================================= */
:root{
  --bg:#F5F7F9; --surface:#FFFFFF; --ink:#13202B; --muted:#5A6874; --line:#D9E0E6; --grid:#E7ECF0;
  --accent:#1E56C8; --accent-ink:#FFFFFF; --accent-soft:#E3EBFA;
  --ok:#17803D; --ok-soft:#E2F3E8; --err:#B42318; --err-soft:#FBE7E5; --hdr:#EEF2F5;
  --f-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E151C; --surface:#151F28; --ink:#E6EDF3; --muted:#93A2AF; --line:#27343F; --grid:#1E2A34;
  --accent:#6E9BFF; --accent-ink:#0B1420; --accent-soft:#1B2A45;
  --ok:#4CC27A; --ok-soft:#14301F; --err:#FF7A6E; --err-soft:#3A1A17; --hdr:#1A2530; color-scheme:dark}}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.1;text-wrap:balance;margin:0 0 .5em;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;background:var(--surface);padding:8px 12px;border-radius:6px}
.xa-wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
[id]{scroll-margin-top:80px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* =========================================================
   Header
   ========================================================= */
.xa-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.admin-bar .xa-header{top:32px}
@media (max-width:782px){.admin-bar .xa-header{top:46px}}
.xa-header .xa-wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.xa-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.xa-brand .custom-logo{max-height:40px;width:auto}
.xa-logo{flex:none;display:block}
.xa-brand-text{display:flex;flex-direction:column;line-height:1.05;font-family:var(--f-display);font-size:20px}
.xa-brand-name b{font-weight:700}
.xa-brand-name span{font-weight:500;color:var(--accent)}
.xa-brand-sub{font-family:var(--f-body);font-size:12px;color:var(--muted);letter-spacing:.01em}
.xa-nav{margin-left:auto}
.xa-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.xa-nav a{color:var(--muted);text-decoration:none;font-size:15px}
.xa-nav a:hover,.xa-nav .current-menu-item>a{color:var(--ink)}
.xa-header-btn{display:inline-flex;align-items:center;font:600 15px var(--f-body);padding:10px 18px;border-radius:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.xa-header-btn:hover{filter:brightness(1.08);color:var(--accent-ink)}
@media (max-width:760px){.xa-nav{display:none}.xa-header-btn{margin-left:auto}}

/* =========================================================
   Footer
   ========================================================= */
.xa-footer{border-top:1px solid var(--line);padding-block:32px;font-size:13px;color:var(--muted)}
.xa-footer .xa-wrap{display:grid;gap:10px}
.xa-foot-brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-family:var(--f-display);font-size:18px}
.xa-footer ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.xa-footer a{color:var(--muted)}
.xa-footer p{margin:0}

/* =========================================================
   Regular pages (Privacy, Terms, Support, blog posts)
   ========================================================= */
.xa-content{padding-block:56px 72px}
.xa-prose{max-width:760px}
.xa-prose h1{font-size:clamp(32px,4.5vw,44px);letter-spacing:-.01em;margin-bottom:24px}
.xa-prose h2{font-size:24px;margin-top:1.6em}
.xa-prose p,.xa-prose li{color:var(--muted)}
.xa-prose ul{padding-left:20px}
.xa-prose .xa-updated{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.xa-post-list{display:grid;gap:28px}
.xa-post-list article{border-bottom:1px solid var(--line);padding-bottom:24px}

/* =========================================================
   Elementor integration
   Widgets get these classes under Advanced > CSS Classes.
   Text stays editable in Elementor; the look comes from here.
   ========================================================= */
.xa-page .elementor-heading-title{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.xa-page .elementor-widget-text-editor{color:inherit;font-family:inherit}
.xa-page .elementor-widget-text-editor p{margin:0 0 .6em}
.xa-page .elementor-widget-text-editor p:last-child,.xa-page .elementor-widget-text-editor ul:last-child{margin-bottom:0}
.xa-page .elementor-widget{margin-bottom:0}

/* section backgrounds */
.xa-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.xa-closing{background:var(--accent);color:var(--accent-ink)}
.xa-closing .xa-h2{color:var(--accent-ink)}
.xa-closing .xa-muted{color:var(--accent-ink);opacity:.85}

/* type */
.xa-eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.xa-h1{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,5.4vw,62px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.xa-h1 em{font-style:normal;color:var(--accent)}
.xa-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.xa-h3{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.2;color:var(--ink)}
.xa-h3-lg{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1.15;color:var(--ink)}
.xa-h3 .n{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}
.xa-lede{font-size:18px;color:var(--muted);max-width:34em}
.xa-muted{color:var(--muted)}
.xa-small{font-size:14px}
.xa-sec-intro{font-size:17px;color:var(--muted);max-width:640px}
.xa-label-bad,.xa-label-good,.xa-tag,.xa-step-n,.xa-upd{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.xa-label-bad{color:var(--err);text-transform:uppercase}
.xa-label-good{color:var(--ok);text-transform:uppercase}
.xa-tag{color:var(--accent)}
.xa-step-n,.xa-upd{color:var(--muted)}
.xa-list ul{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:4px}
.xa-list-lined ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.xa-list-lined li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}

/* buttons (Elementor button widget) */
.xa-page .xa-btn .elementor-button{font:600 15px var(--f-body);padding:12px 20px;border-radius:8px;border:1px solid transparent;line-height:1.2;transition:filter .15s}
.xa-page .xa-btn-primary .elementor-button{background:var(--accent);color:var(--accent-ink)}
.xa-page .xa-btn-ghost .elementor-button{background:var(--surface);color:var(--ink);border-color:var(--line)}
.xa-page .xa-btn-invert .elementor-button{background:var(--accent-ink);color:var(--accent)}
.xa-page .xa-btn .elementor-button:hover{filter:brightness(1.08)}
.xa-btn-full .elementor-button{width:100%;justify-content:center}

/* cards */
.xa-card{background:var(--bg);border:1px solid var(--line);border-radius:10px}
.xa-plan{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.xa-plan-feat{border:2px solid var(--accent)}
.xa-price{font-family:var(--f-display);font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.xa-price small{font-family:var(--f-body);font-size:15px;font-weight:400;color:var(--muted)}
.xa-pill p{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent);padding:3px 8px;border-radius:4px;margin:0}
.xa-rule-accent{border-top:2px solid var(--accent)}
.xa-rule-ink{border-top:2px solid var(--ink)}

/* FAQ (Elementor toggle widget) */
.xa-faq .elementor-toggle-item{border-bottom:1px solid var(--line)!important}
.xa-faq .elementor-toggle .elementor-tab-title{border:0!important;padding:18px 0!important;font:600 17px var(--f-body);color:var(--ink)}
.xa-faq .elementor-toggle .elementor-tab-title a{color:var(--ink)!important}
.xa-faq .elementor-toggle .elementor-tab-content{border:0!important;padding:0 0 18px!important;color:var(--muted)}
.xa-faq .elementor-toggle-icon{color:var(--muted)}
.xa-faq{border-top:1px solid var(--line);max-width:760px}

/* =========================================================
   Visual blocks (inside Elementor HTML widgets)
   ========================================================= */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(19,32,43,.35)}
.sheet-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.sheet-bar .fx{font-family:var(--f-mono);background:var(--hdr);border-radius:4px;padding:2px 8px}
.sheet-bar button{margin-left:auto;font:600 13px var(--f-body);background:var(--accent);color:var(--accent-ink);border:0;border-radius:6px;padding:6px 12px;cursor:pointer}
.sheet-scroll{overflow-x:auto}
table.grid{border-collapse:collapse;width:100%;min-width:620px;font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums;margin:0}
.grid th,.grid td{border:1px solid var(--grid);padding:7px 10px;text-align:left;white-space:nowrap;color:var(--ink)}
.grid thead th{background:var(--hdr);color:var(--muted);font-weight:500;font-size:11.5px}
.grid td.rn,.grid th.rn{background:var(--hdr);color:var(--muted);text-align:center;width:34px}
.grid tr.colhdr td{font-weight:500;background:var(--surface)}
.status{display:inline-block;padding:1px 7px;border-radius:4px;font-size:12px;transition:opacity .3s}
.status.ok{background:var(--ok-soft);color:var(--ok)}
.status.err{background:var(--err-soft);color:var(--err)}
.status.pending{color:var(--muted)}
.sheet-tabs{display:flex;gap:2px;padding:6px 10px;border-top:1px solid var(--line);background:var(--hdr);font-size:12px;overflow-x:auto}
.sheet-tabs span{padding:4px 12px;border-radius:4px 4px 0 0;color:var(--muted);white-space:nowrap}
.sheet-tabs span.on{background:var(--surface);color:var(--accent);font-weight:600}
.sheet-sm table.grid{min-width:440px}
.sheet-sm .grid th,.sheet-sm .grid td{padding:6px 8px;font-size:11.5px}

.confirm{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px;display:grid;gap:12px;max-width:420px;box-shadow:0 18px 40px -24px rgba(19,32,43,.35)}
.confirm .t{font-weight:600}
.confirm p{color:var(--muted);font-size:14px;margin:0}
.confirm .field{font-family:var(--f-mono);font-size:14px;border:2px solid var(--err);border-radius:6px;padding:8px 10px;color:var(--err)}
.confirm .row{display:flex;gap:10px;justify-content:flex-end}
.confirm .b{font:600 14px var(--f-body);padding:8px 14px;border-radius:6px;border:1px solid var(--line)}
.confirm .b.del{background:var(--err);color:#fff;border-color:var(--err)}

.cli{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(19,32,43,.35)}
.cli pre{margin:0;padding:16px;font-family:var(--f-mono);font-size:12.5px;line-height:1.7;color:var(--muted);background:var(--hdr);overflow-x:auto;text-decoration:line-through;text-decoration-color:var(--err);white-space:pre}
.cli .side{padding:16px;display:grid;gap:10px;font-size:14px}
.cli .side .btnmock{justify-self:start;font:600 14px var(--f-body);background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:8px 14px}
.cli .side select{font:14px var(--f-body);padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}

.flow{font-family:var(--f-mono);font-size:13px;display:grid;gap:10px}
.flow div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.flow div b{font-weight:500}
.flow div span{color:var(--muted);text-align:right}

.copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy code{font-family:var(--f-mono);font-size:14px;background:var(--bg);border:1px solid var(--line);padding:6px 10px;border-radius:6px;user-select:all;color:var(--ink)}
.copy button{font:500 13px var(--f-body);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:6px 10px;cursor:pointer}