/*
Theme Name: Astra Child - Gracious Events
Theme URI: https://gracious-events.de
Description: Custom child theme for Gracious Events wedding planning website
Author: Grace
Author URI: https://gracious-events.de
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ===== CSS VARIABLES ===== */
:root {
    --primary-gold: #C9A77C;
    --secondary-brown: #8B7355;
    --accent-rose: #D4AF85;
    --text-dark: #2C2C2C;
    --bg-cream: #FDFBF7;
    --white: #FFFFFF;
    --sage: #9CA89B;
    --transition: all 0.3s ease;
}

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* ===== GLOBAL ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-cream);
    line-height: 1.7;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.3; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; transition: var(--transition); }

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

.hero-section {
  min-height: calc(100dvh - 70px); /* header height */
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
  text-align: center;
  margin: 0;
  padding: 0;

  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1600') center/cover;
  color: var(--white);
}

.hero-content { max-width: 900px; width: 100%; padding: 2rem; margin: 0 auto; animation: fadeInUp 1s ease-out; }
.hero-subtitle { font-size: 1.3rem; margin-bottom: .5rem; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; }
.hero-title { font-size: 4rem; margin-bottom: 1rem; letter-spacing: 2px; }
.hero-tagline { font-size: 1.1rem; margin-bottom: 2.5rem; opacity: .95; font-weight: 300; }
.trust-badges { display: flex; gap: 2rem; justify-content: center; margin: 2rem 0; font-size: .95rem; flex-wrap: wrap; }
.trust-badges span { display: flex; align-items: center; gap: .5rem; }

/* ===== BUTTONS ===== */
.btn { display: inline-block; padding: 1rem 2.5rem; border-radius: 3px; font-weight: 500; letter-spacing: 1px; font-size: .95rem; border: none; cursor: pointer; transition: var(--transition); }
.btn-primary { background: var(--primary-gold); color: var(--white); margin-right: 1rem; }
.btn-primary:hover { background: var(--secondary-brown); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(201,167,124,.4); }
.btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--text-dark); }

/* ===================================================================== */
/* ========================  SECTIONS / LAYOUT  ======================== */
/* ===================================================================== */

.content-section { padding: 6rem 2rem; }
.container { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-subtitle { color: var(--primary-gold); font-size: .95rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .5rem; font-weight: 500; }
.section-title { font-size: 3rem; color: var(--text-dark); margin-bottom: 1rem; }
.section-description { font-size: 1.1rem; opacity: .8; max-width: 700px; margin: 0 auto; }

/* ===== ABOUT ===== */
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-image { width: 100%; height: 500px; object-fit: cover; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.about-text h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.about-text p { margin-bottom: 1.5rem; font-size: 1.05rem; opacity: .85; }
.highlight-box { background: var(--primary-gold); color: var(--white); padding: 2rem; border-radius: 5px; margin: 2rem 0; }
.highlight-box h4 { margin-bottom: 1rem; font-size: 1.3rem; }

/* ===== SERVICES ===== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
.service-card { text-align: center; padding: 3rem 2rem; background: var(--white); border-radius: 5px; border: 1px solid rgba(201,167,124,.2); transition: var(--transition); }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,.1); border-color: var(--primary-gold); }
.service-icon { font-size: 3rem; color: var(--primary-gold); margin-bottom: 1.5rem; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.service-card p { opacity: .8; line-height: 1.8; }

/* ===== PORTFOLIO ===== */
.portfolio-section { background: var(--white); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.portfolio-item { position: relative; overflow: hidden; border-radius: 5px; height: 400px; cursor: pointer; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.portfolio-item:hover img { transform: scale(1.1); }
.portfolio-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); padding: 2rem; color: var(--white); transform: translateY(100%); transition: var(--transition); }
.portfolio-item:hover .portfolio-overlay { transform: translateY(0); }

/* ===== BRUNCH & BLOOM ===== */
.brunch-bloom-section { background: linear-gradient(135deg, var(--sage), var(--primary-gold)); color: var(--white); text-align: center; }
.brunch-bloom-section .section-title, .brunch-bloom-section .section-subtitle { color: var(--white); }
.brunch-content { max-width: 800px; margin: 0 auto; }
.brunch-content p { font-size: 1.15rem; margin-bottom: 2rem; opacity: .95; }

/* ===== CONTACT ===== */
.contact-section { background: var(--white); }
.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.contact-info h3 { font-size: 2rem; margin-bottom: 1.5rem; }
.contact-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.contact-item i { font-size: 1.5rem; color: var(--primary-gold); }
.contact-form { background: var(--bg-cream); padding: 3rem; border-radius: 5px; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: 500; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 1rem; border: 1px solid rgba(201,167,124,.3);
    border-radius: 3px; font-family: 'Montserrat', sans-serif; font-size: 1rem; background: var(--white); transition: var(--transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary-gold); }
.form-group textarea { min-height: 150px; resize: vertical; }

/* ===================================================================== */
/* =================  ASTRA-SPEZIFISCHE OVERRIDES  ===================== */
/* ===================================================================== */

/* Astra-Header auf dieser Template-Seite ausblenden – wir nutzen unseren eigenen */
.page-template-gracious-homepage .site-header { display: none; }

/* Seiten-Wrapper auf dieser Seite vollflächig */
.page-template-gracious-homepage .site-content .ast-container,
.page-template-gracious-homepage #primary,
.page-template-gracious-homepage .content-area,
.page-template-gracious-homepage .ast-primary,
.page-template-gracious-homepage .entry-content {
  display: block; max-width: 100%; width: 100%; padding: 0; margin: 0; float: none;
}

/* Inneres .container weiter schön zentriert */
.page-template-gracious-homepage .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Abschnitte sicher stapeln */
.page-template-gracious-homepage #gracious-home,
.page-template-gracious-homepage #gracious-home > section { display: block; width: 100%; clear: both; }

/* ===================================================================== */
/* =======================  CUSTOM HEADER (sticky)  ==================== */
/* ===================================================================== */

.page-template-gracious-homepage .ge-header {
  position: sticky;              /* <— statt fixed */
  top: 0;
  z-index: 1001;
  background: rgba(253, 251, 247, 0.95);
  backdrop-filter: blur(10px);
  /* keine Border-Linie = kein sichtbarer Streifen */
  border-bottom: 0;
  box-shadow: none;
  transition: all .25s ease;
}
.page-template-gracious-homepage .ge-header.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Header-Inhalt */
.page-template-gracious-homepage .ge-container {
  max-width: 1200px; margin: 0 auto; padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.page-template-gracious-homepage .ge-brand {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.4rem;
  letter-spacing: .5px; color: var(--primary-gold);
}

/* Desktop-Navigation */
.page-template-gracious-homepage .ge-nav { display: flex; align-items: center; gap: 1.25rem; }
.page-template-gracious-homepage .ge-menu { list-style: none; display: flex; align-items: center; gap: .5rem; margin: 0; }
.page-template-gracious-homepage .ge-menu > li > a {
  display: inline-block; padding: .5rem 1rem; font-weight: 500; color: var(--text-dark);
  border-radius: .375rem; transition: all .2s ease;
}
.page-template-gracious-homepage .ge-menu > li > a:hover { color: var(--primary-gold); }

.page-template-gracious-homepage .ge-lang { display: flex; gap: .5rem; margin-left: .5rem; }
.page-template-gracious-homepage .ge-lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: 999px; background: var(--primary-gold); color: #fff;
  font-weight: 600; transition: transform .15s ease;
}
.page-template-gracious-homepage .ge-lang-btn:hover { transform: translateY(-1px); }

/* Hamburger Button */
.page-template-gracious-homepage .ge-nav-toggle {
  display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; position: relative;
}
.page-template-gracious-homepage .ge-nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text-dark);
  transform-origin: center; transition: all .2s ease;
}
.page-template-gracious-homepage .ge-nav-toggle span:nth-child(1){ top: 14px; }
.page-template-gracious-homepage .ge-nav-toggle span:nth-child(2){ top: 20px; }
.page-template-gracious-homepage .ge-nav-toggle span:nth-child(3){ top: 26px; }
.page-template-gracious-homepage .ge-nav-open .ge-nav-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.page-template-gracious-homepage .ge-nav-open .ge-nav-toggle span:nth-child(2){ opacity: 0; }
.page-template-gracious-homepage .ge-nav-open .ge-nav-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Mobile-Navigation */
@media (max-width: 992px) {
  .page-template-gracious-homepage .ge-nav-toggle { display: inline-block; }
  .page-template-gracious-homepage .ge-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(253,251,247,.98);
    display: none; flex-direction: column; align-items: flex-start;
    gap: .25rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .page-template-gracious-homepage .ge-nav.is-open { display: flex; }
  .page-template-gracious-homepage .ge-menu { flex-direction: column; width: 100%; }
  .page-template-gracious-homepage .ge-menu > li > a { width: 100%; padding: .75rem 0; }
  .page-template-gracious-homepage .ge-lang { margin-top: .5rem; }
}

/* ===================================================================== */
/* ============================  ANIMATIONS  =========================== */
/* ===================================================================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ===================================================================== */
/* ============================  RESPONSIVE  =========================== */
/* ===================================================================== */

@media (max-width: 768px) {
  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1rem; }
  .trust-badges { flex-direction: column; gap: 1rem; }
  .section-title { font-size: 2rem; }
  .about-content, .contact-content { grid-template-columns: 1fr; }
  .services-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .btn { display: block; margin: .5rem 0; }
  .btn-primary { margin-right: 0; }
}

/* ===================================================================== */
/* ========================  WORDPRESS-HELPER  ========================= */
/* ===================================================================== */

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { max-width: 96%; background: var(--bg-cream); padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

/* Admin-Bar-Korrektur ist bei sticky nicht nötig */