/* =============================================================================
   H2J Company Info Widget — Front-end styles
   =============================================================================
   Widget "Boutique" : affiche les infos du siège OU d'une boutique physique
   dans la sidebar megamenu, le footer, ou tout autre contexte du registry.

   Rendu fidèle à la maquette de référence idyll.fr :
     Informations (titre gras avec icône Material)
     ss/sol des Boutiques de Cluny
     97233 SCHOELCHER
     Martinique
     Écrivez-nous : info@idyll.fr  (mailto:)

   Naming BEM : .h2j-cw (company widget) — court pour éviter les collisions CSS
   dans des contextes où on a déjà beaucoup de classes (sidebar megamenu).

   Variables CUBX consommées (avec fallbacks) :
     --cubx-text, --cubx-text-light, --cubx-accent, --cubx-primary
     --h2j-text, --h2j-text-light, --h2j-border, --h2j-primary (megamenu variant)

   Since v2.11.19
   v2.11.21 — Aligné sur le pattern .h2j-mm-links-group du h2j-megamenu.css
              pour harmonie visuelle dans le drawer avec les items Links group.
              Icône Material Icons ajoutée dans le titre (business / storefront).
   ============================================================================= */

/* ── Block root ────────────────────────────────────────────────────────── */
.h2j-cw {
    padding: 16px 0;
    font-family: inherit;
    line-height: 1.5;
    color: var(--cubx-text, #e2e8f0);
}

/* ── Title (h3) ────────────────────────────────────────────────────────── */
.h2j-cw__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    letter-spacing: 0;
}

/* v2.11.21 — Title icon (Material Icons). Taille par défaut 18px, calée sur
   le pattern .h2j-mm-links-group__icon du megamenu pour consistance. Surcharge
   possible par les variantes de contexte ci-dessous. */
.h2j-cw__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
    color: var(--h2j-text-light, rgba(255, 255, 255, 0.7));
    flex-shrink: 0;
}

.h2j-cw__title-label {
    /* inline — hérite taille/couleur du parent .h2j-cw__title */
}

/* ── Lines list (reset ul/li défaults) ───────────────────────────────── */
.h2j-cw__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.h2j-cw__line {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--cubx-text-light, rgba(255, 255, 255, 0.75));
}

/* Légère variation par type de ligne — permet un ajustement futur sans
   toucher au markup (ex: italique sur horaires, surlignage sur l'email, etc.) */
.h2j-cw__line--address     { /* défaut */ }
.h2j-cw__line--phone       { /* défaut */ }
.h2j-cw__line--email       { /* défaut */ }
.h2j-cw__line--hours       { margin-top: 6px; }
.h2j-cw__line--hours-extra { margin-top: 0; }

/* ── Links (tel / mailto) ─────────────────────────────────────────────── */
.h2j-cw__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.h2j-cw__link:hover,
.h2j-cw__link:focus-visible {
    color: var(--cubx-accent, #cfa0e9);
    text-decoration-color: currentColor;
}

/* ── Hours label (plus petit, discret) ───────────────────────────────── */
.h2j-cw__hours-label {
    font-weight: 600;
    opacity: 0.85;
    margin-right: 4px;
}
.h2j-cw__hours-value {
    /* inherit taille et couleur de .h2j-cw__line */
}

.h2j-cw__schedule {
    margin-top: 10px;
}

.h2jsched {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.2;
    flex-wrap: wrap;
}

.h2jsched--open {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

.h2jsched--closed {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.24);
    color: #92400e;
}

.h2jsched__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: currentColor;
}

.h2jsched__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.h2jsched__state {
    font-weight: 700;
}

.h2jsched__meta {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================================
   CONTEXT VARIANTS — adaptations selon où le widget est rendu
   ============================================================================= */

/* ── Variante megamenu sidebar ─────────────────────────────────────────── */
/* v2.11.21 — Aligné sur .h2j-mm-links-group du h2j-megamenu.css pour
   cohérence visuelle avec les items "Links group" adjacents du drawer
   ("Produit", "Notre société", etc.). Même padding (14px 20px 10px),
   même border-bottom, même tailles (title 15px/700, lines 13px),
   même couleurs (--h2j-text, --h2j-text-light), même hover (--cubx-accent). */
.h2j-cw--ctx-megamenu_sidebar {
    padding: 14px 20px 10px;
    border-top: none;
    border-bottom: 1px solid var(--h2j-border, #e5e7eb);
    color: var(--h2j-text, #1a1f2c);
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--h2j-text, #1a1f2c);
    margin: 0 0 8px;
    line-height: 1.3;
    text-transform: none;
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__title-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--h2j-text-light, #6b7280);
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__lines {
    gap: 0;
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__line {
    padding: 4px 0 4px 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--h2j-text, #1a1f2c);
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__line--hours {
    margin-top: 4px;
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__link {
    color: var(--h2j-text, #1a1f2c);
    text-decoration: none;
    transition: color 0.12s ease;
}
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__link:hover,
.h2j-cw--ctx-megamenu_sidebar .h2j-cw__link:focus-visible {
    color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
    text-decoration-color: currentColor;
    outline: none;
}

/* ── Variante footer (généralement clair ou neutre) ──────────────────── */
.h2j-cw--ctx-footer {
    padding: 20px 0;
}
.h2j-cw--ctx-footer .h2j-cw__title {
    font-size: 1rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.h2j-cw--ctx-footer .h2j-cw__title-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ── Variante drawer header (compact, sans padding vertical) ─────────── */
.h2j-cw--ctx-drawer_header {
    padding: 8px 12px;
}
.h2j-cw--ctx-drawer_header .h2j-cw__title {
    font-size: 0.875rem;
    margin-bottom: 4px;
}
.h2j-cw--ctx-drawer_header .h2j-cw__title-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
}
.h2j-cw--ctx-drawer_header .h2j-cw__line {
    font-size: 0.75rem;
}

/* =============================================================================
   MOBILE — ajustements responsive (< 768px)
   ============================================================================= */

@media (max-width: 768px) {
    .h2j-cw {
        padding: 14px 0;
    }
    .h2j-cw__title {
        font-size: 1.125rem;
    }
    .h2j-cw__line {
        font-size: 0.875rem;
    }
    /* v2.11.21 — En mobile le megamenu_sidebar garde son padding 14px 20px 10px
       pour rester strictement aligné sur le rendu des links_group adjacents.
       Seule la taille des lignes est rabotée légèrement pour la densité. */
    .h2j-cw--ctx-megamenu_sidebar .h2j-cw__line {
        font-size: 13px;
    }

    .h2jsched {
        padding: 7px 10px;
        font-size: 11.5px;
    }
}