/* ==========================================================================
   Kapcsolati dobozok — frontend stílusok
   ========================================================================== */

/* Közös alap (mindkét verzió): betűtípus. A rács/gap csak a grid verzióra. */
.ss-kapcsolat {
    font-family: Poppins, sans-serif;
}

/* GRID verzió (alapértelmezett) — ikonos kártyák rácsban */
.ss-kapcsolat--grid {
    /* A gap-et inline CSS változóval állítjuk be adminból (alapértelmezett 18px). */
    --ss-k-gap: 18px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ss-k-gap);
}

/* ==========================================================================
   DOBOZ
   ========================================================================== */
.ss-kapcsolat-box {
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid #e4e2db;
    border-radius: 22px;
    padding: 34px 30px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

/* Kattintható dobozoknál hover emelés + finom árnyék (a példa nem tartalmazta,
   de ez prémium érzetet ad a Telefon/E-mail/Iroda linkeknek). */
.ss-kapcsolat-box[href]:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -28px rgba(21, 24, 29, 0.25);
    border-color: #d6d3c8;
}

/* ==========================================================================
   IKON (kerekített zöldes háttérrel)
   ========================================================================== */
.ss-kapcsolat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #e7f8f1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #10b989;
}

.ss-kapcsolat-icon svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   SZÖVEGEK
   ========================================================================== */

/* Kis címke az ikon felett („Telefon", „E-mail" stb.) */
.ss-kapcsolat-label {
    font-size: 13px;
    color: #98a0a8;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Fő érték (nagy, félkövér) — pl. „+36 1 200 0000" */
.ss-kapcsolat-value {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #15181d;
}

/* Leírás a fő érték alatt (kis szürke) — pl. „H–P: 8:00–17:00" */
.ss-kapcsolat-desc {
    color: #565b63;
    font-size: 14px;
    margin-top: 6px;
}

/* ==========================================================================
   ÜRES ÁLLAPOT
   ========================================================================== */
.ss-kapcsolat-ures {
    font-family: Poppins, sans-serif;
    color: #565b63;
    text-align: center;
    padding: 40px 20px;
}

/* Sötét láblécen a doboz színe — ezt öröklik a value ÉS a desc is,
   így a kiegészítő szöveg („Egressy út 27–29. (GDN Zugló)") nem lesz
   más színű, mint a fő érték felette. */
.ss-kapcsolat.ss-kapcsolat--footer .ss-kapcsolat-fbox {
    color: #ffffffd4;
}

.ss-kapcsolat.ss-kapcsolat--footer .ss-kapcsolat-fvalue {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: color 0.2s ease;
}

/* ==========================================================================
   REZPONZÍV
   ========================================================================== */

/* Tableten max 2 oszlop */
@media (max-width: 1024px) {
    .ss-kapcsolat--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobilon 1 oszlop */
@media (max-width: 600px) {
    .ss-kapcsolat--grid {
        grid-template-columns: 1fr;
    }

    .ss-kapcsolat-box {
        padding: 26px 24px;
    }
}

/* ==========================================================================
   FOOTER verzió — kompakt függőleges lista lábléchez
   Használat: [ss_kapcsolat style="footer"]
   ========================================================================== */
.ss-kapcsolat--footer {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ss-kapcsolat-fbox {
    text-decoration: none;
    /* Alapértelmezett szövegszín — value és desc egyaránt örökli ezt.
       Sötét láblécen az egyedi szabály lent felülírja #ffffffd4-re. */
    color: #15181d;
    transition: opacity 0.2s ease;
}

/* Kattintható blokkoknál (Telefon, E-mail, Iroda) finom hover — a linkelt
   érték színe vált zöldre, vizuális visszajelzésként. */
.ss-kapcsolat-fbox[href]:hover .ss-kapcsolat-fvalue {
    color: #10b989;
}

/* Címke — kiemelve: kicsit nagyobb, félkövér, halvány szürke.
   Ez a kis fejléc a blokk felett („Telefonszám", „E-mail" stb.). */
.ss-kapcsolat-flabel {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #98a0a8;
    margin-bottom: 4px;
}

/* Fő érték — alatta a címkének, normál súly.
   Ez a tényleges adat (telefonszám, e-mail, cím).
   A színt a fbox-tól örökli, így value és desc konzisztensek, és a
   lábléc háttérszínéhez igazítható egyetlen helyen. */
.ss-kapcsolat-fvalue {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: inherit;
    transition: color 0.2s ease;
}

/* Leírás — a fő érték alatt (pl. utca, épület, kiegészítés).
   Ugyanazt a színt örökli, mint a fő érték — így „Egressy út 27–29. (GDN Zugló)"
   nem lesz más színű, mint a cím felette. */
.ss-kapcsolat-fdesc {
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    margin-top: 2px;
}

/* ==========================================================================
   [ss_menu] — WordPress menü footer stílusban
   Használat: [ss_menu id="5"]
   Függőleges lista, Poppins betű, hoverre zöld — illeszkedik a footer
   kapcsolat linkekhez. A színt a konténer örökli (color: inherit).
   ========================================================================== */
.ss-menu--footer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* A konténer nem ad saját színt — örökli a szülőtől (pl. sötét lábléc
       color: #fff; beállítása). A linkek color: inherit; erre támaszkodik. */
}

.ss-menu-link {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    color: #ffffffd4;
    transition: color 0.2s ease;
}

/* Hoverre zöld — ugyanaz, mint a footer kapcsolat linkeknél. */
.ss-menu-link:hover {
    color: #10b989;
}