/* ==========================================================================
   wosh.productions — shared styling for the long-form pages
   --------------------------------------------------------------------------
   The blog articles, the English long-form pages and the project case studies
   were each built before the design system existed. They already use Google
   Sans, so the mismatch is not typeface but components: their own CTA boxes,
   table wrappers, FAQ blocks and meta lines, each styled slightly differently.

   Like /tools.css, this file is loaded AFTER each page's inline <style> —
   the reverse of the normal order — because its job is to override the page's
   own component styling:

       site.css -> nav.css -> the page's inline <style> -> article.css -> footer.css

   footer.css still comes last. See the load-order note at the top of site.css.

   Deliberately conservative: it restyles components and rhythm, and leaves each
   page's layout and interactive parts (calculators, month tables, galleries)
   alone, because they work and they differ genuinely from page to page.

   NOTE ON PROSE SPACING: these pages declare their own
   `p { margin-bottom: 1.5rem }` and `ul, ol { margin-bottom: 2rem }`, which
   still win over site.css's `p { margin: 0 }` because their inline <style>
   comes later. That is load-bearing — do not "clean up" those rules.
   ========================================================================== */

/* ── Content column ───────────────────────────────────────────────────────
   The articles set their own max-width via --container-max. Aligning that to
   the design system's reading measure is what makes them feel like the same
   site as /blog/ and the month pages. */
:root {
  --container-max: 820px;
}

article {
  margin-inline: auto;
}

/* ── Headings ─────────────────────────────────────────────────────────────
   Same scale and tracking as .prose in site.css, so an article heading and a
   section heading elsewhere on the site read as one system. */
article h1,
.seo-content h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

article h2,
.seo-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

article h3,
.seo-content h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Space AROUND headings, both sides, declared explicitly.
   These pages never set heading margins of their own — the browser default
   supplied them. site.css declares `h1, h2, h3 { margin: 0 }` and loads first,
   so pulling it in removed that default and left 71 headings sitting flush
   against the paragraph above them. The top margin here restores the section
   break; the bottom one keeps a heading off the list or table beneath it.

   Values are in em, so they scale with each heading's own size. Margins
   collapse through the wrapping <section> on these pages, which is why the
   space appears above the section rather than inside it — that is correct. */
article h2,
.seo-content h2 {
  margin-top: 2.2em;
  margin-bottom: .7em;
}

article h3,
.seo-content h3 {
  margin-top: 1.9em;
  margin-bottom: .6em;
}

/* The title block: h1 never needs a top margin, and the meta/intro line under
   it should sit close but not touch. */
article h1,
article>header h1,
.seo-content h1 {
  margin-top: 0;
  margin-bottom: .55em;
}

/* Not scoped to <article>: /blog/kalendar/, /blog/wordpress/ and
   /en/blog/uk-working-hours-2026/ put their h1 in a plain <main>, so an
   article-scoped selector never matched and their meta line sat flush against
   a 56-64px heading. This file is only loaded on the long-form pages, so an
   unscoped h1 rule is safe here. */
h1+p,
h1+.meta-info,
h1+.post-meta,
h1+.intro-text {
  margin-top: .8rem;
}

/* ── Links in body copy ──────────────────────────────────────────────────── */
article p a,
article li a,
.seo-content p a,
.seo-content li a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color .25s var(--ease);
}

article p a:hover,
article li a:hover,
.seo-content p a:hover,
.seo-content li a:hover {
  text-decoration-color: currentColor;
}

/* ── Breadcrumb + meta line ──────────────────────────────────────────────── */
.meta-info,
.post-meta,
.table-note {
  font-size: .85rem;
  color: var(--muted);
}

/* ── Data tables ──────────────────────────────────────────────────────────
   Matches .table-scroll: hairline border, generous radius, uppercase head,
   and the same content-sized width — see the long note in site.css.

   The inset differs because these pages predate .shell: they gutter themselves
   with `body { padding: 0 5vw }` (the article pages) or `main { padding: 5% }`
   (the year-calendar pages), so 5vw is what the table has to stay inside of.

   These pages all declare `.table-container { width: 100% }` in their own
   <style>. Same specificity, and this file loads after them, so fit-content
   wins — that ordering is the whole reason this file exists. */
.table-container {
  --table-inset: 5vw;
  margin: 2em 0;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
  width: fit-content;
  min-width: 100%;
  max-width: min(1120px, calc(100vw - 2 * var(--table-inset)));
  margin-left: 50%;
  transform: translateX(-50%);
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.table-container th,
.table-container td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}

.table-container thead th {
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--wash);
  border-bottom: 1px solid var(--hairline);
}

.table-container tbody tr:last-child td {
  border-bottom: 0;
}

.table-container tbody tr:hover {
  background: var(--wash);
}

/* Phones. Every one of these pages sets a `min-width` on the table itself —
   500px on the article tables, 600 to 780px on the year calendars — which is
   the single reason a four-column table scrolls on a 390px screen it would
   otherwise fit in. Dropping it does not squash the genuinely wide ones: a
   table still cannot go below its min-content width, so the 8-column calendars
   keep scrolling, they just scroll less and across the whole screen. */
@media (max-width: 720px) {
  .table-container {
    --table-inset: .6rem;
  }

  .table-container table {
    min-width: 0;
    font-size: .88rem;
  }

  .table-container th,
  .table-container td {
    padding: .5rem .55rem;
  }

  /* As in site.css: the headings are what make these tables wide, and
     "Obračunskih dana" set at .78rem/.1em costs more width than the numbers
     under it ever will. */
  .table-container thead th {
    font-size: .72rem;
    letter-spacing: .03em;
  }
}

/* ── CTA box ──────────────────────────────────────────────────────────────
   Was a grey slab with a coloured button. Now the site's .note treatment with
   a pill button. */
.cta-box {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--wash);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  text-align: left;
}

.cta-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: .8rem;
}

.cta-btn,
a.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .6rem;
  padding: .9rem 1.6rem;
  font-size: .95rem;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform .3s var(--ease);
}

.cta-btn:hover,
a.cta-btn:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--paper);
}

/* ── FAQ blocks ──────────────────────────────────────────────────────────── */
.faq-item {
  border-top: 1px solid var(--hairline);
  padding: 1.35rem 0;
  background: none;
  border-radius: 0;
}

.faq-container>.faq-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq-question {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.faq-answer {
  color: var(--muted);
  font-weight: 300;
}

/* ── Download / print buttons ────────────────────────────────────────────── */
.pdf-btn,
.download-btn,
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.6rem;
  font-size: .95rem;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease);
}

.pdf-btn:hover,
.download-btn:hover,
.print-btn:hover {
  transform: translateY(-2px);
}

/* ── Month sections (fond-sati 2027, BiH, UK) ───────────────────────────── */
.month-section {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.month-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 1.5rem 0 2.5rem;
}

.month-nav a {
  padding: .4rem .9rem;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: .88rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.month-nav a:hover {
  border-color: var(--ink);
  background: var(--wash);
}

.month-nav-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--muted);
  margin-right: .4rem;
}

/* ── Calculators ─────────────────────────────────────────────────────────── */
.calculator-container,
.calc-container {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.calculator-title {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: .6rem;
}

.calculator-container input,
.calculator-container select,
.calc-container input,
.calc-container select {
  font: inherit;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: .7rem .9rem;
}

.calculator-container input:focus-visible,
.calc-container input:focus-visible {
  border-color: var(--ink);
}

/* ── The custom cursor dot ────────────────────────────────────────────────
   A trailing dot that follows the pointer, present only on these older pages.
   Nothing else on the site has it, and a bespoke cursor is the single most
   obvious tell that a page belongs to a different design. */
.cursor-dot,
.cursor-outline {
  display: none !important;
}

/* Those same pages set `cursor: none` on body and [data-info], because the
   custom dot WAS the pointer. Hiding the dot without this leaves the visitor
   with no cursor at all — which is exactly what happened. */
body,
[data-info] {
  cursor: auto;
}

a,
button,
summary,
label,
[role="button"],
.cta-btn,
.pdf-btn,
.download-btn,
.print-btn,
.month-nav a {
  cursor: pointer;
}

/* ── The hover info card ─────────────────────────────────────────────────
   15 article pages show a fixed card on the left when you hover a [data-info]
   term. It sits at `left: 5vw` with a fixed 280px width, while the article
   column is centred at --container-max (820px). Those two are independent, so
   between 1400px — where the card stops being hidden — and roughly 1560px they
   collide: measured 22px of overlap on a 1440px screen, which is where this was
   reported from.

   Anchoring it to the content column instead of the viewport keeps a constant
   24px gap at every width, and the width shrinks rather than overlaps when
   space runs short. */
#info-sidebar {
  left: auto;
  right: calc(50% + (var(--container-max, 820px) / 2) + 24px);
  width: min(280px, calc(50vw - (var(--container-max, 820px) / 2) - 40px));
}

/* ── Breadcrumb inserted into these pages ────────────────────────────────── */
.crumbs {
  margin-bottom: 1.5rem;
}

/* The project case studies open with a full-bleed black hero, and the
   breadcrumb sits inside it. Inheriting the light-theme muted ink there gave
   black-on-black — measured at 1:1 contrast, i.e. entirely invisible. Inverted
   for that context only. */
.hero .crumbs,
.hero .crumbs a,
.hero .crumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.72);
}

.hero .crumbs a:hover {
  color: #ffffff;
}

.hero .crumbs li+li::before {
  color: rgba(255, 255, 255, 0.3);
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {

  .site-nav,
  .site-nav-spacer,
  .site-footer,
  .cta-box,
  .crumbs {
    display: none !important;
  }

  article {
    margin: 0 auto;
  }

  /* No viewport to break out of on paper — back into the text column. */
  .table-container {
    width: auto;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    transform: none;
  }
}