/**
 * Theme Name:     Divi Child
 * Author:         Julia Rossa Design
 * Template:       Divi
 * Text Domain:	   divi-child
 * Description:    Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
 */

/* ─── Horizontalen Overflow verhindern (Schatten bleiben sichtbar) ─── */
html, body {
    overflow-x: clip;
    max-width: 100%;
}


/* ─── Inline-Akzente (nur für <span> innerhalb von Texten) ─── */

.text-accent {
    font-family: "Cormorant Garamond Italic lokal", Georgia, serif;
    font-style: italic;
    color: var(--gcid-gold-hell, #d4b97a);
}

.text-accent-rot {
    font-family: "Cormorant Garamond Italic lokal", Georgia, serif;
    font-style: italic;
    color: var(--accent_color, #a52236);
}

/* Dropdown-Breite fest vergrößern, damit das längste Wort passt */
.et_pb_menu .et-menu nav li ul.sub-menu,
.et_pb_menu .et-menu ul.sub-menu {
    width: 320px !important; 
}

/* Verhindern, dass der Text ungewollt umbricht */
.et_pb_menu .et-menu li li a,
.et-menu li li a {
    white-space: nowrap !important;
    width: 100% !important;
}

/* 1. Spalten definieren und den Container auf volle Breite zwingen */
.jrd-gallery-masonry .et_pb_gallery_items {
    display: block !important;
    column-count: 3;
    column-gap: 15px;
    width: 100% !important; /* Nutzt den vollen Platz der Spalte */
}

/* 2. Die einzelnen Bild-Container bändigen */
.jrd-gallery-masonry .et_pb_gallery_item {
    display: inline-block !important; /* Verhindert das Zerreißen über zwei Spalten */
    width: 100% !important; 
    margin: 0 0 15px 0 !important; 
    clear: none !important;
}

/* 3. Das eigentliche Bild (inkl. Eckenradius & Format-Erhalt) */
.jrd-gallery-masonry .et_pb_gallery_image,
.jrd-gallery-masonry .et_pb_gallery_image img {
    width: 100% !important;
    height: auto !important; /* Zwingt Divi, die Originalproportionen zu zeigen */
    border-radius: 12px !important; 
    transition: transform 0.3s ease-in-out !important;
    overflow: hidden !important;
}

/* 4. Hover-Effekt (das "My" Vergrößerung) */
.jrd-gallery-masonry .et_pb_gallery_item:hover .et_pb_gallery_image img {
    transform: scale(1.03) !important;
}

/* 5. Responsive Anpassungen für Tablet und Mobile */
@media only screen and (max-width: 980px) { 
    .jrd-gallery-masonry .et_pb_gallery_items { 
        column-count: 2; 
    } 
} 
@media only screen and (max-width: 767px) {
    .jrd-gallery-masonry .et_pb_gallery_items { 
        column-count: 1;  /* Sorgt für eine saubere, einzelne Spalte auf dem Handy */
    }
}

/* 1. Hintergrund des nativen Audio-Players allgemein weiß machen */
.jrd-white-player {
    background-color: #ffffff !important;
    border-radius: 50px !important; /* Sorgt für die schöne, runde Pillenform */
}

/* 2. Der Spezial-Befehl für Chrome, Safari und Edge */
.jrd-white-player::-webkit-media-controls-panel {
    background-color: #ffffff !important;
}

/* Kontaktformular */
.flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.flex-row label {
    flex: 1;
    min-width: 250px;
}
.jrd-bewerbung-form label {
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Grundstruktur & Abstände */
.jrd-bewerbung-form {
    max-width: 100%;
    font-family: inherit; /* Übernimmt automatisch die Schriftart aus Divi (z.B. Montserrat) */
}

/* Versteckt die Labels für den sauberen "Screenshot 2"-Look, 
   lässt sie aber für Screenreader lesbar (Barrierefreiheit) */
.jrd-bewerbung-form label {
    font-size: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem);
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
    display: block;
}

/* Styling der Eingabefelder (Text, E-Mail, Telefon, Dropdown, Textbereich) */
.jrd-bewerbung-form input[type="text"],
.jrd-bewerbung-form input[type="email"],
.jrd-bewerbung-form input[type="tel"],
.jrd-bewerbung-form select,
.jrd-bewerbung-form textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #a89063; /* Der edle, leicht gold/braune Rahmen */
    border-radius: 2px;
    background-color: #ffffff;
    color: #333333;
    font-size: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem);
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Fokus-Status: Wenn man ins Feld klickt (wichtig für die Nutzbarkeit) */
.jrd-bewerbung-form input[type="text"]:focus,
.jrd-bewerbung-form input[type="email"]:focus,
.jrd-bewerbung-form input[type="tel"]:focus,
.jrd-bewerbung-form select:focus,
.jrd-bewerbung-form textarea:focus {
    border-color: #942b3b; /* AMSOC Dunkelrot */
    outline: none;
    box-shadow: 0 0 5px rgba(148, 43, 59, 0.2);
}

/* Dropdown Pfeil anpassen für einen cleaneren Look */
.jrd-bewerbung-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L13 1" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
}

/* Flexbox für Felder nebeneinander (z.B. E-Mail und Telefon) */
.jrd-bewerbung-form .flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.jrd-bewerbung-form .flex-row > label {
    flex: 1;
    min-width: 250px;
}

/* Styling des Senden-Buttons (AMSOC Style) */
.jrd-bewerbung-form input[type="submit"] {
    background-color: #a52236; /* AMSOC Dunkelrot */
    color: #ffffff;
    font-size: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem);
    font-weight: 600;
    padding: 14px 40px;
    border: none;
    border-radius: 40px; /* Die starke Rundung aus Screenshot 2 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    margin-top: 10px;
}

.jrd-bewerbung-form input[type="submit"]:hover {
    background-color: #7a1828; /* Etwas dunkler beim Hover */
    transform: translateY(-2px); /* Schöner, leichter Lift-Effekt */
}

/* Styling der Datenschutz-Checkbox */
.jrd-bewerbung-form .wpcf7-list-item {
    margin: 0;
}

.jrd-bewerbung-form .wpcf7-acceptance {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #333333;
    margin-bottom: 20px;
}

.jrd-bewerbung-form input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 15px;
    accent-color: #942b3b; /* Färbt die Checkbox rot, sofern vom Browser unterstützt */
    cursor: pointer;
}

/* Erstellt die unsichtbare Zeile */
.jrd-form-row {
    display: flex;
    gap: 30px; /* Der Abstand ZWISCHEN den beiden Feldern */
    width: 100%;
}

/* Erstellt die 50% Spalten */
.jrd-form-col {
    flex: 1 1 0; /* Zwingt beide Spalten auf exakt die gleiche Breite */
    min-width: 0; /* Wichtig: Verhindert, dass CF7-Elemente die Spalte sprengen */
}

/* Mobile Ansicht: Auf dem Handy wieder untereinander */
@media (max-width: 767px) {
    .jrd-form-row {
        flex-direction: column;
        gap: 0;
    }
}