/*!
Theme Name: Nikola Dikic Portfolio
Author: Nikola Dikić
Author URI: https://nikoladikic.com
Description: Portfolio and services site. Dark by default, light available. Content renders from the nd-catalog knowledge table where it is repeated, and from ACF blocks where it is not.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nikola-dikic-portfolio
Tags: custom-menu, translation-ready

Built on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.

--------------------------------------------------------------
CONTENTS

Colour, type and spacing live in assets/css/tokens-*.css, loaded before
this file. Nothing here should contain a hard-coded colour.

Page-specific rules live in assets/css/page-{slug}.css and are enqueued
only on the template that needs them.
--------------------------------------------------------------
*/

/* --------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.mark-word{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.32em;text-indent:.32em}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:var(--ink-dim);font-size:15px;font-weight:500;padding:6px 2px;position:relative;transition:color .18s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--violet)}
.pill:hover{border-color:var(--ink-dim);background:var(--surface)}
.pill.cta{background:var(--btn-violet-bg);border-color:var(--btn-violet-bg);color:var(--btn-violet-ink);font-weight:600;border-radius:4px;padding:11px 22px}
.pill.cta:hover{background:var(--violet-deep);border-color:var(--violet-deep)}
.pill.cta.amber{background:var(--amber);border-color:var(--amber);color:var(--btn-amber-ink);border-radius:4px}
.pill.cta.amber:hover{background:var(--btn-amber-hover);border-color:var(--btn-amber-hover)}
.pill.cta[aria-current="page"]{background:transparent;color:var(--ink);border-color:var(--violet);border-radius:4px}
.pill.cta[aria-current="page"]::after{display:none}
.nav-toggle{display:none}
.index-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;text-align:right}
.index-rail a{text-decoration:none;color:var(--ink-faint);transition:color .18s}
.index-rail a:hover{color:var(--ink-dim)}
.index-rail .here{color:var(--ink)}
.index-rail .bar{width:1px;background:var(--line);position:relative}
main{position:relative;z-index:1}
.lede strong{color:var(--ink);font-weight:600}
.sec-head p{color:var(--ink-dim);margin:0}
.seal-edge{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.42}
.seal-ring{fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:4 5.5;stroke-linecap:round}
.seal-t1{fill:currentColor;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.seal-t2{fill:currentColor;font-family:var(--mono);font-size:7.4px;letter-spacing:.14em;opacity:.72}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:15px;padding:12px 22px;border-radius:4px;border:1px solid transparent;transition:background .18s,border-color .18s,color .18s}
.btn svg{transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.btn-violet{background:var(--btn-violet-bg);color:var(--btn-violet-ink)}
.btn-violet:hover{background:var(--violet-deep)}
footer a{color:var(--ink-faint);text-decoration:none}
footer a:hover{color:var(--ink-dim)}
footer .spacer{margin-left:auto}
@media (max-width:1080px){
  .index-rail{display:none}
  .wrap{padding-right:var(--gutter)}
}
@media (max-width:560px){
  body{font-size:16px}
  .closer-inner{flex-direction:column;align-items:flex-start}
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle at center,var(--dot) 1px,transparent 1px);background-size:34px 34px;opacity:.5;pointer-events:none;z-index:0}
/* The header and the open drawer stick as one piece.

   The drawer is a sibling of .masthead rather than a child of it, because the
   masthead is a flex row and the drawer is a column underneath it. When the
   masthead alone was sticky, opening the menu and scrolling left the drawer
   behind: it slid up under the pinned header and vanished while the header
   stayed. Sticking the wrapper instead keeps the two together.

   Both selectors outrank the per-page copies of .masthead, which are inlined
   after this sheet, so the page CSS does not need editing. */
.topbar{position:sticky;top:0;z-index:60}
.topbar>.masthead{position:static;z-index:auto}

/* A menu longer than the screen still has to let you reach the last item. */
.topbar>.drawer{max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain}

/* The masthead fades to transparent at its foot so the page shows through as
   it scrolls under it. With the drawer open that leaves a strip of body text
   between the logo and the first menu item, so while it is open the header
   goes solid. */
.topbar:has(>.drawer:not([hidden]))>.masthead{background:var(--bg)}

/* A grid column is allowed to be narrower than what is inside it.

   The intake pages put the panel in a grid column, and on a phone that column
   is a plain 1fr, whose minimum is the column's min-content width. The booking
   panel holds a fortnight of day buttons in a row -- 1468px of them -- so the
   column, the grid, and every paragraph on the page grew to that width and the
   prose ran off the side of the screen. The day strip already scrolls inside
   itself; it only needed permission to be narrower than its contents. */
.layout>*,.plug-body>*,.plug-head>*{min-width:0}

/* The skip link, which nothing was hiding.

   header.php marks it screen-reader-text, the class every theme uses for
   this, but the class was never defined anywhere -- so it rendered as a
   plain visible link in the top-left of every page. It is a real keyboard
   affordance (WCAG 2.4.1), so it is hidden rather than deleted: off-screen
   until it takes focus, then a button in the corner for the one visitor in
   a thousand who tabs into it. */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:fixed;top:12px;left:12px;z-index:100000;
  width:auto;height:auto;margin:0;padding:12px 20px;overflow:visible;
  clip-path:none;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;
  font-weight:600;font-size:15px;text-decoration:none;
}

.masthead{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(20px,4vw,56px);padding:22px var(--gutter);background:linear-gradient(to bottom,var(--bg) 62%,rgba(15,15,18,0))}
.mark-glyph{width:30px;height:24px;border-radius:3px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:-.04em}
.closer-inner p{margin:0;color:var(--ink-dim);max-width:48ch}
footer{border-top:1px solid var(--line-soft);padding:34px var(--gutter);display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--ink-faint);position:relative;z-index:1}
.nav{display:flex;gap:clamp(12px,2vw,26px);margin-left:auto;align-items:center}
.pill{border:1px solid var(--line);border-radius:999px;padding:10px 22px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--gutter)}
.crumb{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);padding-top:10px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink-dim)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.05rem,4.4vw,3.25rem);line-height:1.05;letter-spacing:-.028em;margin:18px 0 20px;max-width:19ch}
.lede{font-size:clamp(1.02rem,1.5vw,1.14rem);color:var(--ink-dim);max-width:64ch;margin:0 0 26px}
.because{border-left:2px solid var(--violet);padding:2px 0 2px 20px;margin:26px 0 0;display:grid;gap:7px}
.because .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);margin:0}
.because ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.because li{color:var(--ink-dim);font-size:15.2px;line-height:1.5}
.because li::before{content:"— ";color:var(--violet)}
.sec{padding-block:clamp(44px,7vh,84px);border-top:1px solid var(--line-soft)}
.sec-head{max-width:64ch;margin-bottom:30px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,2.8vw,2.15rem);letter-spacing:-.022em;margin:0 0 12px;line-height:1.14}
.sec-head p{color:var(--ink-dim);margin:0 0 14px}
.sec-head p:last-child{margin:0}
.sec-head strong{color:var(--ink);font-weight:600}
.proofs{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.proof .side b{color:var(--teal);font-weight:500}
.nope{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr));gap:22px 38px;margin-top:26px}
.nope div{padding-left:24px;position:relative}
.nope div::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1.5px;background:var(--ink-faint)}
.nope h3{font-family:var(--display);font-weight:700;font-size:.98rem;margin:0 0 5px;letter-spacing:-.01em}
.nope p{margin:0;color:var(--ink-dim);font-size:14.5px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;padding:18px 0;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--violet);font-size:16px}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--ink-dim);font-size:15.5px;max-width:68ch}
.offers{border-top:1px solid var(--line-soft)}
.offer{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:10px 34px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.offer .shape{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--violet);display:block;margin-bottom:6px}
.offer.teal .shape{color:var(--teal)}
.offer.amber .shape{color:var(--amber)}
.offer h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:0;letter-spacing:-.014em;line-height:1.25}
.offer p{margin:0;color:var(--ink-dim);font-size:15.2px;max-width:66ch}
.buy-foot{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:26px}
.buy-foot .fine{font-family:var(--mono);font-size:11px;color:var(--ink-faint);line-height:1.7}
.also{border-top:1px solid var(--line-soft);padding-top:18px;margin-top:0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline}
.sec-also{padding-block:0 clamp(30px,4vh,48px)}
.also .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint)}
.also a{font-size:14.5px;font-weight:600;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-height:28px}
.also a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.offer{grid-template-columns:1fr;gap:6px}}
.closer-inner{border:1px solid var(--line);background:var(--surface);padding:clamp(28px,4vw,50px);display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.closer-inner h2{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,2.6vw,2rem);margin:0 0 9px;letter-spacing:-.02em}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:15px;padding:12px 22px;border-radius:4px;border:1px solid transparent;transition:background .18s}
@media (max-width:860px){
  .nav a{display:none}
  .nav{margin-left:0;gap:14px}
  .nav-toggle{display:inline-flex;align-items:center;gap:9px;margin-left:auto;background:none;border:0;color:var(--ink-dim);font:inherit;font-size:15px;font-weight:500;cursor:pointer;padding:6px 0}
  .drawer[hidden]{display:none}
  .drawer{padding:0 var(--gutter) 22px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px;position:relative;z-index:55;background:var(--bg)}
  .drawer a{text-decoration:none;color:var(--ink-dim);padding:12px 0;border-bottom:1px solid var(--line-soft);font-weight:500}
  .drawer a:last-child{border-bottom:0}
}
.pill.cta{background:var(--btn-violet-bg);border-color:var(--btn-violet-bg);color:var(--btn-violet-ink);border-radius:4px;padding:11px 22px}
.intro{padding-block:20px clamp(28px,4vh,44px)}
.fig{border:1px solid var(--line);background:var(--surface);padding:clamp(20px,3vw,30px)}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.05em;line-height:1.85;margin-top:15px;border-top:1px solid var(--line-soft);padding-top:13px}
.fig figcaption b{color:var(--teal);font-weight:500}
.fig figcaption em{color:var(--amber);font-style:normal}
.feat{border:1px solid var(--line);background:var(--surface)}
.frow:last-child{border-bottom:0}
.frow b{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.frow .sub{display:block;font-family:var(--mono);font-size:10.5px;color:var(--teal);margin-top:4px}
.frow p{margin:0;color:var(--ink-dim);font-size:14.8px}
.breaks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:28px}
.brk{background:var(--bg);padding:24px 22px;display:flex;flex-direction:column;gap:8px}
.brk h3{font-family:var(--display);font-weight:700;font-size:1.02rem;margin:0;letter-spacing:-.01em}
.brk p{margin:0;color:var(--ink-dim);font-size:14.5px}
.brk .tag{font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:var(--amber)}
.faq{border-top:1px solid var(--line-soft)}
.closer-inner p{margin:0;color:var(--ink-dim);max-width:50ch}
.evid{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);border-top:1px solid var(--line-soft);padding-top:20px}
.evid b{color:var(--teal);font-weight:500}
.proof{background:var(--bg);padding:24px 22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:16px 30px}
.proof h3{font-family:var(--display);font-weight:700;font-size:1.04rem;margin:0 0 6px;letter-spacing:-.01em}
.proof p{margin:0;color:var(--ink-dim);font-size:14.8px}
.proof .side{font-family:var(--mono);font-size:11px;color:var(--ink-faint);line-height:1.9}
@media (max-width:860px){
  .nav a{display:none}
  .nav{margin-left:0;gap:14px}
  .nav-toggle{display:inline-flex;align-items:center;gap:9px;margin-left:auto;background:none;border:0;color:var(--ink-dim);font:inherit;font-size:15px;font-weight:500;cursor:pointer;padding:6px 0}
  .drawer[hidden]{display:none}
  .drawer{padding:0 var(--gutter) 22px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px;position:relative;z-index:55;background:var(--bg)}
  .drawer a{text-decoration:none;color:var(--ink-dim);padding:12px 0;border-bottom:1px solid var(--line-soft);font-weight:500}
  .frow{grid-template-columns:1fr;gap:6px}
  .proof{grid-template-columns:1fr}
}