/*
Theme Name: WinKeys
Theme URI: https://winkeys.net
Author: WinKeys (Dripping LTD)
Description: Business website theme for WinKeys: IT services, software engineering and digital solutions. On activation it creates the Home, Services, service detail, About, Contact, Privacy policy and Terms pages, the menus, and sets the homepage. Business details are edited under Appearance > Customize > WinKeys business details.
Version: 1.0.0
Requires at least: 6.0
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: winkeys
*/

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#F4F6F5;
  --surface:#FFFFFF;
  --ink:#172026;
  --ink-2:#22313A;
  --muted:#55656D;
  --line:#D6DEE1;
  --teal:#0E5E6F;
  --teal-deep:#0A4552;
  --teal-tint:#E3EEF0;
  --signal:#F2C14E;
  --ok:#2E9E6A;
  --danger:#B3261E;
  --radius-lg:22px;
  --radius-sm:10px;
  --max:1160px;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.01em;color:inherit}
h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700}
h3{font-size:1.35rem;font-weight:700}
p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);text-decoration:none}
.skip-link:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font:600 1rem/1.2 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--teal-deep)}
.btn-light:hover{background:var(--signal);color:var(--ink)}
.btn-outline-light{border-color:#fff;color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;color:var(--teal-deep)}
.text-link{font-weight:600;color:var(--teal);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.text-link:hover{color:var(--teal-deep)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(244,246,245,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink)}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--teal);display:grid;place-items:center;flex:none}
.brand-mark i{width:10px;height:10px;border-radius:50%;background:var(--signal);display:block}
.brand img{max-height:40px;width:auto}
.primary-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.primary-nav a{text-decoration:none;font-weight:500;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.primary-nav a:hover{color:var(--ink)}
.primary-nav .current-menu-item>a,.primary-nav .current-menu-ancestor>a,.primary-nav .current-page-ancestor>a{color:var(--ink);border-bottom-color:var(--teal)}
.primary-nav li{position:relative}
.primary-nav .sub-menu{display:none;position:absolute;top:100%;left:-18px;min-width:240px;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;box-shadow:0 18px 40px -20px rgba(23,32,38,.35)}
.primary-nav .sub-menu a{display:block;padding:10px 12px;border-radius:8px;border-bottom:none;color:var(--ink)}
.primary-nav .sub-menu a:hover{background:var(--paper)}
.primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{display:flex}
.primary-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.header-cta{flex:none}
.menu-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:999px;padding:8px 16px;font:600 .95rem var(--body);color:var(--ink);cursor:pointer}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section-tight{padding:72px 0}
.section-white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-intro{max-width:660px;margin-bottom:52px}
.section-intro p{color:var(--muted);font-size:1.12rem;margin-top:16px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px}
.section-head .section-intro{margin-bottom:0}

/* ---------- Home hero ---------- */
.hero{padding:80px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero .lead{font-size:1.25rem;color:var(--muted);max-width:36ch;margin:24px 0 36px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .where{margin-top:32px;color:var(--muted);font-size:.95rem}

/* Status board (signature element) */
.board{background:var(--ink);color:#E8EEF0;border-radius:var(--radius-lg);padding:28px;box-shadow:0 30px 60px -30px rgba(14,94,111,.55)}
.board-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.board-head strong{font-family:var(--display);font-size:1.15rem}
.board-head span{color:#9FB1B8;font-size:.85rem}
.board-rows{list-style:none;margin:0;padding:0}
.board-rows li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #2C3A42}
.board-rows li>span:first-child{font-weight:500}
.state{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:#BFD3D8;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;animation:pulse 2.4s ease-out infinite}
.dot.amber{background:var(--signal);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,158,106,.55)}70%{box-shadow:0 0 0 9px rgba(46,158,106,0)}100%{box-shadow:0 0 0 0 rgba(46,158,106,0)}}
.board-foot{margin-top:18px;padding:14px 16px;background:var(--ink-2);border-radius:var(--radius-sm);font-size:.92rem;color:#D5E2E6}
.board-note{margin-top:12px;font-size:.78rem;color:#7F949C}

/* ---------- Inner page hero ---------- */
.page-hero{padding:64px 0 72px;border-bottom:1px solid var(--line)}
.page-hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:end}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.8rem)}
.page-hero .lead{font-size:1.2rem;color:var(--muted);max-width:52ch;margin-top:20px}
.page-hero .btn-row{margin-top:30px}
.page-hero-aside{justify-self:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;max-width:360px;width:100%}
.page-hero-aside h2{font-size:1.05rem;font-family:var(--body);font-weight:600;margin-bottom:12px}
.page-hero-aside ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:.96rem}
.page-hero-aside li{display:flex;gap:10px;align-items:baseline}
.page-hero-aside li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;transform:translateY(-1px)}
.breadcrumbs{font-size:.9rem;color:var(--muted);margin-bottom:22px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{color:var(--ink);text-decoration:underline}

/* ---------- Service overview (home + services page) ---------- */
.practice{display:grid;grid-template-columns:280px 1fr 1fr;gap:40px;padding:40px 0;border-top:1px solid var(--line)}
.practice:last-child{border-bottom:1px solid var(--line)}
.practice h3{font-size:1.7rem}
.practice h3 a{text-decoration:none}
.practice h3 a:hover{color:var(--teal)}
.tag{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:999px;background:var(--teal-tint);color:var(--teal-deep);font-size:.85rem;font-weight:600}
.practice-body p{color:var(--muted);margin-bottom:20px}
.dash-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.dash-list li{padding-left:22px;position:relative}
.dash-list li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--teal)}

/* Home: three-up service links */
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.trio-item{padding:36px 32px 36px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.trio-item+.trio-item{padding-left:32px}
.trio-item:last-child{border-right:none;padding-right:0}
.trio-item h3{font-size:1.6rem}
.trio-item p{color:var(--muted)}
.trio-item .dash-list{font-size:.98rem;margin-bottom:8px}
.trio-item .text-link{margin-top:auto;align-self:flex-start}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:step;border-left:1px solid var(--line)}
.step{padding:8px 28px;border-right:1px solid var(--line)}
.step::before{counter-increment:step;content:counter(step);display:block;font-family:var(--display);font-weight:800;font-size:3rem;color:var(--teal);line-height:1;margin-bottom:18px}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);font-size:.98rem}
.steps.steps-3{grid-template-columns:repeat(3,1fr)}

/* ---------- Split / promises ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.promises{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.promises li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 24px}
.promises strong{display:block;font-size:1.08rem;margin-bottom:4px}
.promises span{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chips span{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;font-weight:500}

/* ---------- Service detail ---------- */
.included{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.included-item{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.included-item h3{font-size:1.2rem;margin-bottom:10px}
.included-item p{color:var(--muted);font-size:.98rem}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.way{border-radius:var(--radius-lg);padding:30px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.way.featured{background:var(--ink);color:#E8EEF0;border-color:var(--ink)}
.way.featured p,.way.featured .way-price{color:#BFD3D8}
.way h3{font-size:1.4rem}
.way p{color:var(--muted)}
.way-price{font-weight:600;color:var(--teal-deep);font-size:.95rem;padding-top:12px;margin-top:auto;border-top:1px solid var(--line)}
.way.featured .way-price{border-top-color:#2C3A42}
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.related a{display:block;text-decoration:none;padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.related a:hover{border-color:var(--teal)}
.related h3{margin-bottom:8px}
.related p{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}
.faq-list details:first-of-type{border-top:1px solid var(--line)}
.faq-list summary{cursor:pointer;font-weight:600;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--teal);flex:none}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{color:var(--muted);margin-top:12px;max-width:70ch}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--teal);color:#fff;padding:72px 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{max-width:20ch}
.cta-band p{color:#CFE3E7;margin-top:12px;max-width:52ch}

/* ---------- About ---------- */
.prose-lg{font-size:1.15rem;max-width:62ch}
.prose-lg p+p{margin-top:18px}
.company-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.company-card h3{margin-bottom:18px}
.company-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 24px}
.company-card dt{color:var(--muted);font-size:.92rem}
.company-card dd{margin:0;font-weight:500}
.company-card a{text-decoration:none;color:var(--teal-deep);font-weight:600}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.details-list{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.details-list small{display:block;color:var(--muted);font-size:.85rem;margin-bottom:2px}
.details-list a{text-decoration:none;font-weight:600;font-size:1.12rem;color:var(--teal-deep)}
.details-list a:hover{text-decoration:underline}
.details-list span.value{font-weight:600;font-size:1.05rem}
.contact-form{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:grid;gap:18px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.contact-form .opt{font-weight:400;color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(14,94,111,.18)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex!important;grid-template-columns:none;gap:10px!important;align-items:flex-start;font-weight:400!important;color:var(--muted)}
.consent input{width:auto!important;margin-top:4px;accent-color:var(--teal)}
.form-note{font-size:.85rem;color:var(--muted)}
.notice{padding:16px 18px;border-radius:var(--radius-sm);font-weight:500}
.notice-success{background:#E4F4EC;color:#145A3A;border:1px solid #B9E2CC}
.notice-error{background:#FBE9E7;color:var(--danger);border:1px solid #F2C4BF}
.next-steps{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.next-steps h2{font-size:1.4rem;margin-bottom:18px}
.next-steps ol{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--muted)}
.next-steps ol li::marker{color:var(--teal);font-weight:700}

/* ---------- Prose (privacy, terms, blog) ---------- */
.prose{max-width:72ch;font-size:1.05rem}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:1.7rem;margin-top:2em}
.prose h3{font-size:1.25rem;margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose a{color:var(--teal-deep);font-weight:500}
.prose table{border-collapse:collapse;width:100%}
.prose th,.prose td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.updated{color:var(--muted);font-size:.95rem}

/* Blog list */
.post-list{display:grid;gap:0;border-top:1px solid var(--line)}
.post-item{padding:28px 0;border-bottom:1px solid var(--line)}
.post-item h2{font-size:1.6rem}
.post-item h2 a{text-decoration:none}
.post-item h2 a:hover{color:var(--teal)}
.post-item time{color:var(--muted);font-size:.9rem;display:block;margin-bottom:8px}
.post-item p{color:var(--muted);margin-top:10px}
.pagination{margin-top:32px;display:flex;gap:12px}
.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 404 ---------- */
.not-found{padding:120px 0;text-align:left}
.not-found .code{font-family:var(--display);font-weight:800;font-size:clamp(5rem,14vw,10rem);line-height:1;color:var(--teal)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#B7C6CC;padding:64px 0 40px;font-size:.94rem}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.site-footer .brand{color:#fff}
.site-footer h2{color:#fff;margin:0 0 14px;font-size:1rem;font-family:var(--body);font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .about{margin-top:14px;max-width:38ch}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid #2C3A42;color:#8DA0A8;font-size:.86rem;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero .wrap,.split,.page-hero .wrap,.contact-grid,.faq-grid{grid-template-columns:1fr}
  .page-hero-aside{justify-self:start;max-width:none}
  .practice{grid-template-columns:1fr;gap:16px}
  .trio{grid-template-columns:1fr}
  .trio-item,.trio-item+.trio-item{padding:32px 0;border-right:none;border-bottom:1px solid var(--line)}
  .steps,.steps.steps-3{grid-template-columns:1fr 1fr;border-left:none}
  .step{border:none;border-top:1px solid var(--line);padding:24px 16px 24px 0}
  .included{grid-template-columns:1fr 1fr}
  .ways{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:782px){
  .admin-bar .site-header{top:46px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .menu-toggle{display:inline-block}
  .primary-nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 16px 20px}
  .primary-nav.is-open{display:block}
  .primary-nav ul{flex-direction:column;gap:4px}
  .primary-nav a{display:block;padding:10px 0;border-bottom:none}
  .primary-nav .sub-menu{display:flex;position:static;box-shadow:none;border:none;background:none;padding:0 0 0 16px;min-width:0}
  .primary-nav .sub-menu a{padding:8px 0;color:var(--muted)}
  .primary-nav .menu-item-has-children>a::after{display:none}
  .header-cta{display:none}
  .hero{padding:48px 0 64px}
  .page-hero{padding:40px 0 48px}
  .section{padding:64px 0}
  .section-tight{padding:52px 0}
  .steps,.steps.steps-3,.included,.related{grid-template-columns:1fr}
  .included{border-left:none}
  .included-item{border-right:none}
  .contact-form{padding:22px}
  .contact-form .row{grid-template-columns:1fr}
  .company-card dl{grid-template-columns:1fr;gap:2px}
  .company-card dd{margin-bottom:12px}
  .site-footer .cols{grid-template-columns:1fr}
  .cta-band{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
  .btn{transition:none}
}