/* =============================================================
   KFC33 — CONTACT PAGE
   Page-specific styling for the Επικοινωνία page. Loaded after
   core.css. The source markup is sparse WordPress block content
   (an empty heading + a list of mostly-empty items). This file
   hides the empty placeholders and presents the three meaningful
   pieces — the support link, the description line, and the hours —
   as a single, centered "support card".

   Everything here is scoped to this page (contact.css only loads
   on contact.html); nothing global is redefined and core.css is
   left untouched.
   ============================================================= */

/* Content top-aligns under the header via core.css's .content (flex
   column, justify-content: flex-start) for spacing consistent with
   every other page — this page intentionally does NOT vertically
   center, which previously floated the title low under the header. */

/* -------------------------------------------------------------
   Hide empty / placeholder block elements
   ------------------------------------------------------------- */
.content .default-page-content > :is(h1, h2, p):empty {
    display: none;
}

/* -------------------------------------------------------------
   Support card — the block list becomes the card container
   ------------------------------------------------------------- */
/* This page is a bespoke support card, not generic prose — opt out
   of the central .default-page-content panel so only the inner card
   below is shown (core.css styles .default-page-content as a panel). */
.content .default-page-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    text-align: center;
    color: var(--c-ink);
    font-size: var(--fs-base);
    line-height: var(--lh);
}

.content .default-page-content .wp-block-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.25rem, 4vw, 1.75rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    list-style: none;
}

/* Primary CTA — the only <a> in the content is the support link.
   Styled outside @supports so it degrades to a real button even
   where :has() is unavailable. */
.content .default-page-content .wp-block-list li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

/* The label is wrapped in <strong> (and may carry other inline elements).
   core.css's `.default-page-content strong / a` would recolour it to
   var(--c-ink) — the page ink — which is the OPPOSITE of the pill's
   on-accent text, leaving the label dark-on-dark (invisible) on the accent
   pill while the icon (drawn with the link's currentColor) stays visible.
   Force every descendant to inherit the link's on-accent colour so the
   label always matches the icon and is legible in both light and dark. */
.content .default-page-content .wp-block-list li > a * {
    color: inherit;
}

.content .default-page-content .wp-block-list li > a::before {
    content: "";
    flex: none;
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.55 2 10.9c0 2.45 1.35 4.65 3.5 6.1-.2 1.3-.85 2.55-1.85 3.6 1.7-.2 3.4-.8 4.85-1.8 1.1.3 2.3.45 3.5.45 5.5 0 10-3.55 10-7.9S17.5 3 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.55 2 10.9c0 2.45 1.35 4.65 3.5 6.1-.2 1.3-.85 2.55-1.85 3.6 1.7-.2 3.4-.8 4.85-1.8 1.1.3 2.3.45 3.5.45 5.5 0 10-3.55 10-7.9S17.5 3 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.content .default-page-content .wp-block-list li > a:hover,
.content .default-page-content .wp-block-list li > a:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.content .default-page-content .wp-block-list li > a:active {
    transform: translateY(0);
}

/* Reveal only the three meaningful items (the support link and its
   two following siblings: description + hours), which also removes
   the whitespace-only <li> that :empty cannot match. Gated on :has()
   so unsupported browsers simply fall back to showing all items. */
@supports selector(:has(*)) {
    .content .default-page-content .wp-block-list > li {
        display: none;
        margin: 0;
    }

    .content .default-page-content .wp-block-list > li:has(> a) {
        display: block;
    }

    /* Description line — supporting copy */
    .content .default-page-content .wp-block-list > li:has(> a) + li {
        display: block;
        max-width: 40ch;
        margin-inline: auto;
        color: var(--c-ink-muted);
        font-family: var(--font-body);
        font-size: 0.92rem;
        line-height: 1.55;
    }

    /* Hours — availability pill */
    .content .default-page-content .wp-block-list > li:has(> a) + li + li {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.34rem 0.9rem;
        border: 1px solid var(--c-line);
        border-radius: var(--radius-pill);
        background: var(--c-hover-tint);
        color: var(--c-ink-soft);
        font-family: var(--font-body);
        font-size: 0.82rem;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .content .default-page-content .wp-block-list > li:has(> a) + li + li::before {
        content: "";
        flex: none;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--c-ink);
        box-shadow: 0 0 0 0 var(--c-pulse);
        animation: contact-live 2.4s ease-out infinite;
    }
}

/* -------------------------------------------------------------
   Entrance + live pulse
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .content > .general-ttl {
        animation: contact-rise 0.6s var(--ease) both;
    }

    .content > .default-page-content {
        animation: contact-rise 0.6s var(--ease) 0.09s both;
    }
}

@keyframes contact-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes contact-live {
    0% {
        box-shadow: 0 0 0 0 var(--c-pulse);
    }
    70% {
        box-shadow: 0 0 0 6px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}