/* ProForge custom CSS for the Streamline client theme.
   Linked from the html_custom layout overrides (layout_public / layout_default),
   after huraga.css. No !important: selectors win on specificity.
   See /workspace/infra-docs/CHANGES.md on the box. */

/* ---------- Always light ----------
   The stock layouts declared <meta name="color-scheme" content="light dark">.
   With an OS dark preference the page (and the WordPress-embedded iframe)
   switched to a dark canvas while the content stayed light-themed, which left
   dark text on black. Pin the used color scheme to light everywhere. */
:root,
[data-bs-theme] {
    color-scheme: light;
}

/* ---------- Domain Configuration (hosting order form) ----------
   Hooks come from html_custom/mod_servicehosting_order_form.html.twig.
   .com only: Register/Transfer show the name field with a fixed ".com"
   suffix (no TLD dropdown). Desktop keeps the compact side-tab layout:
   tabs | [name .com] [Check] on one row. These rules replace the inline
   max-width styles and the flex-column / border-end / me-3 utilities that
   used to be in the markup. */
.sl-domain-tabs {
    flex-direction: column;
    flex-shrink: 0;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    margin-right: 1rem;
}
.sl-domain-row {
    align-items: center;
}
/* Desktop side tabs: let the long "Keep my domain where it is" label wrap
   instead of squeezing the field. */
.sl-domain-tabs {
    max-width: 10rem;
}
.sl-domain-group {
    max-width: 320px;
}
.sl-domain-group.sl-domain-group-wide {
    max-width: 420px;
}
.sl-domain-own {
    max-width: 320px;
}
.sl-domain .sl-domain-group > .sl-domain-suffix {
    /* Match the compact form-control-sm field on desktop (this build has no
       .input-group-sm > .input-group-text rule). */
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}

/* Inline check error under the field (replaces the centered toast for
   domain checks; see showDomainError in the form override). */
.sl-domain .sl-domain-error {
    margin: .5rem 0 0;
    font-size: .875rem;
    color: var(--bs-form-invalid-color, var(--bs-danger));
}
.sl-domain .sl-domain-error[hidden] {
    display: none;
}

/* Phones: stack tabs above the field, field full width, Check below it. */
@media (max-width: 575.98px) {
    .sl-domain {
        flex-direction: column;
    }
    .sl-domain .sl-domain-tabs {
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
        margin-right: 0;
        margin-bottom: .75rem;
        padding-bottom: .75rem;
    }
    .sl-domain .sl-domain-tabs .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    .sl-domain .sl-domain-row {
        flex-direction: column;
        align-items: stretch;
    }
    .sl-domain .sl-domain-group,
    .sl-domain .sl-domain-own {
        width: 100%;
        max-width: none;
    }
    .sl-domain .sl-domain-check {
        width: 100%;
    }
}

/* Comfortable tap targets, and 16px text so iOS Safari does not zoom on
   focus: phones, plus any touch-first device (tablets). Selectors are
   specific enough to beat Bootstrap's .input-group-sm > * sizing. */
@media (max-width: 575.98px), (pointer: coarse) {
    .sl-domain .sl-domain-input,
    .sl-domain .sl-domain-group > .sl-domain-input,
    .sl-domain .sl-domain-group > .sl-domain-suffix,
    .sl-domain .sl-domain-check {
        min-height: 48px;
        font-size: 1rem;
    }
    .sl-domain .sl-domain-input,
    .sl-domain .sl-domain-group > .sl-domain-input,
    .sl-domain .sl-domain-group > .sl-domain-suffix {
        padding: .625rem .875rem;
    }
    .sl-domain .sl-domain-check {
        padding: .625rem 1rem;
    }
}