/* ==========================================================================
   CCL brand theme
   Implements the Center for Creative Leadership digital style guide
   (https://style.ccl.org/design-guide/) — colours, typography, and the
   modern form/header/footer chrome shared across forms-web.
   ========================================================================== */

:root {
    /* Primary palette */
    --ccl-dark-blue: #003865;
    --ccl-center-blue: #2f5f95;
    --ccl-teal: #358ca2;
    --ccl-turquoise: #34bcaa;

    /* Primary tints */
    --ccl-dark-blue-25: #bfcdd8;
    --ccl-center-blue-25: #cbd7e4;
    --ccl-teal-25: #cce2e7;
    --ccl-turquoise-25: #cde9e6;

    /* Secondary accents */
    --ccl-purple: #a556a2;
    --ccl-green: #5e9d45;
    --ccl-yellow: #ffbb13;
    --ccl-coral: #ef5e4b;

    /* Neutrals */
    --ccl-soft-black: #3b3b3b;
    --ccl-grey: #9d9fa2;
    --ccl-grey-light: #e3e6e9;
    --ccl-surface: #ffffff;
    --ccl-page-bg: #f4f6f8;

    /* Type */
    --ccl-font-sans: "Noto Sans", "Segoe UI", Arial, Helvetica, sans-serif;
    --ccl-font-serif: "Lora", Georgia, "Times New Roman", serif;

    /* Tokens */
    --ccl-radius: 10px;
    --ccl-radius-sm: 6px;
    --ccl-shadow: 0 10px 30px rgba(0, 56, 101, 0.08);
    --ccl-shadow-sm: 0 2px 6px rgba(0, 56, 101, 0.06);
    --ccl-focus: 0 0 0 3px rgba(52, 188, 170, 0.35);
    --ccl-maxw: 1040px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--ccl-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ccl-soft-black);
    background: var(--ccl-page-bg);
}

h1, h2, h3, h4, h5, legend {
    font-family: var(--ccl-font-serif);
    color: var(--ccl-dark-blue);
    line-height: 1.25;
    margin: 0 0 0.5em;
    font-weight: 600;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--ccl-center-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--ccl-dark-blue);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.ccl-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--ccl-maxw);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.5rem;
}

/* --------------------------------------------------------------------------
   Site header / navigation
   -------------------------------------------------------------------------- */

.ccl-header {
    background: var(--ccl-surface);
    border-bottom: 3px solid var(--ccl-turquoise);
    box-shadow: var(--ccl-shadow-sm);
}

.ccl-header__inner {
    max-width: var(--ccl-maxw);
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ccl-header__logo img,
#logo {
    display: block;
    height: 54px;
    width: auto;
}

.ccl-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccl-nav a {
    color: var(--ccl-dark-blue);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ccl-nav a:hover {
    color: var(--ccl-teal);
    border-bottom-color: var(--ccl-turquoise);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Page hero / intro band
   -------------------------------------------------------------------------- */

.ccl-hero {
    background: linear-gradient(135deg, var(--ccl-dark-blue) 0%, var(--ccl-center-blue) 60%, var(--ccl-teal) 100%);
    color: #fff;
}

.ccl-hero__inner {
    max-width: var(--ccl-maxw);
    margin: 0 auto;
    padding: 3rem 1.25rem;
}

.ccl-hero h1 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.ccl-hero p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1rem;
    max-width: 60ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.ccl-card {
    background: var(--ccl-surface);
    border: 1px solid var(--ccl-grey-light);
    border-radius: var(--ccl-radius);
    box-shadow: var(--ccl-shadow);
    padding: 2rem 2.25rem;
    margin-bottom: 1.75rem;
}

.ccl-card__lead {
    font-size: 1.05rem;
    color: #4a4a4a;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

fieldset.ccl-fieldset {
    border: 1px solid var(--ccl-grey-light);
    border-radius: var(--ccl-radius);
    padding: 1.5rem 1.75rem 1.75rem;
    margin: 0 0 1.75rem;
    background: #fff;
}

fieldset.ccl-fieldset > legend {
    font-family: var(--ccl-font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ccl-teal);
    padding: 0 0.6rem;
    margin-left: -0.2rem;
}

/* Responsive two-column field grid */
.ccl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.75rem;
}

.ccl-grid--full > .ccl-field {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .ccl-grid {
        grid-template-columns: 1fr;
    }
}

.ccl-field {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.ccl-field label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ccl-dark-blue);
    margin-bottom: 0.35rem;
}

.required {
    color: var(--ccl-coral);
    font-weight: 700;
    margin-left: 2px;
}

/* Inputs / selects — modernised, full-width within their grid cell */
.ccl-field input[type="text"],
.ccl-field input:not([type]),
.ccl-field select,
input.form-control,
select.form-control {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ccl-soft-black);
    background: #fff;
    border: 1.5px solid var(--ccl-grey);
    border-radius: var(--ccl-radius-sm);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ccl-field input:focus,
.ccl-field select:focus,
.form-control:focus {
    outline: none;
    border-color: var(--ccl-teal);
    box-shadow: var(--ccl-focus);
}

.ccl-field input[readonly],
input.form-control[readonly] {
    background: #f6f8fa;
    cursor: pointer;
}

/* Read-only "plaintext" display fields (program location / dates / embassy) */
.form-control-plaintext,
.ccl-field input.ccl-readonly-plain {
    border: none !important;
    background: transparent !important;
    padding-left: 0;
    font-weight: 600;
    color: var(--ccl-dark-blue);
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ccl-btn,
input[type="submit"].ccl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ccl-font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ccl-dark-blue);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 2.4rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: var(--ccl-shadow-sm);
}

.ccl-btn:hover {
    background: var(--ccl-turquoise);
    color: var(--ccl-dark-blue);
    text-decoration: none;
    transform: translateY(-1px);
}

.ccl-btn:focus-visible {
    outline: none;
    box-shadow: var(--ccl-focus);
}

.ccl-btn--ghost {
    background: transparent;
    color: var(--ccl-dark-blue);
    border: 2px solid var(--ccl-dark-blue);
}

.ccl-btn--ghost:hover {
    background: var(--ccl-dark-blue);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */

.text-danger,
.field-validation-error,
#formErrors {
    color: var(--ccl-coral);
}

.input-validation-error {
    border-color: var(--ccl-coral) !important;
    box-shadow: 0 0 0 3px rgba(239, 94, 75, 0.18);
}

.validation-summary-errors {
    background: #fdf0ee;
    border: 1px solid var(--ccl-coral);
    border-left: 5px solid var(--ccl-coral);
    border-radius: var(--ccl-radius-sm);
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
    color: #8c2c20;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

#formErrors ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ccl-footer {
    flex-shrink: 0;
    background: var(--ccl-dark-blue);
    color: rgba(255, 255, 255, 0.85);
    margin-top: auto;
}

.ccl-footer__inner {
    max-width: var(--ccl-maxw);
    margin: 0 auto;
    padding: 1.75rem 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.8;
}

.ccl-footer a {
    color: #fff;
    font-weight: 600;
}

.ccl-footer a:hover {
    color: var(--ccl-turquoise);
    text-decoration: none;
}

.ccl-footer__sep {
    color: var(--ccl-turquoise);
    margin: 0 0.5rem;
}

/* --------------------------------------------------------------------------
   jQuery UI datepicker — brand reskin
   -------------------------------------------------------------------------- */

#ui-datepicker-div.ui-datepicker {
    width: 18em;
    padding: 0.5em;
    border: 1px solid var(--ccl-grey-light);
    border-radius: var(--ccl-radius);
    box-shadow: var(--ccl-shadow);
    background: #fff;
    font-family: var(--ccl-font-sans);
    font-size: 0.9rem;
    z-index: 1200 !important;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--ccl-dark-blue);
    color: #fff;
    border: none;
    border-radius: var(--ccl-radius-sm);
    padding: 0.4em 0;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title select {
    color: var(--ccl-dark-blue);
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-title { color: #fff; }

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    top: 0.5em;
    filter: brightness(0) invert(1);
}

.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.4em 0 0;
}

.ui-datepicker th {
    color: var(--ccl-teal);
    font-weight: 700;
    padding: 0.3em;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    text-align: center;
    padding: 0.45em;
    border-radius: var(--ccl-radius-sm);
    color: var(--ccl-soft-black);
    border: none;
    text-decoration: none;
}

.ui-datepicker td a:hover {
    background: var(--ccl-turquoise-25);
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td .ui-state-highlight {
    background: var(--ccl-teal);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .ccl-header,
    .ccl-footer,
    .ccl-nav,
    #screenDiv .ccl-actions {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .ccl-card {
        box-shadow: none;
        border: none;
    }
}

/* Utility */
.text-center { text-align: center; }
.ccl-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}
.ccl-stack > * + * { margin-top: 1rem; }