/* ==========================================================================
   Corner radius policy
   --------------------------------------------------------------------------
   This file previously forced `border-radius: 0` across the public site.
   The current brand specification asks for small, restrained radii instead —
   "slightly rounded, not excessively pill-shaped" — so the override is gone
   and radii now come from the tokens in gpdc-brand.css:

       --gpdc-radius-sm  4px   badges, chips
       --gpdc-radius     6px   buttons, inputs
       --gpdc-radius-md  8px   cards, media
       --gpdc-radius-lg 12px   large panels

   To go back to square corners, change those four tokens to 0 — that is now
   the single lever, rather than an !important sledgehammer over every
   element on the page.

   What remains here is the one thing worth keeping from before: form
   controls that browsers style themselves, so an <input> matches the rest of
   the system instead of inheriting the platform's own corner and shading.
   ========================================================================== */

body:not(.gpdc-portal) input:not([type="checkbox"]):not([type="radio"]),
body:not(.gpdc-portal) textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--gpdc-radius);
}

/*
   Selects need their own rule, not the one above.

   `appearance: none` removes the browser's dropdown arrow along with its
   styling — so applying it to <select> without drawing a replacement leaves a
   control with no affordance at all. That is exactly what happened here. The
   arrow below is an inline SVG in the brand navy, with padding reserved on
   the trailing edge so a long option label cannot run underneath it.
*/
body:not(.gpdc-portal) select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--gpdc-radius);
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23092548' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    background-color: var(--gpdc-white);
    cursor: pointer;
}

/* Right-to-left locales put the arrow on the other side. */
[dir="rtl"] body:not(.gpdc-portal) select,
body:not(.gpdc-portal) [dir="rtl"] select {
    padding-right: 14px;
    padding-left: 40px;
    background-position: left 14px center;
}

body:not(.gpdc-portal) select:focus {
    outline: none;
    border-color: var(--gpdc-blue);
    box-shadow: 0 0 0 3px rgba(9, 97, 174, .12);
}

body:not(.gpdc-portal) select:disabled {
    background-color: var(--gpdc-tint);
    color: var(--gpdc-muted);
    cursor: not-allowed;
}

/* A select that carries no border class of its own still needs to look like a
   field rather than bare text on the page. */
body:not(.gpdc-portal) select:not([class*="border"]):not(.form-input):not(.form-select) {
    border: 1px solid var(--gpdc-border);
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 14px;
    font-size: 14px;
    color: var(--gpdc-ink);
}

/* Cropped images stay cropped: only the corner shape changes, so avatars and
   thumbnails keep filling their frame rather than letter-boxing. */
body:not(.gpdc-portal) [class*="rounded"] > img {
    object-fit: cover;
}