/*
Theme Name: Skware
Theme URI: https://skware.io
Author: Skware
Description: Lightweight Elementor-ready theme for the Skware website.
Version: 1.1.1
Requires at least: 6.9
Requires PHP: 8.3
Update URI: https://github.com/roberthgnz/skware
Text Domain: skware
*/

:root {
  --skware-ink: #08080a;
  --skware-text: #f4f4f7;
  --skware-blue: #496ed6;
  --skware-navy: #283185;
  --skware-lilac: #c2aaf9;
  --skware-pink: #ff7bac;
  --skware-surface-1: #121319;
  --skware-surface-2: #1c1d28;
  --skware-surface-3: #242636;
  --skware-text-dim: #9797a3;
  --skware-text-faint: #6c6e7a;
  --skware-border-strong: rgba(255, 255, 255, .09);
  --skware-border-subtle: rgba(255, 255, 255, .05);
  --skware-radius-s: 10px;
  --skware-radius-m: 18px;
  --skware-radius-l: 28px;
  --skware-radius-full: 999px;
  --skware-blur-sm: 8px;
  --skware-blur-md: 16px;
  --skware-blur-lg: 40px;
  --site-max-width: 90rem;
  --site-gutter: clamp(1.25rem, 4vw, 5rem);
  --section-space: clamp(4rem, 7vw, 7.5rem);
  --section-space-compact: clamp(3rem, 5vw, 5rem);
  --content-gap: clamp(2rem, 4vw, 4rem);
  --type-display-xl: clamp(2.5rem, 3.25vw, 3.5rem);
  --type-display-lg: clamp(2.125rem, 2.8vw, 3rem);
  --type-heading: clamp(1.75rem, 2.1vw, 2.375rem);
  --type-subheading: clamp(1.25rem, 1.45vw, 1.5rem);
  --type-body-lg: clamp(1rem, 1.05vw, 1.125rem);
  --type-body: 1rem;
  --type-ui: .875rem;
  --type-label: .75rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Header row height, excluding the safe-area inset. The theme header, the
     hero's copy of it, the hamburger panel and the hero intro all measure
     against this, so it lives here rather than being repeated as a literal. */
  --skware-header-height: 72px;
  /* Single horizontal-alignment source of truth. --site-gutter-* is for
     elements that already center themselves (max-width + margin:auto).
     --site-edge-* is for full-bleed elements (no max-width of their own,
     e.g. section backgrounds, absolutely-positioned overlay content) and
     reproduces the exact same edge a centered --site-max-width container
     would have, so both families of elements land on the same X axis. */
  --site-gutter-left: max(var(--site-gutter), var(--safe-left, 0px));
  --site-gutter-right: max(var(--site-gutter), var(--safe-right, 0px));
  --site-edge-left: max(var(--site-gutter), calc((100vw - var(--site-max-width)) / 2 + var(--site-gutter)), var(--safe-left, 0px));
  --site-edge-right: max(var(--site-gutter), calc((100vw - var(--site-max-width)) / 2 + var(--site-gutter)), var(--safe-right, 0px));
}

* { box-sizing: border-box; }
html { background: var(--skware-ink); }
html[data-skware-mobile-menu="true"] { overflow: hidden; }
html[data-skware-dialog-open="true"] { overflow: hidden; }
body { margin: 0; background: var(--skware-ink); color: var(--skware-text); font-family: Inter, system-ui, sans-serif; }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; word-wrap: normal; }
.screen-reader-text:focus { clip: auto; clip-path: none; display: block; height: auto; left: 1rem; padding: 1rem; top: 1rem; width: auto; z-index: 100000; background: #fff; color: #000; }
:focus-visible { outline: 2px solid #c2aaf9; outline-offset: 4px; }
@media (max-width:639px){:root{--type-display-xl:clamp(2.25rem,11.25vw,3rem);--type-display-lg:clamp(2rem,9.5vw,2.625rem);--type-heading:clamp(1.75rem,8vw,2.125rem);--section-space:clamp(4rem,18vw,5rem);--section-space-compact:clamp(3rem,14vw,4rem);--content-gap:clamp(2rem,10vw,3rem)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.skware-shell { min-height: 100vh; }
/* Canonical header styles.
   The hero widget renders its own copy of this header for the scroll
   animation; keep .skware-hero__header in components.css in sync. */
@media (min-width:640px){ :root { --skware-header-height:88px; } }
.skware-header { align-items:center; display:flex; gap:2rem; height:calc(var(--skware-header-height) + var(--safe-top, 0px)); justify-content:space-between; left:0; padding:var(--safe-top,0px) var(--site-edge-right) 0 var(--site-edge-left); position:absolute; right:0; top:0; z-index:20; }
body.admin-bar .skware-header { height:calc(var(--skware-header-height) + var(--safe-top, 0px) + var(--wp-admin--admin-bar--height, 32px)); padding-top:calc(var(--safe-top, 0px) + var(--wp-admin--admin-bar--height, 32px)); }
.skware-brand { display:inline-flex; }
.skware-brand img { display:block; height:24px; width:auto; }
@media (min-width:640px){ .skware-brand img { height:30px; } }
.skware-navigation { align-items:center; display:flex; }
/* Contact + language switch travel together as the right-hand group. */
.skware-header__actions { align-items:center; display:flex; gap:1rem; }
.skware-menu { align-items:center; display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.skware-menu > li { align-items:center; display:flex; line-height:1.2; }
.skware-menu a { color:#f4f4f7; display:block; font:700 .75rem/1.2 'Space Grotesk',Inter,sans-serif; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }
.skware-menu a:hover,.skware-header__contact:hover { color:#c2aaf9; }
.skware-header__contact { color:#496ed6; font:700 .75rem/1.2 'Space Grotesk',Inter,sans-serif; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }
.skware-language-switch { color:#f4f4f7; font:700 .75rem/1.2 'Space Grotesk',Inter,sans-serif; letter-spacing:.06em; position:relative; }
.skware-language-switch summary { align-items:center; border-radius:999px; cursor:pointer; display:flex; gap:6px; list-style:none; min-height:44px; padding:0 8px; }
.skware-language-switch summary::-webkit-details-marker { display:none; }
.skware-language-switch summary:hover,.skware-language-switch a:hover { color:#c2aaf9; }
.skware-language-switch summary:focus-visible,.skware-language-switch a:focus-visible { outline:2px solid #c2aaf9; outline-offset:3px; }
.skware-language-switch[open] summary { background:rgba(255,255,255,.1); }
.skware-language-switch ul { background:#121319; border:1px solid rgba(255,255,255,.16); border-radius:10px; list-style:none; margin:4px 0 0; min-width:9rem; padding:4px; position:absolute; right:0; top:100%; z-index:50; }
.skware-language-switch li { margin:0; }
.skware-language-switch a { color:inherit; display:block; padding:9px 12px; text-decoration:none; white-space:nowrap; }
.skware-language-switch a[aria-current="true"] { color:#c2aaf9; }
.skware-language-switch__globe { height:16px; width:16px; }
@media (min-width:640px){ .skware-language-switch { padding:0 12px; } }
.skware-content { min-height: 60vh; }
.skware-entry { margin-inline: auto; max-width: var(--site-max-width); padding: 4rem var(--site-gutter-right) 4rem var(--site-gutter-left); }
.skware-entry h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: .95; margin: 0 0 1.5rem; }
.skware-blog-grid{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}.skware-blog-grid article{background:#121319;border:1px solid rgba(255,255,255,.09);border-radius:18px;min-height:260px;padding:28px}.skware-blog-grid p{color:#9797a3;line-height:1.55}.skware-blog-grid h2{font:500 1.6rem/1.15 'Space Grotesk',sans-serif}.skware-blog-grid a{text-decoration:none}.skware-post{max-width:840px}.skware-post>article>p{color:#c2aaf9}.skware-post img{border-radius:18px;height:auto;max-width:100%;margin:24px 0}.skware-post__content{color:#d0d0d8;font-size:1.1rem;line-height:1.65}@media(max-width:767px){.skware-blog-grid{grid-template-columns:1fr}}
.skware-footer { background:linear-gradient(180deg,#496ed6 25%,#c2aaf9 55%,#ff7bac 73%,#2e3192 88%); padding:clamp(64px,9vw,120px) var(--site-edge-right) 48px var(--site-edge-left); }
.skware-footer__logo { display:block; height:auto; margin:0 auto clamp(48px,7vw,96px); max-width:var(--site-max-width); width:100%; }
.skware-footer__panel { align-items:start; backdrop-filter:blur(19.8px); background:rgba(255,255,255,.09); border-top:1px solid rgba(255,255,255,.22); border-radius:16px; color:#f4f4f7; display:grid; gap:32px; grid-template-columns:1fr; margin:auto; max-width:var(--site-max-width); padding:20px; }
.skware-footer__locations { font:400 1rem/1.6 Inter,sans-serif; margin:0; font-style:normal; }
.skware-footer__rights { font:400 .875rem/1.2 'Space Grotesk',sans-serif; margin:0; }
.skware-footer__nav { display:grid; gap:32px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.skware-footer__group { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.skware-footer__group-title { font:700 .75rem/1.2 'Space Grotesk',sans-serif; color:#496ed6; margin:0; }
.skware-footer__group a { font:400 .875rem/1.2 'Space Grotesk',sans-serif; color:#f4f4f7; text-decoration:none; width:fit-content; }
@media (min-width:640px) {
  .skware-footer__panel { align-items:end; grid-template-columns:1fr auto; padding:24px; }
  .skware-footer__nav { grid-column:1/-1; grid-row:2; gap:48px; }
  .skware-footer__rights { grid-column:2; grid-row:1; justify-self:end; }
}
@media (min-width:1024px) {
  .skware-footer__panel { gap:40px; grid-template-columns:minmax(240px,1fr) auto auto; }
  .skware-footer__nav { grid-column:auto; grid-row:auto; gap:64px; }
  .skware-footer__rights { grid-column:auto; grid-row:auto; align-self:end; }
}
/* Below 768px the inline nav becomes the hamburger, which carries Contact. */
@media (max-width: 767px) { .skware-header { gap:16px; } .skware-navigation{display:none} .skware-header__contact{display:none} }