/*
Theme Name: Blocksy HypnoSilver Child
Theme URI: https://hypnosilver.example.com
Description: Child Theme für Blocksy mit HypnoSilver Design-Anpassungen. Content-Breite wird komplett über den Block-Editor gesteuert.
Author: HypnoSilver Team
Template: blocksy
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-hypnosilver
*/

/* ============================================================
   Blocksy HypnoSilver Child - Main Stylesheet
   Content width controlled via Block Editor, NOT Customizer
   ============================================================ */

/* --- Override Blocksy Container — remove fixed max-width --- */
.page-fullwidth .container,
.page-fullwidth .ct-container,
.page-fullwidth .ct-container-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --- Entry Content: full width, no outer padding --- */
.entry-content--fullwidth {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* --- Page Title inline with content --- */
.entry-header--inline {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.entry-header--inline .entry-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-dark, #1A1A2E);
    margin: 0 0 48px 0;
}

/* --- Blocksy default content width override --- */
/* This removes Blocksy's .ct-container max-width on pages */
body.page .ct-container,
body.page .site-main > .container,
body.page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- Full-Width Sections (Align Full) --- */
.wp-block-group.alignfull,
.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* --- Wide Sections (Align Wide) — default content width --- */
.wp-block-group.alignwide,
.alignwide {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
}

/* --- Default block alignment (no align class) — full width, no constraint --- */
.entry-content--fullwidth > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* --- Ensure nested groups respect alignment --- */
.wp-block-group .wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- Wave Dividers --- */
.wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}

.wave-divider svg {
    display: block;
    width: 100%;
}

/* --- Card Hover Effects --- */
.wp-block-group .solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(11, 29, 58, 0.1);
    transition: all 250ms ease;
}

/* --- Button Hover --- */
.wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 29, 58, 0.1);
}

/* --- Smooth Scroll --- */
html {
    scroll-behavior: smooth;
}

/* --- Custom List Style (only for content lists, NOT menus/nav) --- */
.entry-content ul:not(.menu):not(.sub-menu):not(.wp-block-navigation__container) li:not(.menu-item):not(.wp-block-navigation-item)::before {
    content: '✓';
    color: #0D4F4F;
    font-weight: 700;
    margin-right: 8px;
}

/* Any list inside a <nav>, header, footer, or menu container never gets a checkmark */
header ul li::before,
header ol li::before,
footer ul li::before,
footer ol li::before,
nav ul li::before,
nav ol li::before,
[class*="header"] ul li::before,
[class*="menu"] li::before,
[class*="nav"] ul li::before,
ul.menu li::before,
.menu-item::before,
.sub-menu li::before,
.wp-block-navigation ul li::before,
.wp-block-navigation__container li::before,
.wp-block-navigation-item::before,
.menu-container ul li::before,
.header-menu-1 ul li::before,
.header-menu-2 ul li::before,
.footer-menu ul li::before,
.mobile-menu ul li::before,
#primary-menu ul li::before,
.ct-menu ul li::before,
.ct-header ul li::before,
[data-id="menu"] ul li::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Typography Overrides --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.2;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

/* --- Color Variables --- */
:root {
    --color-navy: #0B1D3A;
    --color-teal: #0D4F4F;
    --color-teal-light: #1A7A7A;
    --color-sage: #A8C5B8;
    --color-ivory: #F7F4EF;
    --color-gold: #C8A96E;
    --color-text-dark: #1A1A2E;
    --color-text-medium: #4A4A5A;
    --color-text-light: #F7F4EF;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .wp-block-group.alignwide {
        padding-left: 16px;
        padding-right: 16px;
    }

    .entry-content--fullwidth > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
   Mobile Off-Canvas Menu (Blocksy) — high-specificity overrides
   Blocksy renders the mobile menu inside #offcanvas .ct-panel-inner
   with [data-id="mobile-menu"] and .mobile-menu / .menu-container.
   ============================================================ */

/* Innerer Panel-Container: großzügiges Padding, damit Menüpunkte
   nicht am Rand kleben */
body #offcanvas.ct-panel .ct-panel-inner,
body #offcanvas .ct-panel-inner {
    padding: 32px 28px !important;
    box-sizing: border-box;
}

/* Panel-Actions (X-Button-Bereich) etwas rechts einrücken */
body #offcanvas.ct-panel .ct-panel-actions,
body #offcanvas .ct-panel-actions {
    padding: 20px 24px !important;
}

/* Menü-Container (mobile-menu / menu-container) auf volle Breite */
body #offcanvas [data-id="mobile-menu"],
body #offcanvas .mobile-menu-container,
body #offcanvas .menu-container {
    width: 100% !important;
    text-align: left !important;
    padding: 12px 0 !important;
}

/* Die eigentliche Menüliste */
body #offcanvas [data-id="mobile-menu"] .menu,
body #offcanvas .mobile-menu,
body #offcanvas ul.menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Menü-Items: volle Breite, Trennlinie unten */
body #offcanvas [data-id="mobile-menu"] .menu > li,
body #offcanvas .mobile-menu > li,
body #offcanvas ul.menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(11, 29, 58, 0.08) !important;
    text-align: left !important;
}

body #offcanvas [data-id="mobile-menu"] .menu > li:last-child,
body #offcanvas .mobile-menu > li:last-child,
body #offcanvas ul.menu > li:last-child {
    border-bottom: none !important;
}

/* Die Links selbst — größer, mehr Padding, linksbündig */
body #offcanvas [data-id="mobile-menu"] .menu > li > a,
body #offcanvas .mobile-menu > li > a,
body #offcanvas ul.menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 20px 8px !important;
    font-size: 1.3125rem !important;   /* ~21px */
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: var(--color-navy, #0B1D3A) !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: color 200ms ease, padding-left 200ms ease, background-color 200ms ease !important;
}

body #offcanvas [data-id="mobile-menu"] .menu > li > a:hover,
body #offcanvas [data-id="mobile-menu"] .menu > li > a:focus,
body #offcanvas .mobile-menu > li > a:hover,
body #offcanvas .mobile-menu > li > a:focus,
body #offcanvas ul.menu > li > a:hover,
body #offcanvas ul.menu > li > a:focus {
    color: var(--color-teal, #0D4F4F) !important;
    padding-left: 16px !important;
    background-color: rgba(13, 79, 79, 0.03) !important;
}

/* Sub-Menü-Items etwas kleiner und eingerückt */
body #offcanvas .sub-menu > li > a,
body #offcanvas ul.sub-menu > li > a {
    padding: 14px 8px 14px 24px !important;
    font-size: 1.0625rem !important;   /* ~17px */
    font-weight: 400 !important;
}