/* The baseline this theme used to inherit from a vendored template.
 *
 * grapevine-2026 was built on the eDocs commercial template, and 254KB of its
 * compiled CSS was loaded on every page so that about sixteen rules would
 * apply. Those rules are reproduced here, measured from the rendered page
 * rather than copied by eye: every declaration below closed a difference that
 * showed up when the vendored sheets were switched off and the computed styles
 * of every element on six templates were compared.
 *
 * Kept as its own file rather than folded into gvl-2026.css because the two
 * answer different questions. This is the baseline — what an unstyled element
 * looks like. gvl-2026.css is this theme's own components, and loads after.
 *
 * Bootstrap still loads before this and still provides the grid, the utilities
 * and the component classes. Only the eDocs layer is gone.
 */

/* ── Type ────────────────────────────────────────────────────────────────────
   One declaration here reaches further than everything else in the file: the
   letter-spacing below was measured on 119 separate elements, the font on 97
   and the colour on 60. Three inherited properties were most of the apparent
   difference between "with eDocs" and "without". */
html {
    font-family: var(--gvl-font);
    font-weight: 300;
    letter-spacing: 0.015rem;
    color: var(--gvl-text);
}

body {
    font-family: var(--gvl-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--gvl-text);
    background-color: var(--gvl-surface-sunk);
}

p {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gvl-text);
    letter-spacing: 0.015rem;
    margin-bottom: 15px;
}

a {
    color: var(--gvl-primary);
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

a:hover {
    color: var(--gvl-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gvl-title);
    font-family: var(--gvl-font);
    letter-spacing: 0.015rem;
    margin-top: 0;
}

h1, h2, h3, h4 { font-weight: 600; }

/* The template's heading scale, which is larger than Bootstrap's at every
   step. Several of this theme's own components size their headings explicitly
   and are unaffected; the ones that do not were relying on these. */
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.85rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.325rem; }

/* Set explicitly rather than inherited: a list inside a panel that sets its own
   colour would otherwise take the panel's. */
label { font-size: 0.875rem; }

form label {
    color: var(--gvl-title);
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* Fields inherit the page's letter-spacing; browsers do not give them one. */
input, textarea { letter-spacing: 0.015rem; }

li {
    color: var(--gvl-text);
    font-size: 0.875rem;
    letter-spacing: 0.015rem;
}

/* ── Layout ──────────────────────────────────────────────────────────────────
   Bootstrap's container tops out at 1140px; this template widened it, and every
   page was laid out against the wider one. Restored at the same breakpoints the
   vendored sheet used. */
@media only screen and (min-width: 992px) {
    .container { max-width: 990px; }
}

@media only screen and (min-width: 1200px) {
    .container { max-width: 1200px; }
}

@media only screen and (max-width: 1200px) {
    .container { max-width: 98%; }
}

@media only screen and (max-width: 400px) {
    .container { max-width: 100%; }
}

/* Sections carried the page's vertical rhythm. Several of this theme's own
   sections set their own padding and are unaffected; the rest were leaning on
   this. */
section {
    position: relative;
    padding: 30px 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Taller and wider than Bootstrap's, with a two-pixel border and a soft shadow.
   This is the single most visible thing the vendored sheet was doing: without
   it every button on the site loses 18px of height and a third of its padding. */
.btn {
    font-family: var(--gvl-font);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.75rem;
    letter-spacing: 0.03rem;
    min-width: 9.25rem;
    padding: 0.75rem 2.5rem;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease-in-out;
}

.btn:hover {
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* The focus ring is suppressed by the vendored sheet. Kept, because the theme's
   own components draw their own focus states and two rings is worse than one —
   but NOT suppressed for keyboard users, which the original did not distinguish. */
.btn:focus { box-shadow: none; outline: none; }
.btn:focus-visible { outline: 2px solid var(--gvl-primary-light); outline-offset: 2px; }

.btn-sm {
    padding: 0.5rem 2.25rem;
    font-size: 0.75rem;
    line-height: 1.75rem;
    min-width: 7.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.btn-sm:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); }

.btn-block { display: block !important; }

.btn-primary,
.btn-primary:focus {
    color: #fff !important;
    background-color: var(--gvl-primary) !important;
    border-color: var(--gvl-primary) !important;
}

.btn-primary:hover,
.btn-primary:active {
    color: #fff !important;
    background-color: var(--gvl-primary-dark) !important;
    border-color: var(--gvl-primary-dark) !important;
}

.btn-white {
    color: var(--gvl-title) !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn-link,
.btn-link:focus,
.btn-link:active {
    color: var(--gvl-primary);
    text-decoration: none;
    box-shadow: none;
}

.btn-link:hover { color: var(--gvl-primary-dark) !important; }

/* ── Fields ──────────────────────────────────────────────────────────────── */
.form-control {
    display: inline-block;
    width: 100%;
    height: 56px;
    padding: 15px 20px;
    font-family: var(--gvl-font);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.05rem;
    color: var(--gvl-text);
    background: var(--gvl-surface);
    background-clip: padding-box;
    border: 1px solid var(--gvl-line);
    border-radius: 0.25rem;
    box-shadow: none;
    appearance: none;
    transition: all ease-in-out 0.2s;
}

textarea.form-control { height: auto; min-height: 120px; }

/* A submit button is a fixed height, and its label sits on one line rather than
   on .btn's 1.75rem leading — which is what makes it the same height as the
   field above it. */
[type="submit"],
.btn-submit {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    line-height: 1;
}

select.form-control:not([size]):not([multiple]) { height: 56px; }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown-menu {
    min-width: 210px;
    width: max-content;
    color: var(--gvl-title);
    background-color: var(--gvl-surface);
    border: none;
    border-radius: 0.5rem;
    padding: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.dropdown-item {
    color: var(--gvl-title);
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
}

/* ── The top bar ─────────────────────────────────────────────────────────────
   These came from doc.css, the template's documentation skin, rather than from
   its main stylesheet — which is why they were nearly missed: the first pass
   read only style.css. */
.text-link,
.text-link:focus { color: var(--gvl-text); }
.text-link:hover { color: var(--gvl-primary); }

.top-header-nav .top-nav-item {
    font-size: 16px;
    font-weight: 500;
    color: var(--gvl-title);
    margin: 0 15px;
    line-height: 68px;
}

.top-header-nav .top-nav-item:hover { color: var(--gvl-primary); }
.top-header-nav .top-nav-item:last-child { margin-right: 0; }

/* The sign-in button: borderless, unlike every other button on the site. This
   one lived in doc.css rather than the main stylesheet. */
.top-page-button {
    margin-left: 15px;
    padding: 14px 38px !important;
    border: none !important;
}

/* ── The card ────────────────────────────────────────────────────────────────
   .promo-box and .blur are the template's names for a panel and its shadow.
   Kept as aliases of this theme's own .gvl-card so the markup can be renamed
   without a flag day, and so a child theme that copied a template still works. */
.promo-box,
.gvl-card {
    background-color: var(--gvl-surface);
    margin-bottom: 2rem;
    padding: 2.5rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

/* A lighter shadow than the panel's own, and the one the course cards use. */
.blur {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: 0.2s ease-in-out;
}

.promo-icon {
    font-size: 40px;
    border-radius: 0.5rem;
    margin-top: -10px;
    margin-bottom: 15px;
}

.box-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* ── The four spacing and size utilities this theme actually used ────────────
   The vendored sheet carried a full utility scale on a different footing from
   Bootstrap's: mb-30 is thirty pixels, not Bootstrap's 3rem step. Only the ones
   in use are reproduced — the rest went with the file. */
.mb-15 { margin-bottom: 15px !important; }
.mb-30 { margin-bottom: 30px !important; }
.ml-5  { margin-left: 5px !important; }
.mr-5  { margin-right: 5px !important; }
.fs-12 { font-size: 12px !important; }
.fs-20 { font-size: 20px !important; }