/*
Theme Name: Athestate Child
Theme URI: https://ath.estate
Description: Child theme for Houzez - Athestate customizations (ATHESTATE text, logo sizing)
Author: Athestate
Template: houzez
Version: 1.0.0
*/

/* Import parent theme styles */
@import url("../houzez/style.css");

/* ========================================================================
   HEADER - ATHESTATE TEXT + LOGO STYLING
   ======================================================================== */

/* Prevent logo from being stretched */
.header-v5 .logo img,
.houzez-header .logo img {
    max-width: 200px;
    width: auto;
    height: 50px;
    object-fit: contain;
}

/* ATHESTATE text container */
.as-brand-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 0;
    position: relative;
    width: 100% !important;
    max-width: none !important;
}

/* Logo image: pulled out of flex flow, centered horizontally in header */
.as-brand-wrap > a:nth-of-type(2) {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.as-brand-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #0A1F3D;
    letter-spacing: 1.5px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.as-brand-text a {
    color: #0A1F3D;
    text-decoration: none;
    transition: color 0.2s ease;
}

.as-brand-text a:hover {
    color: #C8A95B;
}

/* Tablet (max-width: 991px) - reduce text size, keep both */
@media (max-width: 991px) {
    .as-brand-text {
        font-size: 18px;
    }
    .as-brand-wrap {
        gap: 10px;
    }
}

/* ========================================================================
   HEADER MOBILE (< 992px) - meme marque que le bureau
   ----------------------------------------------------------------
   Houzez sert deux templates distincts : template-parts/header/partials/
   logo.php (bureau, .header-v5) et .../logo-mobile.php (mobile,
   .header-mobile). Les deux sont surcharges par le theme enfant, donc le
   mot ATHESTATE existe des les deux cotes.

   Aucune media query ici : .header-mobile est en `display:none !important`
   au-dessus de 992px (regle du theme parent), donc toute regle scopee a
   .header-mobile est inerte sur le bureau. On evite ainsi une divergence
   de breakpoint si le parent change le sien.

   Sur mobile le mot et l'icone sont centres EN TANT QUE PAIRE (le bureau
   centre l'icone seule, le mot reste a gauche via position:absolute).
   Il faut donc neutraliser le centrage absolu herite de .as-brand-wrap.
   ======================================================================== */

/* .header-mobile .logo { margin: 0 auto } vient du parent : on garde le
   logo centre, mais la largeur est desormais intrinseque (pas 100% !important)
   pour que le couple mot+icone soit centre comme un bloc. */
.header-mobile .as-brand-wrap {
    width: auto !important;
    max-width: none !important;
    justify-content: center;
}

/* neutralise le centrage absolu du logo (reserve au bureau) */
.header-mobile .as-brand-wrap > a:nth-of-type(2) {
    position: static !important;
    top: auto;
    left: auto;
    transform: none !important;
}

/* Filet de securite : si la largeur mobile est de nouveau saisie dans le
   dashboard avec un ratio faux, le logo se letterbox au lieu de s'ecraser.
   La taille reste pilotee par le dashboard, on ne force rien ici. */
.header-mobile .logo img,
.header-mobile .as-brand-wrap img {
    object-fit: contain;
}

/* Logo LEFT alignment for header-v5 (was center via space-between) */
.header-v5 .header-top .d-flex {
    justify-content: flex-start !important;
}

.header-v5 .header-top .as-brand-wrap {
    flex: 0 0 auto;
}

/* Push user-nav to the right while keeping the logo on the left */
.header-v5 .header-top .login-register {
    margin-left: auto !important;
}

/* Hide the empty social-icons slot (it was consuming 1/3 of header width) */
.header-v5 .header-social-icons {
    display: none !important;
}

/* Make sure logo container uses the brand wrapper */
.logo {
    display: flex;
    align-items: center;
}

.logo .as-brand-text {
    margin-right: 15px;
}

/* ========================================================================
   HERO (as-hero) - design-system background, option-driven image
   ----------------------------------------------------------------
   The hero section carries the data-id sec_grt (first section of the 8
   custom pages built by pages/build_rich_pages.js). We target sections
   with _css_classes == 'as-hero' the DOM-robust way: Elementor copies
   _elementor settings into data-settings JSON, but for reliability we
   ALSO match by Elementor setting attr rendered in markup:
   - .as-hero matches when themes/plugins add it (widgets)
   - [data-settings*="as-hero"] matches every Elementor element whose
     saved settings contain the class (sections included) — set by the
     builder, theme-agnostic, no hardcoded IDs.
   The image comes from the WP option 'athestate_hero_image' injected as
   --as-hero-image by functions.php. No image yet = clean navy gradient.
   ======================================================================== */

[data-settings*="as-hero"] {
    position: relative;
    background-color: #0A1F3D !important;
    background-image:
        linear-gradient(135deg, rgba(10,31,61,0.55) 0%, rgba(10,31,61,0.85) 100%),
        var(--as-hero-image, none) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* neutralize any leftover Elementor overlay on the hero */
[data-settings*="as-hero"] > .elementor-background-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* readable hero text on both navy and photo variants */
[data-settings*="as-hero"] .elementor-heading-title { text-shadow: 0 1px 8px rgba(10, 31, 61, 0.35); }

/* alias: same rules when the class IS present (widgets / future pages) */
.as-hero {
    position: relative;
    background-color: #0A1F3D;
    background-image:
        linear-gradient(135deg, rgba(10,31,61,0.55) 0%, rgba(10,31,61,0.85) 100%),
        var(--as-hero-image, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.as-hero > .elementor-background-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
}

.as-hero .elementor-heading-title { text-shadow: 0 1px 8px rgba(10, 31, 61, 0.35); }

/* ========================================================================
   ACCESSIBILITY - skip-link + focus visibility
   ======================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px 0 0 -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link.screen-reader-text:focus {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    clip: auto;
    padding: 10px 18px;
    background: #0A1F3D;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(10, 31, 61, 0.35);
}

:focus-visible {
    outline: 2px solid #C8A95B;
    outline-offset: 2px;
}

/* ========================================================================
   COOKIE BANNER
   ======================================================================== */

.as-cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    max-width: 640px;
    width: calc(100% - 32px);
    background: #0A1F3D;
    color: #FFFFFF;
    padding: 18px 22px;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(10, 31, 61, 0.4);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.as-cookie-banner p { margin: 0 0 12px; }

.as-cookie-banner a { color: #C8A95B; text-decoration: underline; }

.as-cookie-actions { display: flex; gap: 10px; }

.as-cookie-btn {
    border: 0;
    border-radius: 4px;
    padding: 9px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.as-cookie-accept { background: #C8A95B; color: #0A1F3D; }
.as-cookie-accept:hover { background: #B8994B; }
.as-cookie-refuse { background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.45); }
.as-cookie-refuse:hover { border-color: #FFFFFF; }