/* ===================================================
   williamfaitel.com/call/ - "Have Nova call you"
   Rides on css/styles.css tokens. Mobile-first, sharp corners.
   =================================================== */

/* The hidden attribute must win over the display rules below and in
   styles.css (.contact-form is display:flex, which would otherwise keep a
   "hidden" form on screen). */
.call [hidden] {
    display: none !important;
}

/* --- Slide-out menu below 1200px ---
   styles.css parks the closed menu off-screen with a transform only, which
   leaves its 12 links in the tab order. Hide it from the keyboard (and screen
   readers) while it is closed; the delay lets the slide-out finish first. */
@media (max-width: 1199.98px) {
    .nav__menu {
        visibility: hidden;
        transition: transform 300ms ease, visibility 0s linear 300ms;
    }

    .nav__menu--open {
        visibility: visible;
        transition: transform 300ms ease, visibility 0s;
    }
}

.nav__link--call[aria-current="page"] {
    color: var(--color-white);
}

/* --- Page --- */
.call {
    color-scheme: dark;
    padding-top: calc(var(--space-3xl) + var(--space-sm));
}

.call .section__heading {
    margin-bottom: var(--space-md);
}

.call .section__bio {
    margin-bottom: var(--space-sm);
}

/* The business name behind an emailed link. When the page has a ?t= token the
   line is on screen from the start with its text hidden, so the name arrives
   without moving anything. One line, trimmed with an ellipsis, so a long name
   cannot change the height either. */
.call__for {
    margin: var(--space-md) 0 0;
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-accent-tint);
    border-left: 3px solid var(--color-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call__for--pending {
    visibility: hidden;
}

.call-noscript {
    margin: var(--space-md) 0;
    padding: var(--space-sm);
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
}

.call-noscript a,
.call-alt a,
.call-hint a,
.contact-form__status a,
.call-result a {
    color: var(--color-accent-light);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.call-noscript a:hover,
.call-alt a:hover,
.call-hint a:hover,
.contact-form__status a:hover,
.call-result a:hover {
    color: var(--color-white);
}

.call-noscript a:focus-visible,
.call-alt a:focus-visible,
.call-hint a:focus-visible,
.contact-form__status a:focus-visible,
.call-result a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* --- Form --- */
.call-form {
    margin: var(--space-lg) 0 var(--space-xl);
}

.contact-form [aria-invalid="true"] {
    border-color: var(--color-accent-light);
}

/* The consent box. styles.css styles every .contact-form input as a full-width
   text field, so the checkbox opts out of that here. */
.call-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition);
}

.call-consent:focus-within,
.call-consent:has(input:checked) {
    border-color: var(--color-accent);
}

.call-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    min-height: 0;
    margin-top: 2px;
    padding: 0;
    border: none;
    background: none;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.call-consent input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.call-consent label {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text);
    cursor: pointer;
}

/* Room for Cloudflare's 300 x 65 widget before it loads, so nothing jumps.
   On very narrow phones it switches to the compact size (call.js), which is taller. */
.call-turnstile {
    min-height: 65px;
}

@media (max-width: 339px) {
    .call-turnstile {
        min-height: 140px;
    }
}

/* The robot-check box takes focus (script only) when the button is pressed before it is done. */
.call-turnstile:focus {
    outline: none;
}

.call-turnstile:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Phone numbers that must never break across lines. */
.call-nowrap {
    white-space: nowrap;
}

/* The gated button is dimmed with aria-disabled (not disabled) so it stays focusable and announced.
   styles.css only switches hover and press off for :disabled, so switch them off here too. */
.call-form .btn--primary[aria-disabled="true"] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.call-form .btn--primary[aria-disabled="true"]:hover,
.call-form .btn--primary[aria-disabled="true"]:active {
    background: var(--color-accent-dark);
    transform: none;
}

.call-form .btn--primary[aria-disabled="true"]::after {
    display: none;
}

.call-hint {
    margin: calc(var(--space-xs) * -1) 0 0;
    min-height: 1.5em;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Room for two lines of result text. */
.call-form .contact-form__status {
    min-height: 3em;
}

/* --- Result --- */
.call-result {
    margin: var(--space-xl) 0;
    padding: var(--space-lg) var(--space-md);
    text-align: left;
    background: var(--color-accent-tint);
    border: 1px solid var(--color-accent);
    border-left-width: 4px;
}

.call-result:focus {
    outline: none;
}

.call-result:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.call-result__main {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
}

.call-result__note {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
}

/* --- Small print --- */
.call-alt,
.call-fine {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.call-fine {
    font-size: 0.8125rem;
}