/**
 * Sternschnuppe Custom CSS
 * 
 * Kritische Styles für das Sternschnuppe Theme
 * Diese Datei überschreibt Magento-Standard-Styles
 */

/* ============================================
   PAGE HEADER - DUNKELBLAU WIE ORIGINAL
   ============================================ */

.page-header {
    background: #003060 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.page-header .header.content {
    background: transparent !important;
    padding: 15px 20px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.header-top-bar {
    background: #003060 !important;
    padding: 10px 15px !important;
}

/* Claim Text im blauen Header - weiß */
.header-claim-text {
    color: #ffffff !important;
}

/* ============================================
   LOGO
   ============================================ */

.logo img {
    max-height: 60px !important;
    width: auto !important;
}

@media (min-width: 768px) {
    .logo img {
        max-height: 75px !important;
    }
}

/* ============================================
   NAVIGATION - ORANGER BALKEN WIE ORIGINAL
   ============================================ */

/* Toggle Nav Button komplett ausblenden */
html body .nav-toggle,
html body .action.nav-toggle {
    display: none !important;
    visibility: hidden !important;
}

/* Navigation Container - IMMER sichtbar mit oranger Farbe */
html body .nav-sections,
html body .sections.nav-sections {
    display: block !important;
    visibility: visible !important;
    background: #e67e22 !important;
    border: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    opacity: 1 !important;
    position: relative !important;
    max-height: none !important;
    overflow: visible !important;
}

html body .nav-sections-item-content,
html body .nav-sections .section-item-content {
    display: block !important;
    visibility: visible !important;
    background: #e67e22 !important;
    padding: 0 !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html body .nav-sections-item-title {
    display: none !important;
}

html body .nav-sections-items,
html body .nav-sections .section-items {
    display: block !important;
    visibility: visible !important;
    background: #e67e22 !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
}

html body .navigation {
    display: block !important;
    visibility: visible !important;
    background: #e67e22 !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    opacity: 1 !important;
}

/* Navigation Liste - horizontal, ohne Bullets */
html body .navigation > ul,
html body .navigation ul,
html body .navigation ol,
html body .navigation menu,
html body .navigation [role="menu"] {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .navigation > ul > li,
html body .navigation .level0,
html body .navigation li,
html body .navigation [role="listitem"],
html body .navigation [role="menuitem"] {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Alle ::marker und ::before Bullets entfernen */
html body .navigation li::marker,
html body .navigation li::before,
html body .navigation [role="listitem"]::marker,
html body .navigation [role="listitem"]::before {
    content: none !important;
    display: none !important;
}

/* Navigation Links - weiß auf orange */
html body .navigation .level0 > a,
html body .navigation .level0 > .level-top,
html body .navigation a,
html body .navigation [role="menuitem"] {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #ffffff !important;
    text-transform: none !important;
    padding: 12px 18px !important;
    line-height: 1.4 !important;
    display: block !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.navigation .level0 > a:hover,
.navigation .level0 > .level-top:hover,
.navigation .level0.active > a,
.navigation .level0.active > .level-top {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

/* Dropdown-Menü */
.navigation .level0 .submenu {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    margin-top: 0 !important;
    list-style: none !important;
}

.navigation .level0 .submenu li {
    list-style: none !important;
}

.navigation .level0 .submenu a {
    color: #333 !important;
    font-family: 'Open Sans', sans-serif !important;
    padding: 10px 20px !important;
}

.navigation .level0 .submenu a:hover {
    background: #f5f5f5 !important;
    color: #e67e22 !important;
}

/* ============================================
   NAVIGATION - Tabs komplett ausblenden (Desktop + Mobile)
   Muss JS-Änderungen überschreiben!
   ============================================ */

/* Tablist, Tabs und Toggle komplett ausblenden - NICHT die Navigation selbst! */
html body .nav-sections [role="tablist"],
html body .nav-sections [role="tab"],
html body .nav-sections-item-title,
html body .section-item-title,
html body .nav-sections .section-item-title,
html body .nav-toggle,
html body .action.nav-toggle,
html body .nav-sections .section-items > .section-item-title {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -99999px !important;
    clip: rect(0,0,0,0) !important;
}

/* WICHTIG: Navigation-Elemente NICHT mit clip/position verstecken */
html body .nav-sections .navigation,
html body .nav-sections .navigation ul,
html body .nav-sections .navigation li,
html body .nav-sections .navigation a,
html body .nav-sections [role="tabpanel"],
html body .nav-sections [role="menu"],
html body .nav-sections [role="listitem"],
html body .nav-sections [role="menuitem"] {
    position: static !important;
    left: auto !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Tabpanel/Navigation Content immer sichtbar - überschreibt JS */
html body .nav-sections [role="tabpanel"],
html body .nav-sections-item-content,
html body .section-item-content,
html body .nav-sections .section-item-content,
html body .nav-sections .section-items > .section-item-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Navigation kompakt - nur die Höhe des Textes */
html body .sections.nav-sections,
html body .nav-sections {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html body .nav-sections-items {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Section-items direkt anzeigen ohne Tabs */
html body .sections.nav-sections .section-items {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

html body .sections.nav-sections .section-item-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Navigation selbst immer sichtbar */
html body .navigation,
html body .nav-sections .navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

html body .navigation > ul,
html body .navigation ul[role="menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    width: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* Navigations-Items und Links sichtbar machen */
html body .navigation ul li,
html body .navigation ul[role="menu"] > li,
html body .navigation ul[role="menu"] [role="listitem"],
html body .navigation .level0 {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .navigation ul li a,
html body .navigation ul[role="menu"] a,
html body .navigation [role="menuitem"],
html body .navigation .level-top,
html body .navigation .level0 > a {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 12px 18px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/* Desktop Navigation - Überschreibt Magento Media Queries */
@media (min-width: 768px) {
    html body .nav-sections {
        display: block !important;
        visibility: visible !important;
        background: #e67e22 !important;
    }
    
    html body .nav-sections-item-content {
        display: block !important;
        visibility: visible !important;
    }
    
    html body .navigation {
        display: block !important;
        visibility: visible !important;
        background: #e67e22 !important;
    }
    
    html body .navigation > ul {
        display: flex !important;
        visibility: visible !important;
        position: static !important;
    }
    
    html body .navigation .level0 {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    html body .navigation .level0 > a,
    html body .navigation .level-top {
        display: block !important;
        visibility: visible !important;
        color: #fff !important;
        padding: 12px 18px !important;
    }
}

/* Header Icons im orangen Balken rechts */
.nav-sections .header.links {
    background: transparent !important;
}

.nav-sections .header.links a {
    color: #ffffff !important;
}

/* ============================================
   HEADER ICONS - IM BLAUEN BEREICH WEISS
   ============================================ */

/* Icons im Header (blauer Bereich) */
.page-header .minicart-wrapper .action.showcart,
.page-header .block-search .label,
.page-header .header.links a,
.page-header .authorization-link a {
    color: #ffffff !important;
}

.page-header .minicart-wrapper .action.showcart:hover,
.page-header .block-search .label:hover,
.page-header .header.links a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.page-header .minicart-wrapper .counter.qty {
    background: #e67e22 !important;
    color: #fff !important;
    border-radius: 50% !important;
}

/* Suche im Header */
.page-header .block-search .control input {
    background: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
}

.page-header .block-search .action.search {
    background: transparent !important;
    color: #003060 !important;
}

/* ============================================
   HERO SECTION
   ============================================ */

.sternschnuppe-hero {
    width: 100%;
    margin-bottom: 0;
}

.hero-image-container {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Grüner Slogan Banner */
.hero-slogan-banner {
    background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%) !important;
    padding: 20px 15px !important;
    text-align: center !important;
}

.hero-slogan-text {
    font-family: 'Grandstander', 'Comic Sans MS', cursive, sans-serif !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

@media (min-width: 768px) {
    .hero-slogan-banner {
        padding: 25px 30px !important;
    }
    
    .hero-slogan-text {
        font-size: 24px !important;
    }
}

@media (min-width: 1024px) {
    .hero-slogan-banner {
        padding: 30px 40px !important;
    }
    
    .hero-slogan-text {
        font-size: 28px !important;
    }
}

/* Welcome Section */
.hero-welcome-section {
    background: #ffffff !important;
    padding: 30px 20px !important;
}

.hero-welcome-content {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* ============================================
   BUTTONS - ORANGE
   ============================================ */

.action.primary,
button.action.primary {
    background-color: #e67e22 !important;
    border: 2px solid #e67e22 !important;
    border-radius: 25px !important;
    color: #fff !important;
    font-family: 'Grandstander', cursive, sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
}

.action.primary:hover,
button.action.primary:hover {
    background-color: #d35400 !important;
    border-color: #d35400 !important;
}

/* ============================================
   FOOTER - DUNKELBLAU
   ============================================ */

.page-footer {
    background-color: #003060 !important;
    margin-top: 0 !important;
}

.footer.content {
    background-color: #003060 !important;
    border-top: none !important;
    color: #fff !important;
}

.footer-custom {
    background-color: #003060 !important;
    color: #ffffff !important;
    padding: 40px 20px 20px !important;
}

.footer-custom h4 {
    font-family: 'Grandstander', cursive, sans-serif !important;
    color: #fff !important;
    font-size: 18px !important;
    margin-bottom: 15px !important;
}

.footer-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin-bottom: 30px !important;
}

@media (min-width: 768px) {
    .footer-columns {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.footer-links-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.footer-link-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: background 0.2s ease !important;
}

.footer-link-item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-top: 20px !important;
    text-align: center !important;
}

.footer-legal-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 20px !important;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

.footer-legal-links a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.footer-copyright {
    font-size: 13px !important;
    opacity: 0.8 !important;
}

/* Hide default Magento footer elements */
.footer.content > .footer.links:not(.footer-legal-links) {
    display: none !important;
}

.copyright {
    display: none !important;
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: #e67e22;
    text-decoration: none;
}

a:hover {
    color: #d35400;
    text-decoration: underline;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Grandstander', 'Comic Sans MS', cursive, sans-serif;
    color: #003060;
}

/* ============================================
   HOMEPAGE SPECIFIC
   ============================================ */

.cms-home .page-main > .page-title-wrapper {
    display: none !important;
}

.cms-home .column.main > p:first-of-type:not(.hero-welcome-content p) {
    display: none !important;
}