/*
Theme Name: Cotiko
Theme URI: https://cotikoconsulting.com
Author: Cotiko Consulting
Description: Block theme for Cotiko Consulting — remote IT project delivery. Serif, paper-white, cyan spot colour, sticky index rail.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cotiko
Tags: block-theme, one-column, custom-colors, custom-logo, full-site-editing
*/

/* ---------- tokens ---------- */
:root{
  --cot-bg:#ffffff;
  --cot-text:#201e1d;
  --cot-100:#e9f8ff; --cot-200:#cbeeff; --cot-300:#99e0ff; --cot-400:#62c5ee;
  --cot-500:#38a6cf; --cot-600:#1186ac; --cot-700:#006786; --cot-800:#004961; --cot-900:#0a303e;
  --cot-magenta:#d6006c;
  --cot-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --cot-rail:272px;
}

/* ---------- reset / base ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--cot-bg);color:var(--cot-text);font-family:var(--cot-serif);font-size:15px;line-height:1.55;text-wrap:pretty;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--cot-700);text-decoration:none}
a:hover{color:var(--cot-900)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cot-600);outline-offset:2px}
::selection{background:var(--cot-200)}
h1,h2,h3,h4,h5,h6{font-family:var(--cot-serif);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0}

/* ---------- shell ---------- */
.wp-site-blocks{display:grid;grid-template-columns:var(--cot-rail) minmax(0,1fr);min-height:100vh}
.cot-rail{border-right:1px solid var(--cot-200);padding:32px 30px 40px;display:flex;flex-direction:column;gap:40px;position:sticky;top:0;align-self:start;min-height:100vh;max-height:100vh;overflow-y:auto;box-sizing:border-box}
.cot-rail .wp-block-site-logo img,.cot-rail .cot-logo{width:186px;height:auto}
.cot-main{min-width:0}

/* ---------- rail index ---------- */
.cot-ix{display:grid;gap:14px}
.cot-ix-row{display:flex;align-items:baseline;gap:9px;font-size:15.5px}
.cot-ix-row .n{font-size:13px;color:var(--cot-700)}
.cot-ix-row .led{flex:1;border-bottom:1px dotted color-mix(in srgb,var(--cot-text) 35%,transparent);margin-bottom:.34em}
.cot-figs{display:grid;gap:16px;padding-top:34px;border-top:1px solid var(--cot-200)}
.cot-fig{font-size:34px;line-height:1;color:var(--cot-600)}
.cot-rail-foot{margin-top:auto;display:grid;gap:12px}
.cot-btn-rail{display:inline-flex;align-items:center;justify-content:center;height:44px;background:var(--cot-600);color:#fff;border-radius:2px;font-size:15px}
.cot-btn-rail:hover{background:var(--cot-700);color:#fff}

/* ---------- type helpers ---------- */
.cot-lab{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--cot-text) 70%,transparent)}
.cot-note{font-size:14px;line-height:24px;color:color-mix(in srgb,var(--cot-text) 65%,transparent)}
.cot-kick{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--cot-text) 70%,transparent);margin-bottom:24px}
.cot-eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cot-700);border:1px solid var(--cot-300);padding:5px 10px;border-radius:2px}
.cot-h1{font-size:clamp(40px,4.4vw,60px);line-height:1.05;letter-spacing:-.025em;margin:26px 0 0 -.035em;max-width:18ch}
.cot-h1 em{font-style:normal;color:var(--cot-700)}
.cot-h2{font-size:clamp(28px,2.6vw,34px);line-height:1.3;margin:0}
.cot-sub{font-size:18px;line-height:31px;max-width:46ch;margin:28px 0 0;color:color-mix(in srgb,var(--cot-text) 82%,transparent)}
.cot-p{font-size:15.5px;line-height:28px;margin:0;color:color-mix(in srgb,var(--cot-text) 78%,transparent)}
.cot-tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:1.5px;border:1px solid var(--cot-300);color:var(--cot-800)}

/* ---------- buttons ---------- */
.cot-cta{display:inline-flex;align-items:center;height:46px;padding:0 26px;background:var(--cot-600);color:#fff;border-radius:2px;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.cot-cta:hover{background:var(--cot-700);color:#fff}
.cot-cta:active{background:var(--cot-800)}
.cot-cta2{display:inline-flex;align-items:center;height:46px;padding:0 22px;border:1px solid var(--cot-400);color:var(--cot-700);border-radius:2px;font-size:16px}
.cot-cta2:hover{background:var(--cot-100);color:var(--cot-800)}

/* ---------- sections ---------- */
.cot-sec{padding:56px 60px}
.cot-rule{border-top:1px solid var(--cot-200)}
.cot-tint{background:var(--cot-100)}
.cot-tint .cot-p,.cot-tint p{color:var(--cot-900)}
.cot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:38px}
.cot-cols-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.cot-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px}

/* ---------- hero ---------- */
.cot-hero{padding:64px 60px 52px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:center}
.cot-hero-art{width:100%;height:auto;color:var(--cot-600)}
.cot-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
@keyframes cot-flow{to{stroke-dashoffset:-240}}
@keyframes cot-spin{to{transform:rotate(360deg)}}
@keyframes cot-spin-r{to{transform:rotate(-360deg)}}
@keyframes cot-blink{0%,72%{opacity:.25}78%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){[data-flow]{animation:none !important}}

/* ---------- service rows ---------- */
.cot-svc{display:grid;grid-template-columns:200px minmax(0,1fr) 215px;gap:32px;align-items:baseline;padding:30px 60px;border-bottom:1px solid var(--cot-200)}
.cot-svc h3{font-size:27px;margin:0}
.cot-svc p{font-size:15.5px;line-height:28px;margin:0;color:color-mix(in srgb,var(--cot-text) 78%,transparent)}
.cot-svc .cot-svc-link{font-size:15px;text-align:right;white-space:nowrap}
.cot-svc:hover{background:var(--cot-100)}

/* ---------- steps ---------- */
.cot-step-n{font-size:15px;color:var(--cot-700);letter-spacing:.06em}
.cot-step h4{font-size:21px;margin:10px 0 0}
.cot-step p{margin:8px 0 0}

/* ---------- faq ---------- */
.cot-faq{display:grid;gap:20px}
.cot-faq h4{font-size:19px;margin:0}
.cot-faq p{margin:6px 0 0}

/* ---------- insights / posts ---------- */
.cot-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px}
.cot-posts .wp-block-post-title{font-size:21px;line-height:29px;margin:10px 0 0;max-width:26ch}
.cot-posts .wp-block-post-date{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--cot-text) 70%,transparent)}

/* ---------- article ---------- */
.cot-article{padding:56px 60px;max-width:74ch}
.cot-article h1{font-size:clamp(32px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em}
.cot-article h2{font-size:28px;margin:44px 0 0}
.cot-article h3{font-size:22px;margin:32px 0 0}
.cot-article p,.cot-article li{font-size:17px;line-height:31px}
.cot-article blockquote{margin:32px 0;padding-left:22px;border-left:2px solid var(--cot-400);font-style:italic}

/* ---------- form ---------- */
.cot-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;background:#fff;padding:30px;border:1px solid var(--cot-200);border-radius:2px}
.cot-form label{display:grid;gap:8px}
.cot-form label.wide,.cot-form .wide{grid-column:1 / -1}
.cot-input{width:100%;box-sizing:border-box;padding:11px 12px;font-family:var(--cot-serif);font-size:15px;line-height:24px;color:var(--cot-text);caret-color:var(--cot-600);background:#fff;border:1px solid var(--cot-200);border-radius:2px}
.cot-input::placeholder{color:color-mix(in srgb,var(--cot-text) 55%,transparent);opacity:1}
.cot-input:hover{border-color:var(--cot-400)}
textarea.cot-input{resize:vertical}
.cot-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cot-msg{grid-column:1 / -1;padding:12px 14px;border-radius:2px;font-size:15px;background:var(--cot-100);color:var(--cot-900);border:1px solid var(--cot-300)}
.cot-msg.err{background:#fff1f4;border-color:#f7b9cf;color:#7a0b40}

/* ---------- footer ---------- */
.cot-foot{padding:56px 60px;border-top:1px solid var(--cot-200);display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cot-foot-nav{display:flex;gap:24px;font-size:15px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cot-svc{grid-template-columns:1fr;gap:10px;padding:26px 40px}
  .cot-svc .cot-svc-link{text-align:left}
  .cot-sec,.cot-article,.cot-foot{padding-left:40px;padding-right:40px}
  .cot-hero{padding:48px 40px 40px}
}
@media (max-width:860px){
  :root{--cot-rail:0px}
  .wp-site-blocks{grid-template-columns:1fr}
  .cot-rail{position:static;min-height:0;max-height:none;height:auto;border-right:0;border-bottom:1px solid var(--cot-200);flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px}
  .cot-rail .cot-figs{display:none}
  .cot-rail-foot{margin-top:0}
  .cot-hero{grid-template-columns:1fr}
  .cot-form{grid-template-columns:1fr}
}

/* ---------- editor niceties ---------- */
.editor-styles-wrapper .cot-rail{position:static;min-height:0;max-height:none}