/* Netocrat — business-card frame, intro animation, and block tweaks.
   Colours and type come from theme.json (CSS custom properties below). */
:root {
  --edge: 3px;                                  /* painted edge thickness */
  --corner: clamp(28px, 6vw, 64px);             /* the one rounded corner */
  --gutter: clamp(12px, 2.5vw, 32px);           /* page background around the card */
  --pad: clamp(20px, 4vw, 56px);                /* card padding */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .18, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a:focus, button:focus, input:focus, [tabindex]:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* The card ---------------------------------------------------------- */
.card {
  min-height: calc(100vh - var(--gutter) * 2);
  min-height: calc(100svh - var(--gutter) * 2);
  margin: var(--gutter);
  padding: var(--pad);
  background: var(--wp--preset--color--base);
  border: var(--edge) solid var(--wp--preset--color--accent);
  border-top-left-radius: var(--corner);
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}
.card > * { margin-block: 0; }
.site-main { flex: 1; width: 100%; padding-block: clamp(32px, 6vh, 80px) clamp(40px, 8vh, 96px); }
.site-main > * + * { margin-block-start: clamp(40px, 8vh, 96px); }

/* Header: nav left, logo top-right (where the intro logo lands) */
.site-header__inner { width: 100%; }
.site-header__inner > .wp-block-site-logo { flex: 0 0 auto; }
.nav { min-width: 0; }
/* Navigation: the block's own 21 KB stylesheet is dropped in functions.php, and WordPress attaches
   theme.json block styles to that same handle, so the nav typography lives here instead. */
.wp-block-navigation { font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--small); letter-spacing: .02em; color: var(--wp--preset--color--muted); }
.wp-block-navigation a { color: var(--wp--preset--color--muted); text-decoration: none; }
.wp-block-navigation__container { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.wp-block-navigation-item { margin: 0; }
.nav { column-gap: clamp(16px, 3vw, 32px); row-gap: .25rem; }
.nav a { text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; transition: color .2s; }
.nav a:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--accent); }
.nav a:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.wp-block-site-logo { line-height: 0; }
.wp-block-site-logo img { width: clamp(44px, 5vw, 56px); height: auto; }

/* Hero and sections ----------------------------------------------------- */
.eyebrow, .is-style-label {
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.hero { padding-top: clamp(32px, 8vh, 96px); }
.hero .eyebrow { margin-bottom: 1rem; }
.hero .wp-block-site-title { margin-bottom: 1rem; }
.hero .lede { max-width: 34rem; }
.hero .wp-block-site-title { font-size: min(var(--wp--preset--font-size--xx-large), 10vw); overflow-wrap: break-word; text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; }
.hero .wp-block-buttons { margin-top: 2rem; }
.section .wp-block-buttons, .wp-block-post-content .wp-block-buttons { margin-block-start: 2rem; }
.netocrat-contact { display: flex; flex-wrap: wrap; gap: 1rem; }
/* LinkedIn button: the theme's outline button (accent border, yellow fill on hover) with the "in" mark in accent yellow */
.netocrat-linkedin--button { display: inline-flex; align-items: center; gap: .6rem; }
.netocrat-linkedin__icon { flex: 0 0 auto; color: var(--wp--preset--color--accent); }
.netocrat-linkedin--button:hover .netocrat-linkedin__icon, .netocrat-linkedin--button:focus-visible .netocrat-linkedin__icon { color: inherit; }
h2.is-style-label { margin-bottom: 1.5rem; }
.section + .section { border-top: 1px solid var(--wp--preset--color--line); padding-top: clamp(40px, 8vh, 96px); }
.wp-block-columns.alignwide { max-width: 72rem; }
.wp-block-column h3 { margin-bottom: .5rem; }
.wp-block-column p { color: var(--wp--preset--color--muted); }

/* Posts ------------------------------------------------------------------ */
.wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.wp-block-post-template > li + li { margin-top: 2rem; }
.post-card .wp-block-post-title { margin: 0 0 .25rem; }
.post-card .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.post-card .wp-block-post-date { margin-bottom: .5rem; }
.entry-meta { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--small); }
.entry-meta a { color: inherit; }
.entry .wp-block-post-title { margin-top: .5rem; margin-bottom: 1.5rem; }
.entry-thumb img { width: 100%; height: auto; }
.entry-tags { margin-top: 2rem; font-size: var(--wp--preset--font-size--small); font-family: var(--wp--preset--font-family--inter); }
.wp-block-post-content > * + * { margin-block-start: 1.25em; }
.wp-block-post-content h2 { margin-top: 2.5em; }
.wp-block-post-content h3 { margin-top: 2em; }
.wp-block-post-content img, .wp-block-post-content video, .wp-block-post-content iframe { max-width: 100%; height: auto; }
.wp-block-post-content a { text-underline-offset: .2em; }

.pagination a, .pagination .page-numbers { text-decoration: none; padding: .25rem .5rem; border-bottom: 1px solid transparent; }
.pagination .current, .pagination a:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--accent); }

/* Search block in 404 */
.wp-block-search__input { background: var(--wp--preset--color--page); color: inherit; border: 1px solid var(--wp--preset--color--muted); border-radius: 999px; padding: .6rem 1rem; }
.wp-block-search__input::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
.wp-block-search__button { border: 1px solid var(--wp--preset--color--accent); background: transparent; color: inherit; border-radius: 999px; padding: .6rem 1.2rem; cursor: pointer; }
.wp-block-search__button:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--page); }

/* Contact e-mail: the no-JS fallback is stored reversed; display it the right way round */
.netocrat-email__text--reversed { unicode-bidi: bidi-override; direction: rtl; display: inline-block; }

/* Footer ---------------------------------------------------------------- */
.site-footer { padding-top: var(--pad); color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--inter); }
.site-footer__inner { width: 100%; }
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }

/* Skip link and admin bar */
.skip-link.screen-reader-text:focus { position: fixed; left: 8px; top: 8px; z-index: 100000; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--page); padding: .5rem 1rem; border-radius: 4px; clip: auto; clip-path: none; width: auto; height: auto; }
.admin-bar .intro { top: var(--wp-admin--admin-bar--height, 32px); }

/* Intro animation ------------------------------------------------------
   The page content is painted from the first frame. With JS, an opaque overlay
   the colour of the card face sits inside the yellow edge, showing only the
   centred logo (the "card front"). The logo then travels onto the header logo
   while the overlay clears. `intro-pending` is set by an inline head script,
   never on repeat visits or with prefers-reduced-motion. Without JS the overlay
   never exists. If intro.js never runs, a CSS fail-safe clears it after 2.5 s. */
.intro { display: none; }
.js.intro-pending .intro {
  display: grid;
  place-items: center;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  padding: var(--gutter);
  background: var(--wp--preset--color--page);
  z-index: 5;
  pointer-events: none;
}
/* The card front itself, sized to the viewport so all four edges are visible */
.js.intro-pending .intro::before {
  content: "";
  position: absolute;
  top: var(--gutter); right: var(--gutter); bottom: var(--gutter); left: var(--gutter);
  background: var(--wp--preset--color--base);
  border: var(--edge) solid var(--wp--preset--color--accent);
  border-top-left-radius: var(--corner);
}
.js.intro-pending .admin-bar .intro { top: var(--wp-admin--admin-bar--height, 32px); }
.intro__logo {
  position: relative;
  width: clamp(120px, 22vmin, 200px);
  height: auto;
  opacity: 0;
  transform: scale(.92);
  transform-origin: top left;
  will-change: transform, opacity;
}
.js.intro-pending .wp-block-site-logo img { opacity: 0; }
.js.intro-play .intro__logo { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js.intro-travel .intro { background-color: transparent; transition: background-color .5s var(--ease-out) .3s; }
.js.intro-travel .intro::before { opacity: 0; transition: opacity .5s var(--ease-out) .3s; }
.js.intro-travel .intro__logo { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(var(--s)); transition: transform .8s var(--ease-in-out); }
.js.intro-done .intro { display: none; }
.js.intro-done .wp-block-site-logo img { opacity: 1; }
/* Fail-safe when intro.js never runs */
.js.intro-pending:not(.intro-travel) .intro { animation: netocrat-failsafe-hide .4s ease-out 2.5s forwards; }
.js.intro-pending:not(.intro-travel) .wp-block-site-logo img { animation: netocrat-failsafe-show .4s ease-out 2.5s forwards; }
@keyframes netocrat-failsafe-hide { to { opacity: 0; visibility: hidden; } }
@keyframes netocrat-failsafe-show { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .intro { display: none; }
  .js.intro-pending .wp-block-site-logo img { opacity: 1; animation: none; }
}

@media (forced-colors: active) {
  .card { border-color: CanvasText; }
  .nav a { border-bottom-width: 0; }
  .nav a:focus-visible { outline: 2px solid Highlight; }
  .wp-block-site-logo img, .intro__logo { background: #231f20; border-radius: 4px; }
}

/* Small screens: columns stack (mirrors core's 781px breakpoint) and nothing escapes the card */
.wp-block-column { min-width: 0; }
.site-main, .wp-block-post-content { max-width: 100%; }
@media (max-width: 781px) {
  .nav { column-gap: .75rem; font-size: .875rem; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; flex-wrap: wrap; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; width: 100%; }
  .wp-block-columns.alignwide { gap: 1.5rem; }
}

/* Print ------------------------------------------------------------------ */
@media print {
  :root {
    --wp--preset--color--page: #fff; --wp--preset--color--base: #fff; --wp--preset--color--contrast: #000;
    --wp--preset--color--muted: #333; --wp--preset--color--accent: #5a4200; --wp--preset--color--line: #999;
  }
  html { color-scheme: light; }
  body { background: #fff; color: #000; }
  .card { min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; }
  .intro, .nav, .skip-link, .wp-block-search, .wp-block-template-skip-link { display: none; }
  a { color: inherit; text-decoration: underline; }
  .wp-block-post-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}