/*
Theme Name: Schwanenschutz OÖ
Theme URI: https://schwanenschutz.org
Author: Schwanenschutz OÖ
Author URI: https://schwanenschutz.org
Description: Offizielles WordPress Full Site Editing Block-Theme für den Schwanenschutz Oberösterreich.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schwanenschutz
Tags: full-site-editing, block-theme, one-column, custom-colors, custom-menu, custom-logo, featured-images
*/

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

/* =====================================================
   CSS CUSTOM PROPERTIES / DESIGN TOKENS
   ===================================================== */
:root {
    /* Colors */
    --color-dark: #2A4065;
    --color-dark-alt: #0F1015;
    --color-gold: #C4972A;
    --color-coral: #E88484;
    --color-white: #FFFFFF;
    --color-white-bg: #FFFFFF;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Open Sans', system-ui, sans-serif;

    /* Font Sizes */
    --fs-hero: clamp(2.5rem, 6vw, 5rem);
    --fs-large: clamp(1.8rem, 3vw, 2.5rem);
    --fs-medium: clamp(1.3rem, 2vw, 1.6rem);
    --fs-normal: 1rem;
    --fs-small: 0.875rem;

    /* Spacing */
    --max-width: 1200px;
    --padding-x: clamp(1.5rem, 5vw, 6rem);
    --padding-y: clamp(4rem, 8vw, 8rem);

    /* Transitions */
    --transition-base: 0.3s ease;
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-normal);
    line-height: 1.7;
    color: var(--color-dark-alt);
    background-color: var(--color-white-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

a:hover {
    opacity: 0.8;
}

/* =====================================================
   TYPOGRAPHY — HEADINGS
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-large); }
h3 { font-size: var(--fs-medium); }
h4, h5, h6 { font-size: 1.1rem; }

p {
    font-family: var(--font-body);
    font-size: var(--fs-normal);
    line-height: 1.7;
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

/* =====================================================
   LAYOUT HELPERS
   ===================================================== */
.container,
.wp-block-group.is-layout-constrained > * {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
}

.section-pad {
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
}

/* =====================================================
   SECTION BACKGROUNDS
   ===================================================== */
.section-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.section-dark-alt {
    background-color: var(--color-dark-alt);
    color: var(--color-white);
}

.section-light {
    background-color: var(--color-white-bg);
    color: var(--color-dark-alt);
}

/* =====================================================
   NAVIGATION — STICKY
   ===================================================== */
.site-header,
.wp-block-template-part.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-dark);
    width: 100%;
    transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.site-header .wp-block-group,
nav.wp-block-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem var(--padding-x);
}

.wp-block-site-title a,
.wp-block-site-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-white) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
}

.wp-block-navigation,
.wp-block-navigation__container {
    background-color: transparent !important;
}

.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-white) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-base);
}

.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item a {
    color: var(--color-gold) !important;
    font-weight: 700;
}

.wp-block-navigation .wp-block-navigation-item--current > a {
    font-weight: 700;
    color: var(--color-gold) !important;
}

/* Nav toggle (hamburger) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    color: var(--color-white) !important;
}

.wp-block-navigation__responsive-container {
    background-color: var(--color-dark) !important;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero-section,
.wp-block-cover.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .wp-block-cover__inner-container,
.hero-content {
    text-align: center;
    max-width: 900px;
    padding: var(--padding-x);
    position: relative;
    z-index: 2;
}

.hero-section h1,
.wp-block-cover h1 {
    font-size: var(--fs-hero);
    color: var(--color-white);
    font-weight: 900;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 1.5rem;
}

.hero-section p,
.wp-block-cover p {
    color: var(--color-white);
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* =====================================================
   BUTTONS — OUTLINE ONLY
   ===================================================== */
.wp-block-button .wp-block-button__link,
.btn-outline-white,
.btn-outline-gold,
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.8em 1.8em;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    text-decoration: none !important;
    border: 2px solid;
}

/* White outline button (on dark backgrounds) */
.btn-outline-white,
.wp-block-button.is-style-outline-white .wp-block-button__link,
.wp-block-cover .wp-block-button .wp-block-button__link {
    border-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

.btn-outline-white:hover,
.wp-block-button.is-style-outline-white .wp-block-button__link:hover,
.wp-block-cover .wp-block-button .wp-block-button__link:hover {
    background: var(--color-white) !important;
    color: var(--color-dark) !important;
}

/* Gold outline button (on light or dark backgrounds) */
.btn-outline-gold,
.wp-block-button.is-style-outline-gold .wp-block-button__link {
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
}

.btn-outline-gold:hover,
.wp-block-button.is-style-outline-gold .wp-block-button__link:hover {
    background: var(--color-gold) !important;
    color: var(--color-white) !important;
}

/* Default outline style override */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid currentColor !important;
    border-radius: 0 !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* =====================================================
   IMAGES — HALF-CIRCLE & FULL-CIRCLE
   ===================================================== */
.half-circle-image,
.wp-block-image.half-circle img,
figure.half-circle img {
    border-radius: 0 0 50% 50% !important;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.half-circle-image-wrapper,
.wp-block-image.half-circle {
    border-radius: 0 0 50% 50%;
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.half-circle-image-wrapper img,
.wp-block-image.half-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Full circle */
.full-circle-image,
.wp-block-image.full-circle img,
figure.full-circle img {
    border-radius: 50% !important;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.full-circle-image-wrapper,
.wp-block-image.full-circle {
    border-radius: 50%;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.full-circle-image-wrapper img,
.wp-block-image.full-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Gallery images — always full circle */
.gallery-circle .wp-block-image img,
.gallery-3col .wp-block-image img,
.wp-block-gallery.gallery-circle .wp-block-image img {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

/* =====================================================
   2-COLUMN GRID SECTIONS
   ===================================================== */
.grid-2col,
.wp-block-columns.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-y) var(--padding-x);
}

/* =====================================================
   3-COLUMN GRID CARDS
   ===================================================== */
.gallery-3col,
.grid-3col,
.wp-block-columns.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x) var(--padding-y);
}

/* Card styles */
.card-with-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.card-with-image h3 {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-gold);
    font-weight: 700;
}

.card-with-image p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-white);
}

.section-dark .card-with-image p {
    color: rgba(255, 255, 255, 0.85);
}

/* =====================================================
   SECTION HEADINGS
   ===================================================== */
.section-dark h2,
.section-dark-alt h2,
.heading-gold,
.wp-block-heading.has-gold-color {
    color: var(--color-gold);
}

.section-light h2 {
    color: var(--color-gold);
}

/* =====================================================
   CORAL ACCENT
   ===================================================== */
.accent-coral,
.text-coral {
    color: var(--color-coral);
}

.accent-coral-block {
    border-left: 4px solid var(--color-coral);
    padding-left: 1.5rem;
}

/* =====================================================
   PANORAMA / FULL-WIDTH COVER SECTIONS
   ===================================================== */
.panorama-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.panorama-section .content {
    position: relative;
    z-index: 2;
    color: var(--color-white);
    padding: var(--padding-x);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer,
.wp-block-template-part.footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    text-align: center;
    padding: 2rem var(--padding-x);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.7;
}

.site-footer a,
.wp-block-template-part.footer a {
    color: var(--color-gold);
    text-decoration: none;
}

.site-footer a:hover,
.wp-block-template-part.footer a:hover {
    text-decoration: underline;
}

/* =====================================================
   WORDPRESS BLOCK OVERRIDES
   ===================================================== */

/* Cover block */
.wp-block-cover {
    min-height: 100vh;
}

.wp-block-cover .wp-block-cover__inner-container {
    max-width: var(--max-width);
    width: 100%;
    padding: var(--padding-x);
}

/* Group block sections */
.wp-block-group.section-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.wp-block-group.section-light {
    background-color: var(--color-white-bg);
}

/* Columns block */
.wp-block-columns {
    gap: clamp(2rem, 4vw, 4rem);
}

/* Separator */
.wp-block-separator {
    border-color: var(--color-gold);
    opacity: 0.5;
}

/* =====================================================
   CONTACT / EMERGENCY STYLES
   ===================================================== */
.phone-number {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--color-white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin: 1rem 0;
}

.phone-number a {
    color: inherit;
    text-decoration: none;
}

.phone-number a:hover {
    color: var(--color-gold);
}

.emergency-banner {
    background-color: var(--color-coral);
    color: var(--color-white);
    padding: 0.5rem var(--padding-x);
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =====================================================
   SPENDEN (DONATION) PAGE
   ===================================================== */
.spenden-card {
    text-align: center;
    padding: 2rem;
}

.spenden-card .iban {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gold);
    background: rgba(196, 151, 42, 0.1);
    border: 1px solid var(--color-gold);
    padding: 1rem;
    margin: 1rem 0;
    letter-spacing: 0.05em;
    word-break: break-all;
}

/* =====================================================
   GALERIE PAGE
   ===================================================== */
.gallery-caption {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
    font-style: italic;
}

/* =====================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ===================================================== */
@media (max-width: 1024px) {
    .grid-2col,
    .wp-block-columns.grid-2col {
        gap: 2rem;
    }

    .gallery-3col,
    .grid-3col,
    .wp-block-columns.grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    h3 { font-size: 1.1rem; }

    .grid-2col,
    .wp-block-columns.grid-2col,
    .wp-block-columns {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .gallery-3col,
    .grid-3col,
    .wp-block-columns.grid-3col {
        grid-template-columns: 1fr;
    }

    .wp-block-cover {
        min-height: 70vh;
    }

    .half-circle-image-wrapper,
    .full-circle-image-wrapper {
        max-width: 280px;
    }

    .phone-number {
        font-size: 2rem;
    }

    .emergency-banner {
        text-align: center;
    }
}

/* =====================================================
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
    :root {
        --padding-x: 1rem;
        --padding-y: 3rem;
    }

    .wp-block-cover {
        min-height: 60vh;
    }
}