/* assets/css/site.css — design tokens and the handful of things Tailwind cannot express.
 *
 * Tailwind v4 owns layout and utilities (its @theme block lives in includes/head.php).
 * This file holds: the raw token values, focus rings, motion guards, .prose typography,
 * the skip link and print styles.
 *
 * PALETTE — every value below was measured, not guessed (blueprint §6).
 * The brand orange #F47629 is only 2.81:1 on white: it FAILS AA for text. It is therefore
 * a background/graphic colour here and never a text colour on a light surface.
 */

:root {
  /* Brand */
  --atp-brand:          #F47629;  /* background / fill only — never text on white */
  --atp-brand-ink:      #C2410C;  /* 5.18:1 on white — link text, focus ring, small icons */
  --atp-brand-on-dark:  #F47629;  /* 5.16:1 on --atp-ink — accent text on dark sections */

  /* Neutrals */
  --atp-ink:            #252936;  /* 14.50:1 on white — body text, dark section background */
  --atp-ink-muted:      #5A5F73;  /*  6.33:1 on white — secondary text */
  --atp-surface:        #FFFFFF;
  --atp-subtle:         #F6F6F8;  /* alternating sections */
  --atp-line:           #E2E3E9;  /* hairlines — non-text only */
  --atp-on-dark:        #E8E9ED;  /* 11.95:1 on --atp-ink */
  --atp-on-dark-muted:  #A8ACBA;  /*  6.40:1 on --atp-ink */

  /* Type */
  --atp-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                   "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --atp-wrap: 1200px;
  --atp-radius: 0.5rem;
}

/* Alpine renders its initial state after boot; hide cloaked nodes until then. */
[x-cloak] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;      /* sticky nav must not cover an anchor target */
}

body {
  font-family: var(--atp-font-sans);
  color: var(--atp-ink);
  background-color: var(--atp-surface);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------------------
 * Focus.
 * The ring is --atp-brand-ink (5.18:1 on white, 3.4:1 against the brand orange it may sit on)
 * plus a white outer halo, so it stays visible on light AND dark backgrounds.
 * ------------------------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--atp-brand-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* On dark sections the darkened orange loses contrast — use the light on-dark token there. */
.on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--atp-on-dark);
}

/* Never remove focus from keyboard users; only suppress the mouse-click ring. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------------------------
 * Skip link — off-screen until focused, then a solid navy chip in the top-left corner.
 * Styled with real colours (not display:none) so it is reachable and contrast-safe.
 * ------------------------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--atp-ink);
  color: var(--atp-on-dark);
  font-weight: 600;
  border-radius: 0 0 var(--atp-radius) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* main gets tabindex="-1" so the skip link can move focus without an outline flash */
#main:focus { outline: none; }

/* ---------------------------------------------------------------------------------------
 * Motion — animate only when the visitor has not asked us not to.
 * ------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .atp-transition { transition: color .15s ease, background-color .15s ease,
                                border-color .15s ease, box-shadow .15s ease,
                                transform .15s ease, opacity .15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * Touch targets — WCAG 2.5.5 (44x44 CSS px).
 *
 * A 16px-tall footer link is a comfortable click with a mouse and a coin-toss with a thumb.
 * These two utilities raise every tappable control to 44x44 on the layouts a finger uses —
 * anything narrower than the lg breakpoint (where the mobile drawer lives) plus any coarse
 * pointer at any width. A precise pointer on a wide screen keeps the compact desktop
 * spacing, so the design is unchanged exactly where the extra room buys nothing.
 *
 *   .atp-tap    for inline controls that should also grow horizontally (icon buttons, pills)
 *   .atp-tap-y  for controls that already lay themselves out (block/flex) and only need height
 * ------------------------------------------------------------------------------------ */
/* Below lg — the widths that render the mobile/tablet layout. Only here may .atp-tap touch
 * `display`, and even here `:not(.hidden)` keeps it from resurrecting an element Tailwind's
 * `hidden` utility removes. A control that is `hidden sm:inline-flex` must use .atp-tap-y. */
@media (max-width: 1023.98px) {
  .atp-tap:not(.hidden) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .atp-tap-y { min-height: 44px; }
}

/* A touch screen at desktop width still deserves big targets, but at this width the `lg:`
 * utilities decide what is on screen — setting `display` here made a touch laptop render the
 * hamburger next to the full desktop nav. So above lg the utilities change size only. */
@media (min-width: 1024px) and (pointer: coarse) {
  .atp-tap { min-height: 44px; min-width: 44px; }
  .atp-tap-y { min-height: 44px; }
}

/* Locks background scrolling while the mobile drawer is open. */
.atp-no-scroll { overflow: hidden; }

/* Header gains a hairline shadow once the page is scrolled (assets/js/site.js). */
.atp-header-scrolled { box-shadow: 0 1px 3px rgb(37 41 54 / 0.10); }

/* ---------------------------------------------------------------------------------------
 * .prose — long-form copy. Used by the legal, about and service pages.
 * Deliberately narrow: measure caps around 70 characters.
 * ------------------------------------------------------------------------------------ */
.prose { color: var(--atp-ink); max-width: 70ch; }
.prose p,
.prose ul,
.prose ol { margin-bottom: 1.15rem; line-height: 1.7; }
.prose h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; margin: 2rem 0 .75rem; }
.prose h3 { font-size: 1.2rem; line-height: 1.35; font-weight: 600; margin: 1.5rem 0 .5rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose strong { font-weight: 600; }
.prose a {
  color: var(--atp-brand-ink);          /* 5.18:1 — the brand orange itself would be 2.81:1 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--atp-ink); }
.prose blockquote {
  border-left: 3px solid var(--atp-brand);
  padding-left: 1rem;
  color: var(--atp-ink-muted);
  font-style: normal;
}

/* ---------------------------------------------------------------------------------------
 * .atp-bullets — the dotted lists on the legal pages.
 *
 * The dot used to be an empty <span aria-hidden="true"> with a background colour. It was
 * correct for screen readers but wrong twice over: an element that holds no text has no
 * business in the document, and every contrast checker measures it as text on orange
 * (the inherited --atp-ink-muted against --atp-brand = 2.25:1) and reports a failure that
 * cannot be fixed, because there is no text to recolour. Drawing it with ::before puts the
 * decoration where decoration belongs and leaves the markup as a plain <li>.
 * ------------------------------------------------------------------------------------ */
.atp-bullets > li {
  position: relative;
  padding-left: 1.25rem;
}
.atp-bullets > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--atp-brand);
}

/* Long Greek compound words must wrap rather than force a horizontal scrollbar at 375px. */
h1, h2, h3, h4, p, li, td, th { overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------------------
 * Brand logo slider (.atp-marquee) — home page «κορυφαίες μάρκες» section.
 *
 * Endless, smooth and cheap: ONE CSS transform animation on the track (runs on the
 * compositor, no JS loop, no layout work per frame). The track holds two identical lists;
 * moving it by exactly -50% brings copy 2 to where copy 1 started, so the loop restart is
 * invisible. For that the two halves must be pixel-identical in width: the spacing lives
 * INSIDE each item (padding), never as a flex `gap` between the two lists.
 *
 * Pauses on hover (mouse only — a tap would leave a sticky hover on touch screens) and via
 * the Pause/Play button (.is-paused, WCAG 2.2.2: moving content > 5 s must be pausable).
 * prefers-reduced-motion: no motion at all, copy 2 and the button disappear, and the ten
 * logos wrap as a static, centred grid.
 * ------------------------------------------------------------------------------------ */
.atp-marquee__viewport {
  overflow: hidden;
  /* soft edges instead of logos being sliced by the section edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.atp-marquee__track {
  display: flex;
  width: max-content;
  animation: atp-marquee var(--atp-marquee-duration, 50s) linear infinite;
  will-change: transform;
}
.atp-marquee__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.atp-marquee__item {
  flex: none;
  padding: 0.5rem;            /* = the gap between cards; inside the item, see above */
}
.atp-marquee__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 6rem;
  padding: 0 1.25rem;
}
.atp-marquee__card img {
  display: block;
  max-width: 100%;
  height: auto;               /* width comes from the inline style, ratio from the file */
}
@media (max-width: 639.98px) {
  .atp-marquee__card { width: 10rem; height: 5rem; padding: 0 1rem; }
  .atp-marquee { --atp-marquee-duration: 42s; }
}
@keyframes atp-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.atp-marquee.is-paused .atp-marquee__track { animation-play-state: paused; }
@media (hover: hover) {
  .atp-marquee__viewport:hover .atp-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .atp-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .atp-marquee__track { animation: none; width: auto; will-change: auto; }
  .atp-marquee__list { flex-wrap: wrap; justify-content: center; }
  .atp-marquee__list[aria-hidden="true"],
  .atp-marquee__toggle { display: none; }
}

/* ---------------------------------------------------------------------------------------
 * Print — drop chrome, keep the content and the contact details readable in black on white.
 * ------------------------------------------------------------------------------------ */
@media print {
  .skip-link,
  [data-testid="site-header"],
  [data-testid="site-footer"] nav,
  [data-print-hide],
  .atp-marquee__list[aria-hidden="true"],
  .atp-marquee__toggle { display: none !important; }
  .atp-marquee__track { animation: none !important; width: auto; }
  .atp-marquee__list { flex-wrap: wrap; justify-content: center; }
  .atp-marquee__viewport { -webkit-mask-image: none; mask-image: none; }

  body { color: #000; background: #fff; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
}