/*
Theme Name: Hello Child
Template: hello-elementor
Text Domain: hello-child
*/

/* =================================================
   00 – Global Typography Scale
================================================= */

html {
  font-size: 18px;
}

@media (max-width: 768px) {
  html { font-size: 80%; }
}

@media (max-width: 480px) {
  html { font-size: 70%; }
}

/* =================================================
   01 – Design Tokens
================================================= */

:root {
  /* Fonts */
  --font-body: adobe-garamond-pro, serif;
  --font-ui: urw-din, sans-serif;

  /* Day */
  --color-bg-day: #ffffff;
  --color-text-day: #7b8071;
  --color-text-muted-day: rgba(0,0,0,0.6);

  /* Night */
  --color-bg-night: #31332d;
  --color-text-night: #949987;
  --color-text-muted-night: rgba(255,255,255,0.6);
}
  /* Logo Day & Night */
:root {
  --logo-hover-day: rgba(0,0,0,0.65);
  --logo-hover-night: rgba(255,255,255,0.65);
}


/* =================================================
   02 – Active Color Mode
================================================= */
main {
  background-color: var(--bg-current);
  color: var(--text-current);
}

main,
main * {
  color: var(--text-current);
}

body.mode-day {
  --bg-current: var(--color-bg-day);
  --text-current: var(--color-text-day);
  --text-muted-current: var(--color-text-muted-day);
}

body.mode-night {
  --bg-current: var(--color-bg-night);
  --text-current: var(--color-text-night);
  --text-muted-current: var(--color-text-muted-night);
}

/* Default (Day) */
body {
  --bg-current: var(--color-bg-day);
  --text-current: var(--color-text-day);
  --text-muted-current: var(--color-text-muted-day);

  font-family: var(--font-body);
  line-height: 1.6;
  background-color: var(--bg-current);
  color: var(--text-current);
}

/* Logo Hover je nach Mode schalten */

body.mode-day .nav-toggle:hover {
  color: var(--logo-hover-day);
}

body.mode-night .nav-toggle:hover {
  color: var(--logo-hover-night);
}


/* =================================================
   03 – Global Consumption
================================================= */

body {
  background-color: var(--bg-current);
  color: var(--text-current);
}

body {
  --e-global-color-text: var(--text-current);
}

body {
  --e-global-color-secondary: var(--text-muted-current);
}


main {
  background-color: transparent;
  color: inherit;
}

.mode-toggle {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}


/* Links – global, inkl. Elementor */
a,
.elementor a {
  color: #e07453 !important;
}

a:hover,
.elementor a:hover {
  color: #ff6174 !important;
}




/* =================================================
   Header & Footer
================================================= */


header,
footer {
  background-color: var(--bg-current);
  color: var(--text-current);
}


/* ================================================
    Logo
===================================================*/
header svg,
header svg * ,
footer svg,
footer svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/*  Coif Header */

.logo-svg {
  width: auto;   
  height: 60px; /* Startwert */
  display: block;
    margin: 0 auto;
}

.logo-svg,
.logo-svg * {
  stroke: none !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/*  Coif & Logo Footer */

.logo-svg-footer {
  width: auto;   
  height:250px; /* Startwert */
  display: block;
}

.logo-svg-footer,
.logo-svg-footer * {
  stroke: none !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}


/* =================================================
   04 – Elementor Typography & Color Adapter
================================================= */

.elementor {
  --e-global-typography-text-font-family: var(--font-body);
  --e-global-typography-primary-font-family: var(--font-body);
}

.elementor {
  --e-global-color-text: var(--text-current);
  --e-global-color-secondary: var(--text-muted-current);
}

/* =================================================
   05 – Post Title
================================================= */

.elementor-heading-title {
  font-size: 3rem;
  line-height: 1.15;
}

@media (max-width: 768px) {
  .elementor-heading-title { font-size: 2.4rem; }
}

@media (max-width: 480px) {
  .elementor-heading-title { font-size: 2rem; }
}

.elementor-heading-title {
  color: var(--text-current);
}

.elementor-widget-theme-post-title .elementor-heading-title {
  color: var(--text-current) !important;
}


/* =================================================
   06 – Post Content
================================================= */
.elementor-location-single,
.elementor-location-single * {
  background-color: transparent;
}

.elementor-location-single {
  background-color: var(--bg-current);
}


.elementor-post-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.1em 0;
}

/* Lead */
.elementor-post-content p:first-of-type {
  font-size: 1.15em;
  line-height: 1.65;
  margin-bottom: 1.6em;
  opacity: 0.95;
}

/* Headings */
.elementor-post-content h2 {
  font-size: 1.35em;
  line-height: 1.3;
  margin: 2.2em 0 0.6em;
}

.elementor-post-content h3 {
  font-size: 1.15em;
  line-height: 1.35;
  margin: 1.8em 0 0.5em;
}

/* Lists */
.elementor-post-content ul,
.elementor-post-content ol {
  margin: 0 0 1.4em 1.2em;
  padding: 0;
}

.elementor-post-content li {
  margin-bottom: 0.4em;
}

/* Blockquotes */
.elementor-post-content blockquote {
  margin: 2em 0;
  padding-left: 1.2em;
  border-left: 2px solid currentColor;
  font-style: italic;
  opacity: 0.9;
}

/* Media */
.elementor-post-content figure {
  margin: 2em 0;
}

.elementor-post-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.elementor-post-content figcaption {
  font-size: 0.85em;
  opacity: 0.6;
  margin-top: 0.5em;
}

/* =================================================
   07 – Links (rudimentär)
================================================= */

.elementor-widget-theme-post-content a {
  color: var(--text-current);
}

.elementor-widget-theme-post-content a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* =================================================
   08 – Post Meta
================================================= */

.elementor-widget-post-info,
.elementor-widget-post-info * {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-muted-current);
}

.elementor-widget-post-info a {
  color: inherit;
  text-decoration: none;
}

/* =================================================
   09 – Icon Lists (SVG)
================================================= */

.elementor-icon-list-icon svg,
.elementor-icon-list-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =================================================
   Navi-Popup (modal)
================================================= */

/* Popup – immer Night */
.elementor-popup-modal,
.elementor-popup-modal .dialog-widget-content {
  background-color: var(--color-bg-night) !important;
  color: var(--color-text-night) !important;
}

.elementor-popup-modal * {
  background-color: transparent;
}

.dialog-widget-content {
  transition: background-color 0.2s ease, color 0.2s ease;
}


/* Popup Links – wie Night Typo */
.elementor-popup-modal a,
.elementor-popup-modal .elementor a {
  color: var(--color-text-night) !important;
  text-decoration: none;
}

/* Hover – wie globale Links */
.elementor-popup-modal a:hover,
.elementor-popup-modal .elementor a:hover {
  color: red !important;
}

/* =================================================
   Navigation Logo Trigger (clean)
================================================= */

.nav-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background: none !important;
  border: none !important;
  padding: 0;
  margin: 0;

  cursor: pointer;
  color: inherit;

  display: block;
  line-height: 0;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* kein Fokus-/Button-Styling */
.nav-toggle:focus,
.nav-toggle:focus-visible,
.nav-toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

/* SVG sauber */
.nav-toggle svg {
  display: block;
  background: none !important;
  transition: color 0.2s ease;
}

/* =================================================
   Hover – nur Logo, kein Button
================================================= */

body.mode-day .nav-toggle:hover svg {
  color: rgba(0,0,0,0.65);
}

body.mode-night .nav-toggle:hover svg {
  color: rgba(255,255,255,0.65);
}


/* Link-Farbe vom Logo fernhalten */
.nav-toggle,
.nav-toggle:hover,
.nav-toggle:active,
.nav-toggle:focus {
  color: inherit !important;
  text-decoration: none !important;
}


/* =================================================
   POPUP NAV – STABIL & KLICK-GESTEUERT
================================================= */

/* Grundtypografie */
.elementor-popup-modal .elementor-nav-menu,
.elementor-popup-modal .elementor-nav-menu a {
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
}

/* Submenu IMMER verborgen (Hover egal) */
.elementor-popup-modal
.elementor-nav-menu
.sub-menu {
  display: none;
  position: static;
  margin-top: 0.8em;
  padding: 0;
  background: none;
}

/* Submenu NUR bei aktivem State */
.elementor-popup-modal
.elementor-nav-menu
.menu-item-has-children.elementor-active > .sub-menu {
  display: block;
}


/* Submenu-Einträge */
.elementor-popup-modal .elementor-nav-menu .sub-menu li {
  position: relative;
  padding-top: 0.4em;
}

/* Linien */
.elementor-popup-modal .elementor-nav-menu .sub-menu li::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0 auto 0.35em;
  background-color: rgba(255,255,255,0.35);
}

/* Erste Linie länger */
.elementor-popup-modal
.elementor-nav-menu
.sub-menu li:first-child::before {
  width: 15rem;
}

/* Dreieck */
.elementor-popup-modal .elementor-nav-menu .sub-arrow {
  margin-left: 0.4em;
  transition: transform 0.2s ease;
}

/* Dreieck drehen bei offenem Submenu */
.elementor-popup-modal
.elementor-nav-menu
.menu-item-has-children.elementor-active > a .sub-arrow {
  transform: rotate(180deg);
}