/*
Theme Name:   Dorayaki Accessible Child Theme
Theme URI:    https://elmastudio.de
Description:  Barrierefreies Child Theme für Dorayaki optimiert nach WCAG AA und EN 301 549.
Author:       Ihr Name
Template:     dorayaki
Version:      1.0.18.7
Text Domain:  dorayaki-accessible
GitHub Theme URI: https://github.com
*/

/* ==========================================================================
   1.0 Reset & Tastatur-Fokus-Indikatoren (WCAG 2.4.7 & 2.1.1)
   ========================================================================== */

/* Überschreibt das originale 'outline: none' des Haupt-Themes fundamental */
a:focus, 
button:focus, 
input:focus, 
select:focus, 
textarea:focus,
.standard-btn:focus,
#masthead a#mobile-search-btn:focus,
#masthead a#mobile-menu-btn:focus {
    outline: 3px solid #0056b3 !important; 
    outline-offset: 2px !important;
}

/* Verhindert unschöne Fokus-Ränder bei Klicks mit der Maus (für moderne Browser) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none !important;
}

/* Verhindert einen störenden Rahmen um den gesamten Inhaltsbereich nach der Nutzung des Skip-Links */
#main-wrap:focus,
div#main-wrap:focus {
    outline: none !important;
}

/* ==========================================================================
   2.0 Skip-Link CSS (WCAG 2.4.1 - Umgehen von Blöcken)
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #ffffff;
    border: 2px solid #3f3f3f;
    clip: auto !important;
    clip-path: none;
    color: #222222;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 20px;
    line-height: normal;
    padding: 15px 25px;
    position: absolute;
    top: 20px;
    text-decoration: none;
    width: auto;
    z-index: 100000;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   3.0 Kontrast- & Text-Optimierungen (WCAG 1.4.3 & 1.4.1)
   ========================================================================== */

/* Dorayaki Standard-Textfarbe von #3f3f3f auf #222222 abdunkeln für valides Lesen */
body, 
h1, h2, h3, h4, h5, h6,
.entry-header h2.entry-title a,
#commentform input#author, 
#commentform input#email, 
#commentform input#url, 
#commentform textarea#comment {
    color: #222222 !important;
}

/* 
   FIX für WCAG 1.4.1: Links IM Fließtext MÜSSEN dauerhaft gefettet sein, um sich visuell 
   ohne Unterstreichung vom umgebenden Text zu unterscheiden. Keine Änderung an Menüs.
*/
.entry-content p a,
.entry-summary p a,
.comment-text p a,
.textwidget p a {
    font-weight: bold !important;
    text-decoration: none !important; /* Verhindert ungewollte Unterstreichungen */
}

/* Behebt unleserliches Hellgrau bei Blockquotes und Core-Zitaten */
blockquote,
blockquote p,
.wp-block-quote,
.wp-block-quote p,
.wp-block-pullquote,
.wp-block-pullquote p,
.wp-block-paragraph,
blockquote:not(.is-large) p,
blockquote > .wp-block-paragraph {
    color: #222222 !important;
}

/* Beitrags-Metadaten auf Hintergrund #f4f4f4 (Kontrastverhältnis > 9.1:1) */
.entry-details,
.entry-details a,
.entry-date,
.entry-date a,
.entry-author,
.entry-author > span,
.entry-author a,
.entry-comments,
.entry-comments > a,
.entry-meta a {
    color: #323232 !important;
}

/* Kategorie-Tags auf grauem Button-Hintergrund #eaeaea (Kontrastverhältnis > 8.3:1) */
.entry-cats ul.post-categories li a,
.entry-meta .entry-tags a,
a[rel="category tag"] {
    color: #323232 !important;
}

/* Bildunterschriften und spezifische Widget-Inhalte barrierefrei abdunkeln */
ul.dorayaki-rp li.rp-box .rp-meta a, 
.share-btn, 
.author-info h3, 
.author-info h3 a, 
.page-header h2.page-title, 
.portfolio-box .portfolio-entry-cats a,
.entry-content p.wp-caption-text, 
.gallery-item .gallery-caption,
.wp-block-image figcaption, 
.wp-block-embed figcaption,
.entry-content .wp-block-quote__citation,
.entry-content .wp-block-quote cite,
.entry-content .wp-block-pullquote cite {
    color: #323232 !important;
}

/* Spezifischer Interaktions-Effekt für die Metadaten-Links (Rein über Schriftstärke) */
.entry-author a:hover, .entry-author a:focus,
.entry-cats a:hover, .entry-cats a:focus,
.entry-date a:hover, .entry-date a:focus,
.entry-comments a:hover, .entry-comments a:focus {
    font-weight: bold !important;
}

/* Konturen von Formularfeldern für Menschen mit Sehschwäche verstärken */
input[type="text"], 
textarea,
#search-wrap #s,
#commentform input#author, 
#commentform input#email, 
#commentform input#url {
    border: 1px solid #323232 !important;
}

/* ==========================================================================
   4.0 Desktop Such-Button & Menü-Dropdowns
   ========================================================================== */

/* Such-Button Barrierefreiheit für Tastaturnutzer */
a#desktop-search-btn:focus:before {
    color: #ffffff !important;
}

a#desktop-search-btn:focus {
    outline: 3px solid #0056b3 !important;
    outline-offset: 2px !important;
}

@media screen and (min-width: 1260px) {
    /* Sichtbarmachung des Sub-Menus, wenn JavaScript die CSS-Klasse '.focus' injiziert */
    #site-nav ul li.focus > ul.sub-menu,
    #site-nav ul li.focus > ul.children,
    #site-nav ul.sub-menu li.focus > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   5.0 RADIKALER FIX: BREAKOUT-CSS FÜR DEN FOOTER (100% Volle Breite)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    /* Verhindert horizontale Scrollbalken durch den Ausbruch-Effekt */
    html, body {
        overflow-x: hidden;
    }

    /* 
       Der ultimative CSS-Breakout: Der Footer bricht mathematisch aus der 
       festergesetzten max-width von Dorayaki aus und dehnt sich exakt auf 
       die volle Breite (100vw) des Browserfensters aus.
    */
    #colophon {
        width: 100vw !important;
        position: relative;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        box-sizing: border-box;
    }

    /* Hält die Inhalte und Widgets im Footer sauber zentriert auf der Seite */
    #footerwidget-wrap, 
    #colophon #site-info {
        max-width: 800px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (min-width: 1260px) {
    /* Passt das Innenraster der Widgets auf die maximale Desktop-Breite des Themes an */
    #footerwidget-wrap, 
    #colophon #site-info {
        max-width: 1180px;
    }
}