/* ── Logo ── */
.logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

/* Everything in the wordmark is sized in em from this one value, so the
   "Auto Repair" overlap stays locked to "Rockstar" at every size.
   It scales with width AND height, so short laptop screens get a smaller mark. */
.logo {
    --logo: clamp(2.3rem, min(5.3vw, 9.6vh), 5.2rem);
    font-size: var(--logo);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s var(--ease), filter 0.3s ease;
    cursor: pointer;
    padding-bottom: 0.06em;
}

.logo:hover,
.logo:focus-visible {
    transform: translateY(-1px) scale(1.015);
    filter: drop-shadow(0 0 14px rgba(224,100,42,0.45));
}

.logo .logo-name,
.logo .logo-sub { display: block; }

.logo .logo-name {
    font-size: 1em;
    line-height: 1;
    color: var(--orange);
    font-family: 'Averia Serif Libre', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    /* Extruded edge (light from above), then a warm glow into the smoke */
    text-shadow:
        0 1px 0 #9A3B07,
        0 2px 0 #7A2E05,
        0 3px 0 #5C2204,
        0 6px 10px rgba(0,0,0,0.65),
        0 0 34px rgba(224,100,42,0.38),
        0 0 80px rgba(193,74,9,0.18);
}

.logo .logo-sub {
    font-size: 0.373em;
    line-height: 1.15;
    color: var(--teal);
    font-family: 'Averia Serif Libre', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: -0.5em;
    text-indent: 3.2em;
    white-space: nowrap;
    text-shadow: 0 1px 0 #04594A, 0 3px 8px rgba(0,0,0,0.7), 0 0 22px rgba(9,166,136,0.35);
}

/* ── Contact box ── */
.contact-box {
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    color: var(--text);
    padding: clamp(6px, 0.9vh, 12px) clamp(10px, 1vw, 16px);
    background: var(--steel), var(--grain);
    border: 1px solid rgba(193,74,9,0.45);
    border-left: 3px solid var(--orange);
    border-radius: var(--r-card);
    box-shadow: var(--steel-edge), var(--steel-shadow);
    line-height: 1.45;
    font-size: clamp(0.72rem, min(0.82vw, 1.6vh), 0.92rem);
}

.contact-label {
    color: var(--orange-hot);
    font-family: 'Russo One', sans-serif;
    font-size: 0.86em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.contact-box a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 1px 0;
    color: var(--text);
    border-radius: 4px;
    transition: color 0.18s ease;
}

.contact-box a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-box a:hover,
.contact-box a:focus-visible { color: var(--teal-text); }

.contact-box .icon {
    color: var(--teal);
    width: 1.05em;
    height: 1.05em;
}

/* ── Map ── */
.map-box {
    justify-self: end;
    min-width: 0;
}

.map {
    position: relative;
    width: clamp(170px, 17vw, 270px);
    height: clamp(74px, min(7.4vw, 12.5vh), 112px);
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid rgba(193,74,9,0.45);
    box-shadow: var(--steel-edge), var(--steel-shadow);
    /* Drawn street grid: shows instantly while the live map waits */
    background:
        radial-gradient(circle at 50% 44%, rgba(224,100,42,0.28) 0 6px, transparent 7px),
        linear-gradient(115deg, transparent 47%, rgba(255,255,255,0.10) 47.5% 50%, transparent 50.5%),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.05) 22px 24px),
        repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,0.05) 30px 32px),
        linear-gradient(160deg, #1b1b1b 0%, #121212 100%);
}

.map-pin {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -85%);
    color: var(--orange-hot);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}

.map iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(35%) contrast(1.05) brightness(0.9);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.map iframe.ready { opacity: 1; }

/* Always-visible link on the bottom edge. Some browsers (Edge's Tracking
   Prevention) block the Google Maps frame, so the location stays reachable. */
.map-fallback-link {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 6px;
    background: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.92));
    color: var(--teal-text);
    font-size: clamp(0.64rem, 0.72vw, 0.76rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, background 0.2s ease;
}

.map-fallback-link .icon { width: 0.95em; height: 0.95em; }

.map-fallback-link:hover,
.map-fallback-link:focus-visible {
    color: #fff;
    background: rgba(193,74,9,0.92);
}