/*
Theme Name: Aluepaino 2026
Theme URI: https://aluepaino.fi
Author: Red Tail Media / KOKO.do
Author URI: https://koko.do
Description: Print-craft block theme for Aluepaino (Kustannusliike Aluelehdet Oy). Navy + CMYK process colours, Fraunces + Jost, glassmorphism. Faithful WP build of the 2026 redesign mockups.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary — client deliverable
Text Domain: aluepaino2026
*/

/* ============================================================
   Aluepaino — design system (print-craft, reipas+värikäs) v2
   Fonts enqueued via functions.php (Fraunces + Jost).
   ============================================================ */

:root{
  --navy:#13263A; --navy-d:#0C1826; --navy-2:#1B3450;
  --paper:#F5F1E9; --paper-2:#FBF9F4; --line:#DAD3C4; --line-d:#2B405A;
  --ink:#16191D; --muted:#5B6470; --muted-2:#8A9098;
  --cy:#00A6CE; --mg:#E5288E; --yl:#FFC014; --or:#F1592A; --k:#16191D;
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;font-size:20px;color:var(--ink);background:var(--paper);font-weight:400;line-height:1.64;-webkit-font-smoothing:antialiased;position:relative}
/* whole-site CMYK ambient — gives glass surfaces colour to refract */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(34% 40% at 7% 8%, rgba(0,166,206,.11), transparent 70%),
  radial-gradient(32% 38% at 93% 13%, rgba(229,40,142,.10), transparent 70%),
  radial-gradient(40% 46% at 84% 88%, rgba(241,89,42,.09), transparent 70%),
  radial-gradient(30% 36% at 14% 94%, rgba(255,192,20,.11), transparent 70%)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}
/* WP template-part wrappers must not break layout */
.wp-block-template-part{display:block}
main.wp-block-group{display:block}
/* glass surfaces */
.glass{background:rgba(251,249,244,.56);backdrop-filter:blur(17px) saturate(1.5);-webkit-backdrop-filter:blur(17px) saturate(1.5);border:1px solid rgba(255,255,255,.66);box-shadow:0 16px 40px -24px rgba(19,38,58,.5)}
.glass-d{background:rgba(19,38,58,.6);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.13)}
/* section with local colour ambient (behind glass) */
.amb{position:relative}
.amb::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(38% 48% at 10% 16%, rgba(0,166,206,.16), transparent 68%),
  radial-gradient(36% 44% at 90% 26%, rgba(229,40,142,.14), transparent 68%),
  radial-gradient(44% 50% at 72% 94%, rgba(241,89,42,.12), transparent 68%)}
.amb > .wrap{position:relative;z-index:1}
h1,h2,h3,h4.fr{font-family:'Fraunces',serif;font-weight:400;line-height:1.04;letter-spacing:-0.018em}
a{color:inherit;text-decoration:none}
.em{font-family:'Fraunces',serif;font-style:italic;font-weight:300}
.kicker{font-family:'Jost';font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Jost';font-weight:500;font-size:15.5px;letter-spacing:.01em;padding:15px 28px;border-radius:2px;transition:.2s;cursor:pointer}
.btn-or{background:var(--or);color:#fff}.btn-or:hover{background:#d8431a}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--or)}
.btn-light{border:1.5px solid rgba(255,255,255,.55);color:#fff}.btn-light:hover{background:#fff;color:var(--navy)}
.btn-ghost{border:1.5px solid var(--navy);color:var(--navy)}.btn-ghost:hover{background:var(--navy);color:#fff}

/* cmyk decor */
.cmyk{display:flex;height:6px}.cmyk i{flex:1}
.cmykbar{display:flex;height:14px}.cmykbar i{flex:1}
.cmyk-grad{height:5px;background:linear-gradient(90deg,var(--cy),var(--mg),var(--yl),var(--or))}
.logo-w{filter:brightness(0) invert(1)}

/* TOPBAR */
header.top{position:sticky;top:0;z-index:40;background:rgba(245,241,233,.9);backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.logo{height:38px}
nav.main{display:flex;gap:32px;align-items:center}
nav.main a{font-family:'Jost';font-weight:400;font-size:16.5px;position:relative;padding:4px 0}
nav.main a:hover{color:var(--or)}
nav.main a.cur{color:var(--or)}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--or);transition:.22s}
nav.main a:hover::after,nav.main a.cur::after{width:100%}

/* HOME HERO (video) */
.hero{position:relative;min-height:84vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-d)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,15,24,.86) 0%,rgba(7,15,24,.55) 46%,rgba(7,15,24,.12) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:90px;padding-bottom:74px;width:100%}
.hero .htag{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px}
.hero .htag .dot{display:flex;gap:5px}.hero .htag .dot i{width:10px;height:10px;border-radius:50%;display:block}
.hero .htag span{color:#fff;letter-spacing:.24em}
.hero h1{font-size:84px;color:#fff;max-width:15ch}
.hero h1 .em{color:var(--yl)}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
.regmark{position:absolute;width:28px;height:28px;z-index:3;opacity:.85}

/* INTERIOR PAGE HEADER (no video) */
.phead{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.phead::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--cy),var(--mg),var(--yl),var(--or))}
.phead .wrap{padding:78px 44px 68px}
.phead .crumb{font-family:'Jost';font-size:14px;letter-spacing:.04em;color:#9FB0C2;margin-bottom:18px}
.phead .crumb a:hover{color:#fff}
.phead h1{font-size:64px;color:#fff;max-width:18ch}
.phead h1 .em{color:var(--yl)}
.phead p{color:#C7D2DE;font-size:19.5px;margin-top:20px;max-width:50ch;line-height:1.55}
.phead .bigq{position:absolute;right:14px;top:-60px;font-family:'Fraunces';font-size:280px;color:rgba(255,192,20,.06);line-height:1}

/* SECTION LABEL */
.sec{padding:88px 0}
.sec-label{display:flex;align-items:center;gap:20px;margin-bottom:44px}
.sec-label .ln{flex:1;height:2px;background:linear-gradient(90deg,var(--cy),var(--mg),var(--yl),var(--or))}

/* PROSE (articles, guide, privacy) */
.prose{max-width:72ch;margin:0 auto;font-size:19.5px;color:#26292E;line-height:1.78}
.prose h2{font-size:37px;color:var(--navy);margin:50px 0 16px}
.prose h3{font-size:26px;color:var(--navy);margin:34px 0 12px}
.prose p{margin:0 0 19px}
.prose ul,.prose ol{margin:0 0 21px 1.2em}.prose li{margin:0 0 10px}
.prose a{color:var(--or);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:600;color:var(--navy)}
.prose blockquote{border-left:4px solid var(--or);padding:6px 0 6px 24px;margin:28px 0;font-family:'Fraunces';font-style:italic;font-size:24px;color:var(--navy)}
.lead{font-size:23px;color:var(--muted);line-height:1.58;margin-bottom:36px;font-weight:300}

/* VALUE GRID */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.value{background:rgba(251,249,244,.5);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.66);border-top:5px solid var(--vc,var(--cy));border-radius:4px;box-shadow:0 16px 40px -26px rgba(19,38,58,.5);padding:30px 26px 34px;min-height:200px;display:flex;flex-direction:column}
.value .no{font-family:'Fraunces';font-weight:500;font-size:30px;color:var(--vc,var(--cy));line-height:1}
.value h3{font-size:23px;margin:16px 0 12px;color:var(--navy)}
.value p{font-size:17px;color:#4A525E}

/* PRODUCT GRID */
.grid-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:.25s;display:block}
.pcard:hover{transform:translateY(-5px);box-shadow:0 18px 36px -22px rgba(19,38,58,.5)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;background:#fff;border-bottom:4px solid var(--pc,var(--cy))}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .pl{padding:18px 22px;display:flex;align-items:center;justify-content:space-between}
.pcard .pl b{font-family:'Jost';font-weight:500;font-size:17px;color:var(--navy)}
.pcard .pl span{font-family:'Jost';font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pc,var(--cy))}

/* COLOUR BAND */
.band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--cy),var(--mg),var(--yl),var(--or))}
.band .wrap{padding:90px 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.band h2{font-size:46px;color:#fff;line-height:1.05}.band h2 .em{color:var(--yl)}
.band p{color:#D2DCE6;font-size:19px;margin-top:24px;max-width:38ch}
.band .side{border-left:2px solid var(--or);padding-left:38px}
.band .side p{color:#AEBCCB;font-size:17px;margin:0 0 26px}
.band .bigq{position:absolute;right:10px;top:-70px;font-family:'Fraunces';font-size:300px;color:rgba(255,192,20,.07);line-height:1}

/* PRICING TABLE / CARDS */
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.ptable thead th{background:var(--navy);color:#fff;font-family:'Jost';font-weight:500;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:17px 22px}
.ptable td{padding:16px 22px;border-top:1px solid var(--line);font-size:17px}
.ptable tbody tr:nth-child(even){background:var(--paper-2)}
.ptable td.num{text-align:right;font-weight:500;color:var(--navy)}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricec{background:rgba(251,249,244,.55);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.66);border-top:5px solid var(--pc,var(--cy));border-radius:4px;box-shadow:0 16px 40px -26px rgba(19,38,58,.5);padding:30px 28px}
.pricec h3{font-size:24px;color:var(--navy);margin-bottom:8px}
.pricec .amt{font-family:'Fraunces';font-size:40px;color:var(--navy);margin:10px 0}
.pricec .amt small{font-size:16px;color:var(--muted);font-family:'Jost'}

/* FAQ — open by default, glass cards over CMYK ambient (modern). */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:24px}
.qa .qi{position:relative;overflow:hidden;padding:36px 34px 34px;border-radius:16px;
  background:rgba(251,249,244,.55);backdrop-filter:blur(18px) saturate(1.55);-webkit-backdrop-filter:blur(18px) saturate(1.55);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 44px -26px rgba(19,38,58,.55);transition:transform .25s,box-shadow .25s}
.qa .qi:hover{transform:translateY(-4px);box-shadow:0 26px 52px -28px rgba(19,38,58,.6)}
.qa .qi::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--qc,var(--cy))}
.qa .qnum{position:absolute;top:14px;right:24px;font-family:'Fraunces';font-weight:600;font-size:64px;line-height:1;color:var(--qc,var(--cy));opacity:.18;pointer-events:none}
.qa .qq{position:relative;font-family:'Fraunces';font-size:25px;color:var(--navy);line-height:1.18;margin:8px 0 15px;letter-spacing:-.01em;max-width:86%}
.qa .qaa{font-size:18.5px;color:#2A2E33;line-height:1.7}
.qa .qaa a{color:var(--or);text-decoration:underline;text-underline-offset:2px}

/* FORM */
.formcard{display:grid;grid-template-columns:1.05fr .95fr;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.6);box-shadow:0 22px 50px -28px rgba(19,38,58,.55)}
.formcard .fl{background:linear-gradient(155deg,#F1592A,#d8431a);color:#fff;padding:56px 48px}
.formcard .fl h2{font-size:42px;color:#fff;line-height:1.05}.formcard .fl h2 .em{color:#fff}
.formcard .fl p{color:#FFE6DC;font-size:18px;margin-top:18px}
.formcard .fr{background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);padding:48px 44px}
.field{margin-bottom:18px}
.field label{display:block;font-family:'Jost';font-weight:500;font-size:13.5px;color:var(--navy);margin-bottom:7px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:14px 15px;font-family:'Jost';font-size:16px;background:var(--paper-2)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(241,89,42,.12)}
/* WPForms shortcode lands inside .fr — inherit the card styling */
.formcard .fr .wpforms-container{margin:0}
.formcard .fr .wpforms-field{margin-bottom:18px;padding:0}
.formcard .fr .wpforms-field-label{font-family:'Jost';font-weight:500;font-size:13.5px;color:var(--navy);margin-bottom:7px}
.formcard .fr input[type=text],.formcard .fr input[type=email],.formcard .fr input[type=tel],.formcard .fr textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:14px 15px;font-family:'Jost';font-size:16px;background:var(--paper-2)}
.formcard .fr .wpforms-submit{background:var(--or);color:#fff;border:0;border-radius:2px;font-family:'Jost';font-weight:500;font-size:15.5px;padding:15px 28px;width:100%;cursor:pointer}
.formcard .fr .wpforms-submit:hover{background:#d8431a}

/* CONTACT INFO BLOCKS */
.cinfo{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cblock{background:var(--navy-d);background-image:linear-gradient(160deg,#14283f,#0b1623);color:#fff;border-radius:8px;border:1px solid rgba(255,255,255,.1);border-top:5px solid var(--cc,var(--yl));box-shadow:0 18px 44px -26px rgba(7,15,24,.7);padding:38px 36px}
.cblock .ct{font-family:'Jost';font-weight:700;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc,var(--yl));margin-bottom:13px}
.cblock .cn{font-family:'Fraunces';font-size:27px;color:#fff;margin-bottom:10px}
.cblock a,.cblock span{display:block;color:#E2E9F0;font-size:18px;line-height:1.85}.cblock a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* HOME CONTACT CARD (front page variant) */
.contact-card{border-radius:5px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr}
.contact-card .l{background:var(--or);color:#fff;padding:64px 56px;position:relative}
.contact-card .l h2{font-size:50px;color:#fff;line-height:1.02}
.contact-card .l h2 .em{color:#fff}
.contact-card .l p{color:#FFE6DC;margin:22px 0 36px;font-size:17px;max-width:26ch}
.contact-card .r{background:var(--navy);padding:54px 48px}
.cgroup{margin-bottom:30px}
.cgroup .ct{font-family:'Jost';font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--yl);margin-bottom:10px}
.cgroup .cn{font-family:'Fraunces';font-size:24px;color:#fff;margin-bottom:7px}
.cgroup a,.cgroup span{display:block;color:#E2E9F0;font-size:17px;line-height:1.75}
.cgroup a:hover{color:#fff}

/* HOME sections that the front page uses with their own padding */
.why{padding:104px 0 64px}
.why-head{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:baseline;margin-bottom:14px}
.why-head h2{font-size:52px;color:var(--navy)}
.why-sub{font-family:'Fraunces';font-style:italic;font-weight:300;font-size:26px;color:var(--or);margin-bottom:56px}
.products{padding:56px 0 104px}
.clients{padding:100px 0;text-align:center}
.clients h2{font-size:42px;color:var(--navy);max-width:20ch;margin:14px auto 18px}
.clients .sub{color:var(--muted);max-width:50ch;margin:0 auto 46px;font-size:16.5px}
.contact{padding:0 0 108px}

/* CLIENTS logo cloud */
.logos{background:#fff;border:1px solid var(--line);border-radius:4px;border-top:5px solid var(--cy);padding:48px;text-align:center}
.logos img{width:100%;max-width:940px}

/* FOOTER */
footer.site{background:var(--navy);color:#fff}
footer.site .cmyk{height:6px}
footer.site .wrap{padding:64px 44px 30px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
footer.site .logo-f{height:34px;margin-bottom:20px}
footer.site p,footer.site a{color:#BAC7D4;font-size:16.5px;line-height:1.9}footer.site a:hover{color:#fff}
footer.site h4{font-family:'Jost';font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footbar{border-top:1px solid var(--line-d)}
.footbar .wrap{padding:20px 44px;display:flex;justify-content:space-between;font-size:13px;color:#8497A8}

/* utility */
.center{text-align:center}
.mt-s{margin-top:18px}.mt-m{margin-top:34px}

/* RESPONSIVE */
@media(max-width:980px){
  .wrap{padding:0 28px}
  .phead .wrap{padding:60px 28px 52px}
  .hero h1{font-size:60px}.phead h1{font-size:46px}
  .why-head h2{font-size:40px}
  .prose h2{font-size:31px}
  .values,.grid-prod,.pcards,.cinfo{grid-template-columns:1fr 1fr}
  .band .wrap,.formcard,.contact-card{grid-template-columns:1fr}
  .band .side{border-left:0;border-top:2px solid var(--or);padding-left:0;padding-top:30px;margin-top:8px}
  .qa{grid-template-columns:1fr}
  nav.main{gap:20px;font-size:14px}
  nav.main a:not(.btn){display:none}
  footer.site .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:18px}
  .wrap{padding:0 20px}
  .hero h1{font-size:46px}.phead h1{font-size:36px}
  .phead p{font-size:17.5px}
  .why-head h2{font-size:34px}
  .values,.grid-prod,.pcards,.cinfo{grid-template-columns:1fr}
  .lead{font-size:20px}
  .prose{font-size:17.5px}.prose h2{font-size:27px}
  .band h2{font-size:34px}.formcard .fl h2,.contact-card .l h2{font-size:32px}
  .sec{padding:60px 0}
  footer.site .wrap{grid-template-columns:1fr;gap:32px}
}