/*
Theme Name: Thetaris
Theme URI: https://www.thetaris.de/
Author: Thetaris GmbH
Description: Blockthema für thetaris.de. Dunkles, technisches Layout auf Basis der
             Markenfarben Orange (#EE9A26) und Schiefer (#303639). Kein Build-Schritt,
             keine externen Abhängigkeiten, Schriften selbst gehostet.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
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: thetaris
Tags: full-site-editing, block-theme, one-page
*/

/* ============================================================
   Design language: technical document / blueprint.
   Orange is a MARKER (rules, numerals, ticks) — not a fill.
   Hairlines and numerals carry the structure; photos recede.
   ============================================================ */

:root {
  --t-hairline: #2A3034;
  --t-rule: 1px solid var(--t-hairline);
  --t-header-h: 78px;
  --t-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Ground texture: very fine grain so the dark never reads as flat ink --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wp-site-blocks { position: relative; z-index: 1; }

/* Anchor nav must not land under the sticky header. */
html { scroll-behavior: smooth; }
:target, [id] { scroll-margin-top: calc(var(--t-header-h) + 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

::selection { background: var(--wp--preset--color--accent); color: #14171A; }

/* Visible focus for keyboard users — the default is invisible on dark. */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible,
summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ============================================================
   Eyebrow label — mono, letterspaced, with a leading tick.
   The single most identity-carrying detail in the design.
   ============================================================ */
.t-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--klein);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.4rem;
}
.t-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  flex: none;
}

/* Section numerals: 01 / 02 ... set as a hairline-boxed monogram. */
.t-num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: .1em;
  color: var(--wp--preset--color--accent);
  border: var(--t-rule);
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
  padding: .3rem .55rem;
  line-height: 1;
}

/* ============================================================
   Sections
   ============================================================ */
.t-section { position: relative; border-top: var(--t-rule); }
.t-section--flush { border-top: 0; }


/* Light "paper" sections invert the type colours. */
.t-paper { background: var(--wp--preset--color--paper); color: #191D20; }
.t-paper h1, .t-paper h2, .t-paper h3, .t-paper h4 { color: #14171A; }
.t-paper .t-eyebrow { color: #A2661166; color: #A26611; }
.t-paper .t-card { background: #fff; border-color: #E2DACE; }
.t-paper .t-card:hover { border-color: var(--wp--preset--color--accent); }

/* ============================================================
   Cards — hairline boxes that light up an orange top rule on hover
   ============================================================ */
.t-card {
  position: relative;
  background: var(--wp--preset--color--surface);
  border: var(--t-rule);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  height: 100%;
  transition: border-color .35s var(--t-ease), transform .35s var(--t-ease);
}
.t-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 0; height: 2px;
  background: var(--wp--preset--color--accent);
  transition: width .45s var(--t-ease);
}
.t-card:hover { border-color: #3C444A; transform: translateY(-3px); }
.t-card:hover::before { width: calc(100% + 2px); }
.t-card h3, .t-card h4 { margin-top: 0; }

/* ============================================================
   Use-case entries — numbered ledger rows, not boxes
   ============================================================ */
.t-case { border-top: var(--t-rule); padding: clamp(2rem, 4vw, 3rem) 0; }
.t-case:last-child { border-bottom: var(--t-rule); }
.t-case__k {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7C878E;
}
.t-case__v { display: block; margin-top: .3rem; color: var(--wp--preset--color--paper); }

/* ============================================================
   Technology strip — marks sit in hairline cells, greyscale until hover
   ============================================================ */
.t-tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-left: var(--t-rule); border-top: var(--t-rule); }
.t-tech__i {
  border-right: var(--t-rule);
  border-bottom: var(--t-rule);
  padding: 1.75rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  text-align: center;
}
.t-tech__i img {
  /* Uniform plate regardless of each mark's aspect ratio: fixed box, logo
     contained inside it. Vendor marks are third-party trademarks and are shown
     unaltered in their own colours — no greyscale/invert filter, which would both
     hurt legibility and misrepresent the mark. */
  width: 136px;
  height: 64px;
  object-fit: contain;
  box-sizing: border-box;
  padding: 13px 18px;
  background: var(--wp--preset--color--paper);
  border-radius: 3px;
  transition: transform .35s var(--t-ease), box-shadow .35s var(--t-ease);
}
.t-tech__i:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.t-tech__n { font-size: var(--wp--preset--font-size--klein); color: #99A3A9; }
.t-tech__r {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--klein); letter-spacing: .12em; text-transform: uppercase; color: #6E787E;
}

/* ============================================================
   Accordion (Warum Thetaris) — native <details>, no JS
   ============================================================ */
.t-acc { border-top: var(--t-rule); }
.t-acc:last-of-type { border-bottom: var(--t-rule); }
.t-acc summary {
  cursor: pointer; list-style: none;
  padding: 1.5rem 0; display: flex; align-items: center; gap: 1.25rem;
  font-size: var(--wp--preset--font-size--text); font-weight: 600; letter-spacing: -.02em;
  transition: color .25s var(--t-ease);
}
.t-acc summary::-webkit-details-marker { display: none; }
.t-acc summary:hover { color: var(--wp--preset--color--accent); }
.t-acc__sign { margin-left: auto; position: relative; width: 15px; height: 15px; flex: none; }
.t-acc__sign::before, .t-acc__sign::after {
  content: ""; position: absolute; background: var(--wp--preset--color--accent);
  transition: transform .3s var(--t-ease), opacity .3s var(--t-ease);
}
.t-acc__sign::before { top: 7px; left: 0; width: 15px; height: 1px; }
.t-acc__sign::after  { left: 7px; top: 0; width: 1px; height: 15px; }
.t-acc[open] .t-acc__sign::after { transform: rotate(90deg); opacity: 0; }
.t-acc__body { padding: 0 0 1.75rem; max-width: 62ch; color: #B9C1C6; }

/* ============================================================
   Click-to-load ("Zwei-Klick") shell for third-party embeds.
   Nothing is requested from Calendly until the visitor opts in —
   which is what removes the need for a cookie banner entirely.
   ============================================================ */
.t-embed { border: var(--t-rule); background: var(--wp--preset--color--surface); }
.t-embed__ph { padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.t-embed__ph h3 { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--gross); }
.t-embed__ph p { margin: 0 auto 1.75rem; max-width: 54ch; color: #9BA5AB; font-size: var(--wp--preset--font-size--text); }
.t-embed__btn {
  font-family: inherit; font-size: var(--wp--preset--font-size--klein); font-weight: 600; cursor: pointer;
  background: var(--wp--preset--color--accent); color: #14171A;
  border: 0; border-radius: 2px; padding: .9rem 1.7rem;
  transition: background .25s var(--t-ease);
}
.t-embed__btn:hover { background: var(--wp--preset--color--peach); }
.t-embed__note { display: block; margin-top: 1rem; font-size: var(--wp--preset--font-size--klein); color: #6E787E; }
.t-embed iframe { display: block; width: 100%; border: 0; }

/* ============================================================
   Header / navigation
   ============================================================ */
.wp-block-template-part.t-header-wrap { position: sticky; top: 0; z-index: 100; }
.t-header {
  background: rgba(20, 23, 26, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: var(--t-rule);
  min-height: var(--t-header-h);
}
.t-header .wp-block-site-logo img { height: 34px; width: auto; }
.t-header .wp-block-navigation {
  font-size: var(--wp--preset--font-size--klein);
  --wp--style--block-gap: 1.9rem;
}
.t-header .wp-block-navigation a { color: var(--wp--preset--color--paper); text-decoration: none; position: relative; padding-bottom: 3px; }
.t-header .wp-block-navigation a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--wp--preset--color--accent); transition: width .3s var(--t-ease);
}
.t-header .wp-block-navigation a:hover::after,
.t-header .wp-block-navigation .current-menu-item a::after { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ground) !important; }

/* ============================================================
   Footer
   ============================================================ */
.t-footer { border-top: var(--t-rule); }
.t-footer h4 {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--klein); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); margin: 0 0 1rem;
}
.t-footer p, .t-footer li { font-size: var(--wp--preset--font-size--klein); color: #9BA5AB; line-height: 1.85; }
.t-footer a { color: #9BA5AB; text-decoration: none; }
.t-footer a:hover { color: var(--wp--preset--color--accent); }
.t-footer__legal { border-top: var(--t-rule); font-size: var(--wp--preset--font-size--klein); color: #6E787E; }

/* ============================================================
   Load-in: one orchestrated reveal, not scattered micro-motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .t-rise { opacity: 0; transform: translateY(18px); animation: t-rise .9s var(--t-ease) forwards; }
  .t-rise--1 { animation-delay: .05s } .t-rise--2 { animation-delay: .16s }
  .t-rise--3 { animation-delay: .27s } .t-rise--4 { animation-delay: .38s }
  @keyframes t-rise { to { opacity: 1; transform: none; } }
}

/* Utility */
.t-measure { max-width: 62ch; }
.t-hairline-top { border-top: var(--t-rule); }
.t-mono { font-family: var(--wp--preset--font-family--mono); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ============================================================
   Type system: exactly two families, three sizes, two weights.
     Poppins        300 / 600   — text and headings
     IBM Plex Mono  400 / 500   — labels, numerals, eyebrows
     klein / text / gross
   Lead paragraphs are NOT a fourth size: they sit at body size and
   are distinguished by colour and leading alone.
   ============================================================ */
.t-lead {
  color: var(--wp--preset--color--peach);
  line-height: 1.62;
}
.t-paper .t-lead { color: #4A5257; }

/* h3/h4 are body-size bold. Letterspacing pulls them back in slightly so
   they read as headings rather than emphasised sentences. */
h3, h4, .t-card h3, .t-card h4 { letter-spacing: -.01em; }

/* ============================================================
   Split sections — text beside the photo, never on top of it.
   Text over photography was hard to read no matter how far the
   image was knocked back, so the photo gets its own column.
   Stacks to one column below 782px (WordPress's columns breakpoint),
   text first, because the heading should lead on a phone.
   ============================================================ */
.t-split { align-items: center; }
.t-split .wp-block-column { min-width: 0; }

.t-split__img { margin: 0; }
.t-split__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--t-rule);
  border-radius: 2px;
}

/* Photo on the left on wide screens. Achieved by reversing the row rather than
   reordering the markup, so the stacked mobile view still shows text first. */
@media (min-width: 782px) {
  .t-split--media-left { flex-direction: row-reverse; }
}

/* Tighter case rows when they sit in a narrower split column. */
.t-case--compact { padding: 1.05rem 0; }
.t-case--compact + .t-case--compact { border-top: var(--t-rule); }
.t-case--compact:last-of-type { border-bottom: var(--t-rule); }

/* ============================================================
   Sprachumschalter — mono, wie die Eyebrow-Labels, damit er als
   Werkzeug und nicht als Navigationspunkt gelesen wird.
   ============================================================ */
.t-header__right { gap: 1.9rem; align-items: center; }

.t-langswitch {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--klein);
  font-weight: 500;
  letter-spacing: .1em;
  color: #99A3A9;
  text-decoration: none;
  border: var(--t-rule);
  border-radius: 2px;
  padding: .3rem .6rem;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s var(--t-ease), border-color .25s var(--t-ease);
}
.t-langswitch:hover {
  color: var(--wp--preset--color--accent);
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}
@media (max-width: 600px) {
  .t-header__right { gap: 1rem; }
}

/* Der Shortcode-Block wickelt den Umschalter in ein <p>. */
.t-header__right > p { margin: 0; display: flex; }