/* 
 * SMARLUNIA CUSTOM STYLES
 * This file contains all custom overrides and additions for Smarlunia
 * Place this AFTER all template CSS files to ensure overrides work
 */

/* ========================================
 * CUSTOM VARIABLES
 * ======================================== */
:root {
  --smarlunia-gold: #d4af37;
  --smarlunia-dark: #2c2c2c;
  --smarlunia-light: #f8f9fa;
}

/* ========================================
 * ULTRAWIDE SCREEN NAVIGATION FIX
 * ======================================== */
/* Fix navigation positioning for ultrawide screens to stay within centered content area */
@media only screen and (min-width: 1920px) {
  .page-content {
    max-width: 1920px !important;
    margin: 0 auto !important;
  }
  
  /* Constrain header positioning to centered content area */
  .header {
    /* Calculate position relative to centered content area */
    left: calc(50% - 960px + 16.66666667% + 2.5rem) !important;
    /* Explanation: 
     * 50% - 960px = left edge of centered 1920px content
     * + 16.66666667% = original column offset (2/12 columns)
     * + 2.5rem = original left margin
     */
  }
  
  /* Also constrain logo positioning for consistency */
  .logo {
    left: calc(50% - 960px + 5rem) !important;
    /* Explanation:
     * 50% - 960px = left edge of centered 1920px content
     * + 5rem = original desktop logo left margin
     */
  }
  
  /* And color switcher if it exists */
  .color {
    right: calc(50% - 960px + 5rem) !important;
    /* Explanation:
     * 50% - 960px = right edge calculation for centered content
     * + 5rem = original desktop color switcher right margin
     */
  }
} 

/* ========================================
 * HERO SECTION MOBILE FIXES
 * ======================================== */
/* Fix hero section spacing on smaller screens to prevent content being pushed off-screen */
.main {
  /* Reduce main section padding on small screens */
  padding-top: 4rem !important;
} 

@media only screen and (min-width: 576px) {
  .main {
    padding-top: 5rem !important;
  }
}

@media only screen and (min-width: 768px) {
  .main {
    padding-top: 6rem !important;
  }
}



/* Reduce headline top margin on smaller screens */
.headline {
  /* Much smaller margin on mobile to keep content visible */
  margin-top: 6rem !important;
  /* Prevent layout shifts by maintaining container size */
  contain: layout style; /* CSS containment for performance */
}

@media only screen and (min-width: 576px) {
  .headline {
    margin-top: 8rem !important;
  }
}

@media only screen and (min-width: 768px) {
  .headline {
    margin-top: 10rem !important;
  }
}

@media only screen and (min-width: 992px) {
  .headline {
    margin-top: 12rem !important;
  }
}

@media only screen and (min-width: 1200px) {
  .headline {
    /* Restore original positioning for desktop */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
  }
}

/* Ensure main intro section doesn't add excessive height on mobile */
.main__intro {
  /* Reduce bottom margin on smaller screens */
  margin-bottom: 2rem !important;
}

@media only screen and (min-width: 768px) {
  .main__intro {
    margin-bottom: 3rem !important;
  }
}

@media only screen and (min-width: 1200px) {
  .main__intro {
    /* Restore original full height behavior for desktop */
    height: 100vh !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================
 * LEGAL PAGE MAIN TITLES (Impressum & Datenschutzerklärung)
 * ======================================== */
.section-grid-title h2 {
  font-size: 5.5rem !important; /* Much smaller than the enormous default */
  font-weight: 600 !important;
  color: var(--smarlunia-dark) !important;
  margin-bottom: 2rem !important;
  line-height: 1.2 !important;
}

/* ========================================
 * LOGO BACKGROUND ANIMATION SYSTEM
 * ======================================== */

/* Slow rotation keyframes for outer ring */
@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Sun logo entrance animation - slide in from above */
@keyframes sunEntranceFromAbove {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Apply the entrance animation to the sun logo container */
.intro-bg-01__01 {
  /* Animation starts hidden and slides in from above */
  animation: sunEntranceFromAbove 1.5s ease-out 0.5s both;
  /* 
   * 1.5s duration - smooth and elegant
   * ease-out timing - starts fast, slows down for natural feel
   * 0.5s delay - allows page to load first
   * both - applies both from and to keyframe styles
   */
  opacity: 0; /* Start invisible until animation begins */
}

/* Add a subtle scale effect for extra visual impact */
@keyframes sunEntranceFromAboveWithScale {
  from {
    transform: translateY(-100vh) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0.8;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Alternative animation with more dramatic effect - uncomment to use */
/* 
.intro-bg-01__01 {
  animation: sunEntranceFromAboveWithScale 2s ease-out 0.5s both;
}
*/

/* ========================================
 * ABOUT SECTION BACKGROUND LOGO
 * ======================================== */
/* Add grayish transparent logo behind the "Über uns" text */
.about-descr {
  position: relative !important; /* Ensure positioning context for pseudo-element */
}
.about-logo-column {
  background-image: url('../img/smarlunialogo.svg');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
}


.about-descr::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px; /* Adjust size as needed */
  background-repeat: no-repeat;
  background-position: bottom right; /* Position in bottom right */
  background-size: contain; /* Scale to fit while maintaining aspect ratio */
  opacity: 0.08; /* Very subtle, grayish transparency */
  z-index: 0; /* Behind the text */
  pointer-events: none; /* Don't interfere with text selection */
  filter: grayscale(100%); /* Make it grayish */
}

/* Ensure text stays above the background logo */
.about-descr__text {
  position: relative !important;
  z-index: 1 !important;
}

/* Responsive adjustments for the background logo */
@media only screen and (max-width: 768px) {
  .about-descr::after {
    width: 200px; /* Smaller on mobile */
    opacity: 0.05; /* Even more subtle on mobile */
  }
}

@media only screen and (min-width: 1200px) {
  .about-descr::after {
    width: 350px; /* Larger on desktop */
  }
}

@media only screen and (min-width: 1400px) {
  .about-descr::after {
    width: 400px; /* Even larger on very wide screens */
  }
}

/* Position both logo parts absolutely within their container */
.logo-outer-ring,
.logo-inner-symbol {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Maintain aspect ratio */
}

/* Outer ring - rotating very slowly */
.logo-outer-ring {
  z-index: 1; /* Behind the inner symbol */
  animation: rotate-slow 120s linear infinite; /* Very slow 2-minute rotation */
}

/* Inner symbol - static and on top */
.logo-inner-symbol {
  z-index: 2; /* Above the outer ring */
  /* No animation - stays static */
}

/* ========================================
 * LEGAL CONTENT STYLING (Impressum & Datenschutz)
 * ======================================== */
.legal-content {
  font-size: 2rem !important; /* Much larger and more readable */
  line-height: 1.6 !important; /* Better readability */
  margin-bottom: 3.5rem !important; /* Good spacing between paragraphs */
  color: #444 !important; /* Darker, more readable text */
  font-weight: 400 !important; /* Normal weight */
}

.legal-content strong {
  font-weight: 600 !important; /* Medium weight for emphasis */
  color: var(--smarlunia-dark) !important;
}

.legal-content h4 {
  font-size: 1.5rem !important; /* Larger section headings */
  font-weight: 600 !important;
  color: var(--smarlunia-dark) !important;
  margin-top: 2.5rem !important; /* Good separation */
  margin-bottom: 1.2rem !important; /* Space before content */
  line-height: 1.3 !important;
}

.legal-content a {
  color: var(--smarlunia-gold) !important;
  text-decoration: underline !important;
  transition: color 0.3s ease !important;
}

.legal-content a:hover {
  color: #b8941f !important; /* Darker gold on hover */
}

/* Compact spacing for legal sections */
.legal-section {
  margin-bottom: 2rem !important; /* Good section spacing */
}

/* ========================================
 * CONTACT DATA ICONS (Enhanced Large Icons)
 * ======================================== */
.contact-data__item .ph-thin {
  color: var(--smarlunia-gold) !important;
  font-size: 4rem !important; /* Much larger icons */
  margin-top: 0 !important;
  margin-right: 20px !important; /* More space between icon and content */
  flex-shrink: 0 !important;
  line-height: 1 !important;
  width: 80px !important; /* Fixed width for consistent alignment */
  text-align: center !important;
  align-self: flex-start !important; /* Align icon to top */
}

.contact-data__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important; /* Remove gap, use margin instead for better control */
  margin-bottom: 40px !important; /* More space between sections */
}

.contact-data__item > div {
  flex: 1 !important; /* Take remaining space */
  min-width: 0 !important; /* Allow text to wrap properly */
}

.contact-data__item .contact-data__title {
  margin-bottom: 15px !important;
  margin-top: 0 !important; /* Ensure title is at top */
  font-size: 2.6rem !important; /* Much larger titles - prominent headers */
  color: var(--smarlunia-dark) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important; /* Better letter spacing */
}

.contact-data__item .contact-data__text {
  font-size: 1rem !important; /* Smaller content text to create hierarchy */
  line-height: 1.6 !important;
  margin-bottom: 8px !important; /* Space between text blocks */
  font-weight: 400 !important; /* Normal weight for content */
}

.contact-data__item .contact-data__text:last-child {
  margin-bottom: 0 !important; /* No margin on last text block */
}

/* Prevent unnecessary line breaks in addresses and contact info */
.contact-data__item a {
  white-space: nowrap !important; /* Prevent breaking of single lines */
  display: inline-block !important;
  font-size: 2rem !important;
}

.link-small-subpage {
  font-size: 2rem !important;
}
.subpage-title {
  font-size: 2.5rem !important;
  font-weight: 600 !important;
  color: var(--smarlunia-dark) !important;
  margin-top: 2.5rem !important; /* Good separation */
  margin-bottom: 1.2rem !important; /* Space before content */
  line-height: 1.3 !important;
}
/* Allow proper line breaks only where intended (br tags) */
.contact-data__item a br {
  white-space: normal !important;
}

/* Ensure Rechtliches section displays items vertically */
.contact-data__item:last-child .contact-data__text {
  display: block !important; /* Force vertical stacking */
  margin-bottom: 8px !important;
}

/* ========================================
 * QUOTE SECTION STYLING
 * ======================================== */
.smarlunia-quote {
  padding: 20px 20px 15px !important;
  margin-top: 20px !important;
}

.smarlunia-quote blockquote {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  margin: 0 0 20px 0 !important;
  color: var(--smarlunia-dark) !important;
  font-style: italic !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  z-index: 2 !important;
}

.smarlunia-quote-mark {
  font-size: 3rem !important;
  color: var(--smarlunia-gold) !important;
  opacity: 0.3 !important;
  line-height: 1 !important;
  font-family: serif !important;
}

.smarlunia-quote-line {
  width: 60px !important;
  height: 1px !important;
  background: var(--smarlunia-gold) !important;
  margin: 0 auto 12px !important;
  opacity: 0.6 !important;
}

.smarlunia-quote-author {
  font-size: 1rem !important;
  color: #666 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ========================================
 * FORCE OVERRIDES (Use sparingly)
 * ======================================== */

/* Fix any specific template conflicts here */
.contact-data__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* ========================================
 * UTILITY CLASSES
 * ======================================== */
.smarlunia-gold-text {
  color: var(--smarlunia-gold) !important;
}

.smarlunia-flex-icon {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

/* ========================================
 * TYPEWRITER EFFECT STYLING
 * ======================================== */

/* Ensure typewriter headline is visible and properly styled */
.typewriter-headline {
  /* Initially hidden to prevent flash */
  opacity: 0 !important;
  /* Preserve all existing responsive styling from main.css */
  /* Prevent layout shifts by setting fixed height */
  min-height: 4.2em !important; /* Ensure enough height for 3 lines + spacing */
  width: 100% !important;
  transition: opacity 0.3s ease !important;
}

/* Show the headline when typewriter is ready or fallback is needed */
.typewriter-headline.ready {
  opacity: 1 !important;
}



/* Custom typing cursor */
.typing-cursor {
  color: var(--t-bright) !important;
  font-weight: 300 !important;
  animation: cursor-blink 1s infinite !important;
  margin-left: 2px !important;
}

/* Custom cursor blink animation */
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Ensure proper line heights and spacing are maintained during typing */
.typewriter-headline br {
  display: block !important;
  content: "" !important;
  margin-bottom: 0 !important;
}

/* Ensure the Laozi span maintains its styling during typewriter effect */
.typewriter-headline span {
  font-size: 3rem !important;
  font-style: italic !important;
}

/* ========================================
 * RESPONSIVE OVERRIDES
 * ======================================== */
@media (max-width: 768px) {
  .contact-data__item .ph-thin {
    font-size: 3rem !important; /* Slightly smaller on mobile */
    width: 60px !important;
    margin-right: 15px !important;
  }
  
  
  .contact-data__item .contact-data__text {
    font-size: 0.95rem !important; /* Slightly smaller on mobile */
  }
  
  .smarlunia-quote blockquote {
    font-size: 1.2rem !important;
  }
  
  /* Allow text wrapping on mobile if needed */
  .contact-data__item a {
    white-space: normal !important;
  }
  
  /* Legal content responsive */
  .legal-content {
    font-size: 1rem !important; /* Still readable on mobile */
    line-height: 1.5 !important;
  }
  

  
  .section-grid-title h2 {
    font-size: 3.4rem !important; /* Much smaller on mobile */
  }
}


/* ========================================
 * END SMARLUNIA CUSTOM STYLES
 * ======================================== */