/* ==============================
   Greenlight additions
   Layout-only tweaks on top of the Resonance template.
   Colours and type come from the template tokens; no new visual styles.
   ============================== */

/* Body grey: restore the template's own default (#757575, 4.6:1 on white).
   demo-elegant.css lightens it to #777, which falls just below the WCAG AA
   4.5:1 contrast minimum. Visually identical. */
:root {
    --color-gray-1: #757575;
}

/* Nav "Free consultation" button: the template's white border button
   is invisible once the bar turns white after scroll (light-after-scroll). */
.main-nav:not(.dark) .nav-cta .btn-border-w,
.main-nav.mobile-on .nav-cta .btn-border-w {
    color: var(--color-dark-1);
    border-color: currentColor;
}

/* Marquees use 12 copies instead of the template's 24, so halve the
   duration to keep the template's original speed. */
.marquee-style-1 .marquee-animation {
    animation-duration: 18.5s;
}

/* "Where you can study": inline country list separated by middots. */
.destinations-list {
    list-style: none;
    padding: 0;
    line-height: 2;
}
.destinations-list li {
    display: inline;
}
.destinations-list li:not(:last-child)::after {
    content: " · ";
    color: var(--color-gray-1);
}

/* Nav layout follows "main-multi-page-slider-background" (centred menu +
   right-hand items-end group).
   demo-elegant.css sets the menu item margin to 22px at every width, which
   cancels the template's own responsive spacing in style-responsive.css.
   Re-apply those template values (16px at <=1366px, 11px at <=1200px) so
   our 7 items fit between the logo and the button. */
@media only screen and (max-width: 1366px) {
    .inner-nav ul li {
        margin: 0 16px;
    }
}
@media only screen and (max-width: 1200px) {
    .inner-nav ul li {
        margin: 0 11px;
    }
}
/* Between 1025px and 1080px the button still collides with the menu; hide
   it there (Contact stays in the menu, and it returns in the mobile menu). */
@media only screen and (max-width: 1080px) {
    .main-nav:not(.mobile-on) .inner-nav .nav-cta {
        display: none;
    }
}

/* Services page: bullet lists inside the template's centred services-3 cards. */
.services-3-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.services-3-list li {
    padding: 6px 0;
    border-top: 1px solid var(--color-gray-light-3, #e5e5e5);
}
.services-3-text .form-tip {
    text-align: left;
}

/* Institutions page: long name lists flow into columns. */
.institution-list {
    list-style: none;
    padding: 0;
    columns: 3 220px;
    column-gap: 30px;
    color: var(--color-gray-1);
    line-height: 1.6;
}
.institution-list li {
    break-inside: avoid;
    padding: 2px 0;
}
.institution-region {
    scroll-margin-top: 80px;
}

/* Long-form articles: scholarships, terms, privacy (elegant-blog-single).
   The template has no table component; style Bootstrap's .table with the
   template's type scale and light-grey borders. */
.scholarship-table {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray-1);
}
.scholarship-table thead th {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dark-1);
    border-bottom: 1px solid var(--color-gray-light-4, #d5d5d5);
}
.scholarship-table th,
.scholarship-table td {
    padding: 12px 10px;
    border-color: var(--color-gray-light-3, #e5e5e5);
    vertical-align: top;
}
.scholarship-table tbody th {
    font-weight: 400;
}
.article-body {
    font-size: 17px;
    color: var(--color-gray-1);
}
.article-body h2,
.article-body h3,
.article-body strong {
    color: var(--color-dark-1);
}
.article-body h2[id] {
    scroll-margin-top: 90px;
}
.article-body h3 {
    font-size: 19px;
    margin-top: 1.2em;
}
.article-body .alert {
    font-size: 15px;
    line-height: 1.7;
}
.scholarship-checklist {
    list-style: none;
    padding-left: 0;
}
.scholarship-checklist li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 8px;
}
.scholarship-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-dark-1);
    border-radius: 3px;
}

/* Contact form: spam-trap field (hidden from people, still in the DOM). */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Result messages for visitors without JavaScript (contact.php redirects
   to #message-sent / #message-error). */
.form-result {
    display: none;
    margin-bottom: 30px;
}
.form-result:target {
    display: block;
}
.contact-form [aria-invalid="true"] {
    border-color: #c0392b;
}
/* Sending indicator inside the template's .loading-spinner wrapper. */
.loading-spinner .spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-gray-light-3, #e5e5e5);
    border-top-color: var(--color-dark-1);
    border-radius: 50%;
    animation: gl-spin 0.8s linear infinite;
}
@keyframes gl-spin {
    to { transform: rotate(360deg); }
}