/*
 Theme Name:   Avala Child
 Theme URI:    http://avala.bold-themes.com
 Description:  Avala child theme – Alina & Tobias Wedding, angepasst an das Einladungsdesign (Dunkel-Petrol, Gold, Sterne)
 Author:       BoldThemes (angepasst für alinaundtobias.de)
 Template:     avala
 Version:      1.0.0
 Text Domain:  avala-child
*/

/* ============================================================
   SCHRIFTEN (Google Fonts)
   Great Vibes  → Zierschrift wie auf der Einladungskarte
   Cormorant Garamond → elegant für Headings (ergänzt das Theme-Default)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=EB+Garamond:wght@300;400&display=swap');

/* ============================================================
   FARB-VARIABLEN
   ============================================================ */
:root {
    --petrol:        #1c5247;   /* Hintergrundfarbe der Einladung       */
    --petrol-dark:   #122f2c;   /* Etwas dunkler für Footer / Kontraste */
    --petrol-mid:    #1e5c52;   /* Hover-Zustand, Cards                 */
    --gold:          #c9a96e;   /* Hauptgold-Ton (Text auf Karte)       */
    --gold-bright:   #e2c07a;   /* Helleres Gold für Highlights         */
    --gold-muted:    #a88750;   /* Gedämpftes Gold für Sub-Text         */
    --cream:         #f5ede0;   /* Heller Beige-Creme für Fließtext     */
    --cream-dim:     #d4c4a8;   /* Gedämpfter für sekundären Text       */
}

/* ============================================================
   1. ACCENT- & ALTERNATE-FARBEN (überschreiben Theme-Defaults)
      Das Theme injiziert #8c857a und #63725b – wir ersetzen sie.
   ============================================================ */
.btAccentSkin,
a,
.bt-content a {
    color: var(--gold);
}

.btAccentSkin .bt-content a,
.btDarkSkin .btAccentSkin .bt-content a {
    color: var(--gold-bright);
}

/* Accent-Hintergründe (z. B. Buttons, aktive Menüpunkte) */
.btWithAccentBackground,
.bt-btn,
.bt-content a.bt-btn,
input[type='submit'],
button[type='submit'] {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--petrol-dark) !important;
}

.btWithAccentBackground:hover,
.bt-btn:hover,
input[type='submit']:hover,
button[type='submit']:hover {
    background-color: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
}

/* Alternate color (grüne Elemente im Original) → Petrol */
.btAlternateSkin {
    color: var(--petrol);
}

/* ============================================================
   2. BODY & GLOBALER HINTERGRUND
   ============================================================ */
body {
    background-color: var(--petrol) !important;
    color: var(--cream);
    font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    font-size: 17px;
    line-height: 1.75;
}

/* Globale Texfarben */
p, li, td, th, label, span:not([class*="bt"]) {
    color: var(--cream);
}

/* ============================================================
   3. TYPOGRAFIE – ÜBERSCHRIFTEN
   ============================================================ */

/* h1 bekommt die Kursiv-Zierschrift (wie "Hochzeit" auf der Karte) */
h1,
.bt_bb_headline .bt_bb_headline_content span {
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive !important;
    color: var(--gold) !important;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* h2, h3 bekommen Cormorant Garamond – elegant & leicht */
h2, h3, h4 {
    font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
    color: var(--gold) !important;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h2 {
    font-size: 1.6em;
}

/* Supertitle / Subtitle (Avala-spezifisch) */
.bt_bb_headline .bt_bb_headline_superheadline,
.bt_bb_headline .bt_bb_headline_subheadline {
    color: var(--gold-muted) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.75em;
}

/* ============================================================
   4. HEADER / NAVIGATION
   ============================================================ */
.mainHeader,
.bt-logo-area,
.main-header-inner {
    background-color: rgba(18, 47, 44, 0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(201, 169, 110, 0.25);
}

/* Logo-Text (falls kein Bild) */
.btTextLogo,
.bt-logo-area .logo {
    color: var(--gold) !important;
    font-family: 'Great Vibes', cursive !important;
    font-size: 1.6em !important;
}

/* Navigations-Links */
.menuPort nav > ul > li > a,
.menuPort nav ul li a {
    color: var(--cream-dim) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78em;
    font-weight: 400;
    transition: color 0.3s ease;
}

.menuPort nav > ul > li > a:hover,
.menuPort nav ul li.on > a,
.menuPort nav ul li:hover > a {
    color: var(--gold) !important;
}

/* Aktiv-Indikator-Linie unter Nav-Item */
.menuPort nav > ul > li > a:after {
    background: var(--gold) !important;
}

/* Sticky Header */
.btStickyHeaderActive .mainHeader,
.btStickyHeaderActive .main-header-inner {
    background-color: rgba(18, 47, 44, 0.97) !important;
}

/* ============================================================
   5. SEKTIONEN / SECTIONS
   ============================================================ */

/* Standard-Sektionsfarben auf Petrol setzen */
.btLightSkin,
.bt-section,
.btSection,
.bt_bb_section {
    background-color: var(--petrol) !important;
    color: var(--cream) !important;
}

/* Dark-Skin-Bereiche */
.btDarkSkin {
    background-color: var(--petrol-dark) !important;
    color: var(--cream) !important;
}

/* Trennlinien & Decorators */
.btIconSeparator,
.bt_bb_separator,
hr {
    border-color: rgba(201, 169, 110, 0.35) !important;
    background-color: rgba(201, 169, 110, 0.35) !important;
}

/* ============================================================
   6. COUNTDOWN-TIMER
   ============================================================ */
.bt_bb_countdown.btCounterHolder {
    color: var(--gold) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.bt_bb_countdown.btCounterHolder .btCountdownHolder div[class$="_content"] {
    border-color: rgba(201, 169, 110, 0.2) !important;
}

/* Trennstriche zwischen den Einheiten */
.bt_bb_countdown.btCounterHolder .btCountdownHolder .days_content:after,
.bt_bb_countdown.btCounterHolder .btCountdownHolder .hours_content:after,
.bt_bb_countdown.btCounterHolder .btCountdownHolder .minutes_content:after {
    background: rgba(201, 169, 110, 0.4) !important;
}

/* Labels (Tage, Stunden etc.) */
.bt_bb_countdown.btCounterHolder .btCountdownHolder div[class$="_text"],
.btCountdownHolder .days_text,
.btCountdownHolder .hours_text,
.btCountdownHolder .minutes_text,
.btCountdownHolder .seconds_text {
    color: var(--gold-muted) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.55em;
}

/* ============================================================
   7. FORMULAR (RÜCKMELDUNG)
   ============================================================ */
input:not([type='checkbox']):not([type='radio']):not([type='submit']),
textarea,
select,
.fancy-select .trigger {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(201, 169, 110, 0.35) !important;
    color: var(--cream) !important;
    border-radius: 2px;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1em;
    padding: 10px 14px !important;
    transition: border-color 0.3s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--cream-dim) !important;
    opacity: 0.6;
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']):focus,
textarea:focus {
    border-color: var(--gold) !important;
    background-color: rgba(201, 169, 110, 0.05) !important;
    outline: none;
}

/* Radio-Buttons / Checkboxen */
input[type='radio'],
input[type='checkbox'] {
    accent-color: var(--gold);
}

/* Submit-Button */
input[type='submit'],
.wpcf7-submit,
.bt-btn {
    background-color: var(--gold) !important;
    color: var(--petrol-dark) !important;
    border: none !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 0.9em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 12px 32px !important;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

input[type='submit']:hover,
.wpcf7-submit:hover,
.bt-btn:hover {
    background-color: var(--gold-bright) !important;
    transform: translateY(-1px);
}

/* Formular-Labels */
label,
.bt-form label,
.wpcf7 label {
    color: var(--gold-muted) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: 0.08em;
    font-size: 0.85em;
    text-transform: uppercase;
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.bt-site-footer,
.bt-site-footer-copy-menu {
    background-color: var(--petrol-dark) !important;
    color: var(--cream-dim) !important;
    border-top: 1px solid rgba(201, 169, 110, 0.2);
}

.bt-site-footer a,
.bt-site-footer .copy-line,
.bt-site-footer .bt-footer-copy {
    color: var(--gold-muted) !important;
}

.bt-site-footer a:hover {
    color: var(--gold) !important;
}

/* ============================================================
   9. LINKS (global)
   ============================================================ */
a {
    color: var(--gold);
    transition: color 0.25s ease;
}

a:hover {
    color: var(--gold-bright);
}

/* ============================================================
   10. GOLD-STERNE-DEKORATION (passend zur Einladungskarte)
       Overlay auf Sektionen mit der Klasse .bt_bb_section
   ============================================================ */

/* Sternchen-Muster als SVG-Hintergrund – dezent, wie auf der Einladungskarte */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
    background-image:
        radial-gradient(circle, var(--gold) 1px, transparent 1px),
        radial-gradient(circle, var(--gold) 1px, transparent 1px),
        radial-gradient(circle, var(--gold-bright) 1.5px, transparent 1.5px),
        radial-gradient(circle, var(--gold) 1px, transparent 1px),
        radial-gradient(circle, var(--gold-bright) 1px, transparent 1px),
        radial-gradient(circle, var(--gold) 0.8px, transparent 0.8px),
        radial-gradient(circle, var(--gold-muted) 1.2px, transparent 1.2px),
        radial-gradient(circle, var(--gold) 1px, transparent 1px);
    background-size:
        420px 380px,
        310px 290px,
        530px 470px,
        280px 320px,
        670px 550px,
        350px 410px,
        490px 340px,
        600px 520px;
    background-position:
        80px  60px,
        200px 150px,
        50px  250px,
        380px 80px,
        150px 400px,
        450px 300px,
        300px 480px,
        500px 180px;
}

/* Seiten-Inhalte liegen über dem Sternmuster */
.mainHeader,
.bt-content,
.bt-page-content,
.btPageContent,
#btContent,
.bt_bb_section,
.bt-site-footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   11. SCROLLBAR (optional – Petrol/Gold passend)
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--petrol-dark);
}
::-webkit-scrollbar-thumb {
    background-color: var(--gold-muted);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--gold);
}

/* ============================================================
   12. SELEKTION (Text markieren)
   ============================================================ */
::selection {
    background-color: var(--gold);
    color: var(--petrol-dark);
}
::-moz-selection {
    background-color: var(--gold);
    color: var(--petrol-dark);
}

/* ============================================================
   13. RESPONSIV – Mobile Anpassungen
   ============================================================ */
@media (max-width: 768px) {
    h1 {
        font-size: 2.4em !important;
    }

    h2 {
        font-size: 1.3em !important;
    }

    body {
        font-size: 16px;
    }

    .mainHeader,
    .main-header-inner {
        background-color: rgba(18, 47, 44, 0.97) !important;
    }
}