/*
Theme Name:   Mylook (OceanWP Child)
Theme URI:    https://mylook.com.de
Description:  Custom child theme for mylook.com.de — clean luxe streetwear blog + shop. Custom homepage template, brand tokens (Stealth Luxe palette), DM Serif Display + Inter. Inherits OceanWP for header/footer/single-post which remain on Elementor Theme Builder for now.
Author:       Marlon Weber
Author URI:   https://mylook.com.de
Template:     oceanwp
Version: 0.6.56
Text Domain:  mylook
*/

/* ============================================================
   Brand Tokens — Stealth Luxe palette
   Available globally so future templates can reuse them.
   ============================================================ */
:root {
    /* Colors */
    --mylook-bg:           #fafaf7;
    --mylook-surface:      #ffffff;
    --mylook-text:         #0d0d0d;
    --mylook-text-soft:    #5c5c5c;
    --mylook-text-muted:   #8a8a8a;
    --mylook-border:       #ebebe6;
    --mylook-border-strong:#1a1a1a;
    --mylook-link:         #0d0d0d;
    --mylook-link-hover:   #c4b583;
    --mylook-accent-gold:  #c4b583;
    --mylook-button-bg:    #0d0d0d;
    --mylook-button-text:  #ffffff;
    --mylook-button-hover: #1a1a1a;

    /* Typography */
    --mylook-font-display: "DM Serif Display", "Playfair Display", Georgia, serif;
    --mylook-font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Container */
    --mylook-container-max: 1440px;
    --mylook-container-pad: clamp(20px, 3vw, 48px);
}

/* OceanWP ships `a:focus { outline: solid 1px !important; }` which draws a
   visible 1px ring around every clicked link. Modern browsers also expose
   :focus-visible, which only matches keyboard / programmatic focus — that's
   the state where an outline is genuinely useful for accessibility.
   Suppressing :focus while :focus-visible keeps a11y keyboard-nav intact. */
html body a:focus:not(:focus-visible) {
    outline: none !important;
}

/* Horizontal overflow safety net. On mobile (iOS Safari especially) a single
   subpixel-overflowing descendant — sub-1px rounding on aspect-ratio tiles,
   font-rendered glyph extending past its parent, an inline SVG with intrinsic
   width — can make the body wider than the visual viewport. Symptom: page
   shifts a few px horizontally as you scroll vertically (the right edge
   exposes a sliver of empty space, then snaps back). Hard to reproduce
   server-side because the offset depends on the rendered glyph metrics.
   `overflow-x: clip` is the modern fix — it stops horizontal growth without
   creating a scroll container (so `position: sticky/fixed` descendants like
   the Elementor sticky header keep working). Older iOS Safari (< 16) falls
   back to `overflow-x: hidden`, which makes the html element a scroll
   container but still hides the overflow visually. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ============================================================
   Search inputs: kein Browser-Focus-Ring (schwarzer versetzter
   Rand beim Klick ins Suchfeld) — Marlon 2026-07-08. Gilt fuer
   Header-Suche (Elementor), Theme-Searchform und Shop-Suche.
   ============================================================ */
input[type="search"]:focus,
input[type="search"]:focus-visible,
.elementor-search-form__input:focus,
.elementor-search-form__input:focus-visible,
#searchform input:focus,
.myfeeds-shop__search:focus {
    outline: none !important;
    box-shadow: none;
}

/* Der eigentliche schwarze Rand kam vom Elementor-Widget-Wrapper:
   Elementor setzt ein :focus-within-Outline auf .elementor-element
   (Accessibility-Default). Gezielt nur fuer das Such-Widget aus. */
.elementor-widget-search-form:focus-within,
.elementor-element.elementor-widget-search-form:focus-within {
    outline: none !important;
}

/* Mobile-Menue-Suche (injiziert via functions.php) — Pill-Look wie
   die Desktop-Suche, sitzt als letzter Eintrag im Nav-Dropdown (unter SHOP). */
.mylook-mobile-search {
    padding: 10px 16px 16px;
}
.mylook-mobile-search input[type="search"] {
    width: 100%;
    padding: 10px 18px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    /* 16px ist Pflicht: unter 16px zoomt iOS Safari beim Fokussieren
       ins Feld (Marlon 2026-07-08) */
    font-size: 16px;
    line-height: 1.4;
    background: #fff;
    color: var(--mylook-text);
    -webkit-appearance: none;
    appearance: none;
}
.mylook-mobile-search input[type="search"]::placeholder {
    color: #9a9a9a;
}

/* ============================================================
   Nav-Dropdowns — Stealth-Luxe-Angleichung (Marlon 2026-07-08).
   Vorher: Raleway 13px, harter Schatten, 0 Radius (Elementor-
   Defaults). Jetzt: DM Sans, Hairlines, Paper-BG, Gold-Akzent.
   Scoped auf das Header-Nav-Widget 6347df83 (Template 12349).
   ============================================================ */

/* ---- Desktop: Submenü-Panel unter WOMEN / MEN ---- */
.elementor-element-6347df83 .elementor-nav-menu--main ul.sub-menu {
    background: var(--mylook-surface);
    border: 1px solid var(--mylook-border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(13, 13, 13, 0.08);
    padding: 8px 0;
    margin-top: 10px;
    /* KEIN overflow: hidden — clippt das seitliche Flyout
       verschachtelter Submenues (Seasons). Radius wirkt trotzdem. */
    min-width: 220px;
}

/* Verschachteltes Flyout (z.B. WOMEN > SEASONS) buendig zum Parent */
.elementor-element-6347df83 .elementor-nav-menu--main ul.sub-menu ul.sub-menu {
    margin-top: -9px;
    margin-left: 6px;
}

/* Dropdown-Pfeil dreht nach oben, wenn offen (Desktop: hover,
   Mobile: smartmenus markiert offene Anker mit .highlighted) */
.elementor-element-6347df83 .sub-arrow i {
    display: inline-block;
    transition: transform 0.2s ease;
}
.elementor-element-6347df83 .elementor-nav-menu--main li.menu-item-has-children:hover > a .sub-arrow i,
.elementor-element-6347df83 a.highlighted .sub-arrow i {
    transform: rotate(180deg);
}
.elementor-element-6347df83 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
    font-family: var(--mylook-font-body) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mylook-text-soft) !important;
    background: transparent !important;
    padding: 11px 22px;
    transition: color 0.18s ease, padding-left 0.18s ease;
}
.elementor-element-6347df83 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
.elementor-element-6347df83 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active {
    color: var(--mylook-text) !important;
    padding-left: 28px;
    box-shadow: inset 3px 0 0 var(--mylook-accent-gold);
}

/* ---- Mobile: Menü-Dropdown ---- */
.elementor-element-6347df83 nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    background: var(--mylook-bg);
    border-top: 1px solid var(--mylook-border);
    box-shadow: 0 24px 48px rgba(13, 13, 13, 0.10);
    padding: 6px 0 0;
}
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown a.elementor-item,
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    font-family: var(--mylook-font-body) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mylook-text) !important;
    background: transparent !important;
    padding: 14px 22px;
}
/* Unterpunkte: eingerückt + gedämpft, nicht mehr uppercase-laut */
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
    color: var(--mylook-text-soft) !important;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 12px 22px 12px 36px;
    font-size: 12px;
}
/* Hairline-Trenner zwischen Top-Level-Punkten */
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown > ul > li + li {
    border-top: 1px solid var(--mylook-border);
}
/* Aktiv/Hover: Gold, wie der Unterstrich in der Desktop-Nav */
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
    color: var(--mylook-accent-gold) !important;
}

/* ---- Suchfeld im Mobile-Menü ans Paper-BG angleichen ---- */
.mylook-mobile-search {
    border-top: 1px solid var(--mylook-border);
    margin-top: 4px;
    padding: 14px 22px 18px;
    background: var(--mylook-bg);
}
.mylook-mobile-search input[type="search"] {
    font-family: var(--mylook-font-body);
    border-color: var(--mylook-border);
    background: var(--mylook-surface);
}
.mylook-mobile-search input[type="search"]::placeholder {
    color: var(--mylook-text-muted);
    letter-spacing: 0.02em;
}

/* Elementor nullt li-Borders (border: none) — Hairline-Trenner
   zwischen Top-Level-Punkten mit voller Deklaration erzwingen */
.elementor-element-6347df83 nav.elementor-nav-menu--dropdown > ul > li + li {
    border-top: 1px solid var(--mylook-border) !important;
}

/* Sprungmarken: der Elementor-Header ist auf allen Breakpoints sticky und 100px
   hoch, ein Anker-Sprung wuerde die Ueberschrift sonst darunter parken. */
h1[id], h2[id], h3[id], h4[id] {
    scroll-margin-top: 120px;
}

/* Sprung-Button "Jump to the shoes" ueber der Einleitung.
   Styling bewusst hier statt als Inline-Style im Block: Gutenberg validiert
   core/button gegen sein eigenes Save-Output, und handgeschriebene Styles
   fliegen als "unexpected or invalid content" auf. Der Block bleibt dadurch
   minimal und im Editor bearbeitbar. Pfeil als ::before, damit im Text keine
   Entity steht, die beim Speichern normalisiert wird. */
.wp-block-buttons.mylook-jump {
    /* Padding statt margin: als erstes Kind des Content-Containers wuerde ein
       oberer Rand herauskollabieren und wirkungslos bleiben. Die Sharing-Leiste
       darueber bringt rund 10px eigenen Abstand mit, deshalb oben etwas weniger,
       damit beide Luecken optisch gleich gross sind. */
    margin: 0;
    padding-top: 36px;
    padding-bottom: 46px;
}

.mylook-jump .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--mylook-ink, #0d0d0d);
    color: #ffffff;
    border-radius: 999px;
    padding: 18px 38px 18px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: background-color .18s ease;
}

.mylook-jump .wp-block-button__link::before {
    content: "\2193";
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
}

.mylook-jump .wp-block-button__link:hover,
.mylook-jump .wp-block-button__link:focus {
    background-color: #1a1a1a;
    color: #ffffff;
}