/* Εργαστήριο Τσιχλάκης — styles.css (all screens; desktop sizing is in large.css)
   Fonts: self-hosted Google Fonts subsets, greek + latin, plus a two-glyph
   arrow file for the mono labels. No external requests. */

@font-face { font-family: "Commissioner"; font-weight: 800; font-display: swap; src: url("/fonts/commissioner-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Commissioner"; font-weight: 800; font-display: swap; src: url("/fonts/commissioner-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 400 600; font-display: swap; src: url("/fonts/source-sans-3-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Source Sans 3"; font-weight: 400 600; font-display: swap; src: url("/fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrains-mono-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrains-mono-arrows.woff2") format("woff2"); unicode-range: U+2190, U+2192, U+2197; }

/* --- Tokens -------------------------------------------------------------- */

:root {
  --ground: #E7E8E1;
  --surface: #F3F3EE;
  --ink: #1C1F19;
  --ink-soft: #5A5F55;
  --line: #C9CCC0;
  --accent: #BC3B1A;   /* brief: #D6431E — darkened to pass WCAG AA text contrast (approved) */
  --accent-ink: #FFFFFF;
  --tech: #2A6A68;

  --font-display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #161814;
    --surface: #1E211B;
    --ink: #E7E8E1;
    --ink-soft: #9CA194;
    --line: #343830;
    --accent: #FF6337;
    --accent-ink: #17190F;
    --tech: #5FAEA9;
  }
}

:root[data-theme="dark"] {
  --ground: #161814;
  --surface: #1E211B;
  --ink: #E7E8E1;
  --ink-soft: #9CA194;
  --line: #343830;
  --accent: #FF6337;
  --accent-ink: #17190F;
  --tech: #5FAEA9;
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Header / main / footer column, so the footer sits at the bottom of short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Skip link: off-screen until a keyboard user tabs to it. */
.skip { position: absolute; top: 8px; left: 8px; z-index: 10; padding: 10px 14px; background: var(--accent); color: var(--accent-ink);
  font: 600 0.95rem/1 var(--font-body); text-decoration: none; transform: translateY(-150%); }
.skip:focus { transform: none; }
main:focus { outline: none; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap {
  box-sizing: content-box;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--surface); }

.btn--accent,
.btn--accent:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Header -------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--line); }

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  padding-block: 12px;
}

.wordmark {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  text-decoration: none;
  line-height: 1.2;
}

.wordmark__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.wordmark__place {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* Language + theme switches. */
.site-header__prefs {
  display: flex;
  gap: 2px;
}

.pref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-soft);
  font: 500 0.8rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
}

.pref:hover {
  border-color: var(--line);
  color: var(--ink);
}

.pref svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The theme switch needs JS; without it the OS setting decides. Visibility and
   the icon are pure CSS so nothing shifts when app.js finishes loading. */
html:not(.js) .theme-toggle { display: none; }

.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

/* Phones: wordmark + switches on the first row, the two buttons as a pair below. */
.site-header__actions {
  display: flex;
  flex-basis: 100%;
  gap: 8px;
}

.site-header__actions .btn { flex: 1; }

@media (min-width: 600px) {
  .site-header__actions { flex-basis: auto; }
  .site-header__actions .btn { flex: none; }
}

/* --- Doors --------------------------------------------------------------- */

.doors { padding-block: 28px 44px; }

.door-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 760px) {
  .door-grid { grid-template-columns: repeat(3, 1fr); }
}

.door-grid > li { display: flex; }

.door {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px 22px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.door:hover { background: var(--ground); }

.door:focus-visible {
  position: relative;
  z-index: 1;
}

.door__icon {
  flex: none;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--tech);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door__title { font-size: 1.5rem; letter-spacing: -0.01em; }

.door__sub { color: var(--ink-soft); }


/* --- Panels -------------------------------------------------------------- */

.panel {
  max-width: 600px;
  margin-inline: auto;
  padding-block: 20px 48px;
}

/* Without JS the panels follow the grid as ordinary sections. */
html:not(.js) .panel { border-top: 1px solid var(--line); }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-decoration: none;
}

.back:hover { color: var(--ink); }

.panel h1 {
  margin: 10px 0 18px;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 7vw, 2.75rem);
}

.panel h1:focus { outline: none; }


.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}


/* Readable measure for running text. */
.note, .subnote, .about p { max-width: 62ch; }

.note {
  margin: 20px 0 24px;
  color: var(--ink-soft);
}

/* --- Machines ------------------------------------------------------------- */

.machine { margin: 28px 0 0; border: 1px solid var(--line); background: var(--surface); }
/* A machine photo directly under the service it does. */
.list .machine { margin: 14px 0 4px; }
/* Four views of one machine, split by hairlines like the door grid. */
.machine__views { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.machine img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }

.machine figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font: 500 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tech);
}

/* White or near-white backdrops (studio photos, CAD renders) melt into the card in light mode. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.machine--on-white, .prints figure) img { mix-blend-mode: multiply; }
}
:root[data-theme="light"] :is(.machine--on-white, .prints figure) img { mix-blend-mode: multiply; }

/* Dark mode: take the glare off light studio backdrops. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.machine, .prints figure) img { filter: brightness(0.86); }
}
:root[data-theme="dark"] :is(.machine, .prints figure) img { filter: brightness(0.86); }

/* --- 3D panel: own prints + model sites ---------------------------------- */

.subhead { margin: 40px 0 8px; font-size: 1.35rem; }
.subnote { margin-bottom: 8px; color: var(--ink-soft); }

/* Hidden automatically if the list is ever emptied. */
.prints:not(:has(figure)) { display: none; }

.prints__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }

.prints figure { height: 100%; margin: 0; border: 1px solid var(--line); background: var(--surface); }
.prints img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.prints figcaption { padding: 8px 10px; font-size: 0.9rem; color: var(--ink-soft); }

.sites { margin: 0; padding: 0; list-style: none; }

.sites a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.sites__name { font-weight: 600; }
.sites a:hover .sites__name { text-decoration: underline; text-underline-offset: 3px; }
.sites__host { font-family: var(--font-mono); font-size: 0.8rem; color: var(--tech); }

/* --- About --------------------------------------------------------------- */

.about {
  width: calc(100% - 40px);
  max-width: 600px;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
}

.about::backdrop { background: color-mix(in srgb, var(--ground) 80%, transparent); }

.about h2 {
  margin-bottom: 14px;
  font-size: 1.5rem;
}

.about p + p { margin-top: 12px; }

.about form { margin-top: 22px; }

/* Without JS the dialog is a plain section at the end of the page. */
html:not(.js) .about {
  display: block;
  position: static;
  width: auto;
  margin: 0 auto;
  padding: 28px 0 48px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

html:not(.js) .about form { display: none; }

/* --- JS views ------------------------------------------------------------
   app.js runs in <head> and sets .js + data-view before first paint. Until it
   has wired up the page (.ready), these rules show only the pre-selected view,
   so a deep link like /3d never flashes the grid first. After that, the
   `hidden` property alone decides what is visible. */

.js:not(.ready) [data-panel],
.js:not(.ready):not([data-view="grid"]) #grid { display: none; }

.js:not(.ready)[data-view="agrotika"] [data-panel="agrotika"],
.js:not(.ready)[data-view="3d"] [data-panel="3d"],
.js:not(.ready)[data-view="web"] [data-panel="web"] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .door, .btn, .pref, .back, .sites a, .skip {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  }

  /* A small press, like a physical switch. */
  .btn:active, .pref:active, .back:active { transform: translateY(1px); }

  /* Views cascade in when navigated to: doors one after another, panel content top to bottom. */
  .navigated #grid:not([hidden]) .door-grid > li,
  .navigated [data-panel]:not([hidden]) > * { animation: view-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .navigated #grid:not([hidden]) .door-grid > li:nth-child(2),
  .navigated [data-panel]:not([hidden]) > :nth-child(2) { animation-delay: 0.04s; }
  .navigated #grid:not([hidden]) .door-grid > li:nth-child(3),
  .navigated [data-panel]:not([hidden]) > :nth-child(3) { animation-delay: 0.08s; }
  .navigated [data-panel]:not([hidden]) > :nth-child(n + 4) { animation-delay: 0.12s; }

  @keyframes view-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}