/*
Theme Name: technizer
Theme URI: https://technizer.com
Author: Dr. Syed Zeeshan Ali
Author URI: https://syedzeeshanali.com
Description: A responsive ACF Pro theme for the Technizer digital studio and software products.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: technizer
*/

:root {
    --paper:#f6f3ea;
    --ink:#101321;
    --accent:#d7fa59;
    --violet:#5144f5;
    --muted:#545568;
    --surface:#fff;
    --font-heading:system-ui,sans-serif;
    --font-body:system-ui,sans-serif;
    --heading-weight:750;
    --base-size:16px;
    --edge:clamp(16px,3.3vw,52px);
    --radius:clamp(18px,2.4vw,32px);
    --line:color-mix(in srgb,var(--ink) 15%,var(--paper));
}
*,*::before,*::after {box-sizing:border-box}
html {font-size:var(--base-size)}
body {margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.6;overflow-wrap:anywhere}
img {display:block;max-width:100%;height:auto}
figure {margin:0}
a {color:inherit;text-underline-offset:.2em}
button,input,textarea,select {font:inherit}
:focus-visible {outline:3px solid #756bff;outline-offset:4px}
h1,h2,h3,h4,h5,h6 {font-family:var(--font-heading);font-weight:var(--heading-weight);line-height:1.08;margin:0;letter-spacing:-.045em}
h1 {font-size:clamp(2.7rem,7vw,6.5rem)}
h2 {font-size:clamp(2rem,4.5vw,4rem)}
h3 {font-size:clamp(1.2rem,2vw,1.65rem)}
p {margin:0 0 1em}
.shell {width:min(1550px,calc(100% - var(--edge)*2));margin-inline:auto}
.content-shell {width:min(1370px,calc(100% - var(--edge)*3));margin-inline:auto}
.skip-link {position:fixed;inset-block-start:1rem;inset-inline-start:1rem;z-index:100;background:var(--accent);color:var(--ink);padding:12px;transform:translateY(-220%)}
.skip-link:focus {transform:none}
.screen-reader-text {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.site-header {
    position:relative;z-index:2;min-height:84px;margin-top:var(--edge);
    display:grid;grid-template-columns:1fr clamp(185px,24vw,312px) 1fr;align-items:start;gap:14px;padding:14px 18px 0;
}
.brand-tab {
    grid-column:2;grid-row:1;position:relative;justify-self:stretch;display:grid;place-items:center;
    background:var(--paper);padding:13px 18px 18px;margin-top:-15px;min-height:70px;border-radius:0 0 34px 34px;
}
.brand-tab::before,.brand-tab::after {
    content:"";position:absolute;top:0;width:28px;height:26px;pointer-events:none;background:radial-gradient(circle at 0 100%,transparent 25px,var(--paper) 26px);
}
.brand-tab::before {right:calc(100% - 1px)}
.brand-tab::after {left:calc(100% - 1px);transform:scaleX(-1)}
.brand-tab img {width:min(100%,205px);max-height:48px;object-fit:contain}
.primary-nav {grid-column:1;grid-row:1}
.primary-nav ul,.site-footer ul,.logo-reel {padding:0;margin:0;list-style:none}
.primary-nav > ul {display:flex;gap:7px;flex-wrap:wrap}
.primary-nav li {position:relative}
.primary-nav a,.menu-toggle {
    display:inline-flex;align-items:center;min-height:42px;padding:7px 13px;border:1px solid #ffffff65;
    background:#101321e8;color:#fff;border-radius:999px;font-size:.85rem;text-decoration:none;
}
.primary-nav a:hover {border-color:var(--accent);color:var(--accent)}
.primary-nav .sub-menu {display:none;position:absolute;z-index:4;min-width:170px;padding:8px;background:var(--ink);border-radius:12px}
.primary-nav li:hover > .sub-menu,.primary-nav li:focus-within > .sub-menu {display:grid;gap:5px}
.header-action {grid-column:3;grid-row:1;justify-self:end}
.menu-toggle {display:none;cursor:pointer}
.hero,.inner-hero {margin-top:-84px;border-radius:var(--radius);background:#0c1029;color:white;position:relative;overflow:hidden}
.hero {min-height:clamp(530px,47vw,740px);display:flex;align-items:flex-end}
.hero-art,.hero-art::after,.hero-art img {position:absolute;inset:0;width:100%;height:100%}
.hero-art img {object-fit:cover;object-position:center}
.hero-art::after {content:"";background:linear-gradient(0deg,#080a20 1%,#080a20ca 19%,transparent 69%),linear-gradient(90deg,#080a2077,transparent 76%)}
.hero-copy {position:relative;padding:110px clamp(22px,5vw,72px) clamp(28px,5vw,68px)}
.hero-copy > p:not(.eyebrow) {font-size:clamp(1rem,1.6vw,1.35rem);max-width:55ch;margin-top:1rem;color:#eeeeff}
.eyebrow {font-size:.72rem;line-height:1.4;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin:0 0 .8rem}
.hero .eyebrow,.inner-hero .eyebrow {color:var(--accent)}
.actions {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:1.15rem}
.button {display:inline-flex;align-items:center;gap:.65rem;min-height:44px;border-radius:999px;padding:.65rem 1rem;text-decoration:none;font-weight:700;font-size:.9rem;line-height:1.25}
.button--primary {background:var(--accent);color:#101321}
.button--primary:hover {filter:brightness(1.08)}
.button--outline {color:white;border:1px solid #fff8;background:#0c1029a8}
.button--text {padding-inline:0;text-decoration:underline}
.section {margin-block:clamp(40px,6vw,94px)}
.section h2 + .lede,.inner-hero .lede {margin-top:1rem}
.lede {font-size:clamp(1rem,1.8vw,1.3rem);max-width:62ch;color:var(--muted)}
.grid {display:grid;gap:clamp(14px,2vw,27px);margin-top:clamp(16px,2.4vw,30px)}
.grid--two {grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--three {grid-template-columns:repeat(3,minmax(0,1fr))}
.logo-reel {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.logo-reel li {display:grid;place-items:center;min-height:82px;border:1px solid var(--line);border-radius:12px;text-align:center;padding:10px}
.logo-reel img {max-height:50px;width:120px;object-fit:contain}
.card {min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.card-copy,.service {padding:clamp(16px,2.4vw,30px)}
.card h3 a {text-decoration:none}
.card h3 a:hover {text-decoration:underline}
.card p:not(.eyebrow) {color:var(--muted);margin:.65rem 0 0}
.card-image {width:100%;aspect-ratio:2 / 1;object-fit:cover}
.quote {background:var(--ink);color:#fff;padding:clamp(18px,2.4vw,28px);border-radius:18px;display:flex;flex-direction:column}
.quote::before {content:"“";color:var(--accent);font-size:3.5rem;font-weight:800;line-height:.8}
.quote blockquote {margin:.35rem 0 1rem}
.quote figcaption {font-size:.85rem;margin-top:auto;color:#e0e1f1}
.closing,.site-footer {border-radius:var(--radius);padding:clamp(24px,4vw,62px);color:#fff}
.closing {background:var(--violet);margin-block:2rem}
.closing p {margin-top:.7rem}
.site-footer {background:var(--ink);margin-block:22px var(--edge);display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.site-footer p,.footer-legal {color:#e1e1ee;font-size:.9rem}
.footer-brand img {width:185px;max-height:60px;object-fit:contain;object-position:left}
.footer-brand + p {margin-top:1rem}
.site-footer ul,.footer-legal {display:flex;gap:.55rem 1rem;flex-wrap:wrap}
.footer-legal {margin-top:1rem}
.inner-hero {padding:clamp(115px,12vw,170px) clamp(22px,5vw,72px) clamp(30px,5vw,64px);background:radial-gradient(ellipse at 100% 0,#352994,transparent 64%),#0c1029}
.inner-hero h1 {font-size:clamp(2.25rem,6vw,5rem);max-width:22ch}
.inner-hero .lede,.entry-meta,.archive-description {color:#e5e4fd;margin-top:1rem}
.inner-hero .search-form {margin-top:1.4rem}
.entry-cover {margin-block:clamp(20px,4vw,48px)}
.entry-cover img,.gallery img {width:100%;border-radius:var(--radius)}
.entry-cover img {max-height:660px;object-fit:cover}
.prose {max-width:76ch}
.prose > * + * {margin-block-start:1.1em}
.prose h2 {font-size:clamp(1.65rem,3vw,2.55rem)}
.prose h3 {font-size:1.4rem}
.prose iframe {max-width:100%}
.prose table {display:block;overflow-x:auto}
.prose th,.prose td {border:1px solid var(--line);padding:.5rem}
.prose pre {overflow:auto;padding:1rem;background:var(--ink);color:white;border-radius:12px}
.contact-layout {display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,4vw,60px);align-items:start}
.contact-card h2 {font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:1rem}
.contact-card .button {margin:0 .5rem .75rem 0}
input:not([type=submit],[type=checkbox],[type=radio],[type=hidden]),textarea,select {max-width:100%;border:1px solid var(--line);border-radius:10px;padding:.65rem .8rem;color:var(--ink);background:var(--surface)}
textarea {width:100%}
input[type=submit],.search-submit {border:0;border-radius:999px;padding:.7rem 1rem;background:var(--accent);color:#101321;font-weight:700;cursor:pointer}
.pagination,.post-navigation,.comments-area {margin-top:2rem}
.page-numbers {display:inline-block;padding:.35rem .7rem}
.page-numbers.current {background:var(--accent);color:#101321;border-radius:999px}
.alignleft {float:inline-start;margin-inline-end:1rem}
.alignright {float:inline-end;margin-inline-start:1rem}
.aligncenter {margin-inline:auto}
.wp-caption {max-width:100%}
.wp-caption-text,.gallery-caption {font-size:.9rem;color:var(--muted)}
@media(max-width:1050px) {
    .site-header {grid-template-columns:1fr clamp(165px,32vw,245px) 1fr}
    .primary-nav {position:absolute;top:65px;inset-inline-start:14px;background:#101321;border-radius:14px;padding:10px;min-width:175px;max-width:calc(100% - 28px)}
    .primary-nav > ul {display:grid}
    .primary-nav .sub-menu {display:grid;position:static;padding-inline-start:12px}
    .has-navigation-script .menu-toggle {display:inline-flex;grid-column:1;grid-row:1;justify-self:start;gap:.45rem}
    .has-navigation-script .menu-toggle[aria-expanded=false] + .primary-nav {display:none}
    .grid--three {grid-template-columns:repeat(2,minmax(0,1fr))}
    .logo-reel {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px) {
    .site-header {padding-inline:9px;grid-template-columns:1fr minmax(145px,1.8fr) 1fr;gap:6px}
    .brand-tab {padding-inline:9px;min-height:62px}
    .brand-tab::before,.brand-tab::after {display:none}
    .header-action {display:none}
    .menu-toggle {padding-inline:8px;font-size:.74rem}
    .hero {min-height:510px}
    .hero-art img {object-position:59% center}
    .hero-art::after {background:linear-gradient(0deg,#080a20 4%,#080a20e8 34%,transparent 81%)}
    .grid--two,.grid--three,.site-footer,.contact-layout {grid-template-columns:1fr}
    .logo-reel {grid-template-columns:repeat(2,minmax(0,1fr))}
}
.editorial-section > * + * {margin-block-start:1rem}
.editorial-section img {border-radius:var(--radius)}