/**
 * Haken Dran – Theme components
 *
 * Loaded on the frontend AND inside the block editor (enqueue_block_assets),
 * so the editor shows exactly what visitors see. Colours, type and spacing
 * come from theme.json; this file only covers what theme.json can't express.
 *
 * @package HakenDran
 */

/* ============================================================
   TOKENS
   --hd-haken / --hd-haken-size are overridden inline from the theme
   settings (versioned URL, pattern size, pattern off).
   ============================================================ */
:root {
  --hd-gradient: linear-gradient(135deg, #135882 0%, #135882 25%, #0f738b 50%, #0a9d97 75%, #06c89e 100%);
  --hd-haken: none;
  --hd-haken-size: 110px;

  --hd-glass-bg: rgba(255, 255, 255, 0.06);
  --hd-glass-bg-hover: rgba(255, 255, 255, 0.1);
  --hd-glass-border: rgba(255, 255, 255, 0.12);
  --hd-glass-border-hover: rgba(255, 255, 255, 0.3);
  --hd-shadow: 0 8px 30px rgba(9, 30, 46, 0.25);
  --hd-radius: 20px;
  --hd-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Retired presets – kept so content saved with older versions still renders. */
  --wp--preset--gradient--hd-hero: var(--hd-gradient);
  --wp--preset--gradient--hd-card: linear-gradient(145deg, rgba(13, 59, 94, 0.6), rgba(10, 148, 147, 0.3));
  --wp--preset--color--green-outline: #06d6a0;
  --wp--preset--color--glass-bg: rgba(13, 59, 94, 0.5);
}

.has-hd-hero-gradient-background { background: var(--hd-gradient) !important; }
.has-hd-card-gradient-background { background: var(--wp--preset--gradient--hd-card) !important; }
.has-green-outline-color { color: #06d6a0 !important; }
.has-green-outline-background-color { background-color: #06d6a0 !important; }

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection {
  background: var(--wp--preset--color--mint);
  color: var(--wp--preset--color--dark);
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--bright-teal);
  outline-offset: 3px;
}

a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

img { height: auto; }

/* Sticky footer: header, main and footer stack in a full-height column. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-bar .wp-site-blocks {
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.wp-site-blocks > .hd-hero {
  flex: 1 0 auto;
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

.wp-site-blocks > footer {
  margin-top: auto;
}

/* Landing pages: full-width sections sit flush against each other. */
.hd-landing .wp-block-post-content > .alignfull {
  margin-block: 0;
}

/* ============================================================
   BRAND SURFACE
   Gradient + checkmark pattern. The pattern is tinted in the
   gradient's own blue, so it vanishes on the blue quarter and only
   shows where the gradient turns green.
   ============================================================ */
.hd-hero,
.hd-brand-section,
.is-style-hd-gradient-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hd-gradient);
  color: var(--wp--preset--color--white);
}

.hd-hero::after,
.hd-brand-section::after,
.is-style-hd-gradient-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hd-haken) 0 0 / var(--hd-haken-size) repeat;
}

.is-style-hd-gradient-bg:not(.alignfull):not(.alignwide) {
  border-radius: var(--hd-radius);
}

/* Default inner spacing only when the block has none of its own. */
.is-style-hd-gradient-bg:not([style*="padding"]) {
  padding: var(--wp--preset--spacing--50);
}

/* Cover blocks with the brand gradient (class added on render). */
.hd-cover-haken::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--hd-haken) 0 0 / var(--hd-haken-size) repeat;
}

.hd-cover-haken .wp-block-cover__inner-container {
  z-index: 2;
}

/* Whole page on the brand surface (setting, page option or Linkliste). */
body.hd-gradient-bg,
.editor-styles-wrapper.hd-gradient-bg {
  background: var(--hd-gradient) fixed;
}

body.hd-gradient-bg::before,
.editor-styles-wrapper.hd-gradient-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--hd-haken) 0 0 / var(--hd-haken-size) repeat;
}

body.hd-gradient-bg .wp-site-blocks,
.editor-styles-wrapper.hd-gradient-bg > * {
  position: relative;
  z-index: 1;
}

/* Nested brand surfaces on a brand page: no second gradient layer. */
body.hd-gradient-bg .hd-hero {
  background: transparent;
}

body.hd-gradient-bg .hd-hero::after {
  display: none;
}

/* Readability on the brand surface: links white, muted text lighter. */
:where(body.hd-gradient-bg, .hd-hero, .hd-brand-section, .is-style-hd-gradient-bg) :where(p, li) a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--white);
}

:where(body.hd-gradient-bg, .hd-hero, .hd-brand-section, .is-style-hd-gradient-bg) .has-mid-gray-color {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}

.hd-header {
  background: rgba(9, 30, 46, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.hd-gradient-bg .hd-header {
  background: rgba(9, 30, 46, 0.28);
}

.hd-header .wp-block-site-logo img {
  border-radius: 10px;
}

/* Minimal header scrolls with the page. */
.wp-site-blocks > header.wp-block-template-part:has(.hd-header--minimal) {
  position: static;
}

.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--dark) !important;
  color: var(--wp--preset--color--white) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.hd-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.hd-gradient-bg .hd-footer {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.hd-footer--minimal,
body.hd-gradient-bg .hd-footer--minimal {
  border-top: none;
}

.hd-site-meta {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--mid-gray);
}

body.hd-gradient-bg .hd-site-meta { color: rgba(255, 255, 255, 0.82); }

.hd-site-meta a {
  color: inherit;
  text-decoration: none;
}

.hd-site-meta a:hover,
.hd-site-meta a:focus-visible {
  color: var(--wp--preset--color--white);
  text-decoration: underline;
}

.hd-site-meta__sep {
  opacity: 0.5;
  margin: 0 0.5em;
}

.wp-block-social-links .wp-social-link {
  transition: transform 150ms var(--hd-ease), color 150ms var(--hd-ease);
}

.wp-block-social-links .wp-social-link:hover {
  transform: translateY(-2px);
}

/* ============================================================
   GLASS CARD
   ============================================================ */
.hd-card,
.is-style-hd-glass-card {
  position: relative;
  background: var(--hd-glass-bg);
  border: 1px solid var(--hd-glass-border);
  border-radius: var(--hd-radius);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 300ms var(--hd-ease), border-color 300ms var(--hd-ease), background-color 300ms var(--hd-ease);
}

.is-style-hd-glass-card:not([style*="padding"]) {
  padding: var(--wp--preset--spacing--40);
}

/* On the bright gradient a darker glass reads cleaner. */
:where(body.hd-gradient-bg, .hd-hero, .hd-brand-section, .is-style-hd-gradient-bg) :is(.hd-card, .is-style-hd-glass-card) {
  --hd-glass-bg: rgba(9, 30, 46, 0.34);
  --hd-glass-bg-hover: rgba(9, 30, 46, 0.5);
  --hd-glass-border: rgba(255, 255, 255, 0.16);
}

/* Cards that contain a link (post grids) lift on hover. */
.hd-card:has(a):hover,
.is-style-hd-glass-card:has(.wp-block-post-title a):hover {
  transform: translateY(-4px);
  border-color: var(--hd-glass-border-hover);
}

.hd-card .wp-block-post-featured-image,
.is-style-hd-glass-card .wp-block-post-featured-image {
  margin: 0;
}

.hd-card .wp-block-post-featured-image img,
.is-style-hd-glass-card .wp-block-post-featured-image img {
  border-radius: calc(var(--hd-radius) - 1px) calc(var(--hd-radius) - 1px) 0 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   BLOCK STYLES
   ============================================================ */
.wp-block-button.is-style-hd-white .wp-block-button__link {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ocean);
}

.wp-block-button.is-style-hd-white .wp-block-button__link:hover,
.wp-block-button.is-style-hd-white .wp-block-button__link:focus {
  background: rgba(255, 255, 255, 0.88);
  color: var(--wp--preset--color--ocean);
}

.wp-block-button.is-style-hd-ghost .wp-block-button__link {
  background: rgba(255, 255, 255, 0.08);
  color: var(--wp--preset--color--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.wp-block-button.is-style-hd-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-hd-ghost .wp-block-button__link:focus {
  background: rgba(255, 255, 255, 0.18);
  color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-hd-magenta .wp-block-button__link {
  background: var(--wp--preset--color--magenta);
  color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-hd-magenta .wp-block-button__link:hover,
.wp-block-button.is-style-hd-magenta .wp-block-button__link:focus {
  background: #e00062;
  color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 2px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.wp-block-image.is-style-hd-glow img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 50px rgba(6, 200, 158, 0.3);
}

.wp-block-separator.is-style-hd-gradient {
  border: none;
  height: 3px;
  background: var(--wp--preset--gradient--hd-accent);
  opacity: 1;
}

.wp-block-separator:not(.is-style-hd-gradient):not(.has-background) {
  border-color: currentColor;
}

/* Paragraph "Einleitung": a calm, slightly larger lead text. */
p.is-style-hd-intro {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* Core quote style "Schlicht": also drop the theme's bar and italics –
   size, style and spacing stay adjustable in the block sidebar. */
.wp-block-quote.is-style-plain {
  border: none;
  padding-left: 0;
  padding-right: 0;
  font-style: normal;
}

/* ============================================================
   CONTENT DETAILS
   ============================================================ */
.wp-block-quote cite,
.wp-block-pullquote cite {
  display: block;
  margin-top: 0.5em;
}

.wp-block-table table {
  border-collapse: collapse;
}

.wp-block-table :is(th, td) {
  border-color: rgba(255, 255, 255, 0.15);
}

.wp-block-table thead {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* Forms (search, comments) on the dark surface */
:where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--wp--preset--color--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 0.7em 0.9em;
  font: inherit;
}

:where(input, textarea)::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.wp-block-search__input {
  border-radius: 999px;
  padding-left: 1.1em;
}

.wp-block-search__button {
  margin-left: 0.5rem;
}

.wp-block-search .wp-block-search__inside-wrapper {
  border: none;
  padding: 0;
}

.wp-block-comments .wp-block-avatar img {
  border-radius: 50%;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  text-decoration: none;
  padding: 0.3em 0.6em;
  border-radius: 8px;
}

.wp-block-query-pagination .page-numbers.current {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes hd-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hd-ripple {
  to { transform: scale(2.5); opacity: 0; }
}

.hd-animate--fade-up {
  animation: hd-fade-in-up 0.6s var(--hd-ease) both;
}

.hd-delay-1 { animation-delay: 60ms; }
.hd-delay-2 { animation-delay: 120ms; }
.hd-delay-3 { animation-delay: 180ms; }
.hd-delay-4 { animation-delay: 240ms; }
.hd-delay-5 { animation-delay: 300ms; }

/* The editor never animates – blocks must be visible while editing. */
.editor-styles-wrapper .hd-animate--fade-up {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body, body.hd-gradient-bg { background: #fff !important; color: #000 !important; }
  body.hd-gradient-bg::before, .hd-hero::after, .hd-brand-section::after, .is-style-hd-gradient-bg::after { display: none; }
  .wp-site-blocks > header.wp-block-template-part { position: static; }
}

/* Brand logo image (patterns): no rounding, a soft lift on the gradient. */
.hd-logo img {
  border-radius: 0;
  filter: drop-shadow(0 6px 24px rgba(9, 30, 46, 0.25));
}

/* Editor preview of the Apple Podcasts social icon (the frontend swaps the SVG on render). */
.editor-styles-wrapper .hd-social-apple {
  position: relative;
}

.editor-styles-wrapper .hd-social-apple svg {
  visibility: hidden;
}

.editor-styles-wrapper .hd-social-apple::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E") center / 1em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E") center / 1em no-repeat;
}