/* ==========================================================================
   CORE STYLESHEET — keelesu.com content pages
   --------------------------------------------------------------------------
   Shared structural styles for cards, accordions, tile buttons and the
   team grid, reused across KPA, ASK and any future section.

   Brand colours are NOT set here. Every colour that should differ between
   sections is exposed as a CSS custom property with a sensible fallback
   below. A theme stylesheet (kpa-theme.css, ask-theme.css, ...) only needs
   to redeclare the variables it wants to change.

   LOAD ORDER: core.css must be linked/imported BEFORE the theme file, so
   the theme's variable values can override these fallbacks.
   ========================================================================== */

:root {
    --accent: #F4AF23;      /* card heading + accordion hover background */
    --accent-text: #000000; /* text/icon colour on --accent */
    --link-color: #2661bf;  /* links inside cards and accordions */
    --title-bg: #F4AF23;    /* #title-section banner background */
    --title-text: #F4AF23;  /* #title-section banner text */
    --btn-bg: #2b0e48;      /* tile/quick-link button background */

    /* ---- Opt-in variables (new) ----
       Unset by default so KPA/ASK render exactly as before. A theme sets
       these to switch a section over to the "outline" style used on the
       Feedback pages: transparent banner + accent underline, white card
       header + accent underline, and a solid icon badge. */
    --title-border: none;                        /* banner bottom border, e.g. 6px solid var(--accent) */
    --card-header-bg: var(--accent);              /* card h2 background */
    --card-header-text: var(--accent-text);        /* card h2 text/icon colour */
    --card-header-border: none;                    /* card h2 bottom border, e.g. 4px solid var(--accent) */
    --icon-badge-bg: transparent;                  /* .content-card-icon background */
    --icon-badge-text: var(--accent-text);         /* .content-card-icon colour */
    --breadcrumb-bg: var(--accent);                       /* breadcrumb pill background */
}

/* --------------------------------------------------------------------------
   Title / banner section
   #title-section is part of the base CMS theme — these are the bits each
   brand stylesheet can touch. --title-border is optional (defaults to
   none), for sections that want the transparent-banner-with-underline
   style instead of a solid fill.
   -------------------------------------------------------------------------- */
[id=title-section],
[id=title-section] h1 {
    color: #2b0e48;
}

#title-section {
    background: var(--title-bg)!important;
    border-bottom: var(--title-border);
}

/* --------------------------------------------------------------------------
   Breadcrumbs (page navigation trail)
   Sits absolutely positioned over the title banner. --breadcrumb-bg controls the
   pill background (defaults to --accent); the arrow reuses --title-text so
   it matches whatever ink colour the banner text uses.
   -------------------------------------------------------------------------- */
.row.breadcrumbs {
    position: absolute;
    width: stretch;
    top: 48px;
}

.breadcrumb {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    background: transparent;
    gap : 10px;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 10px;
    margin-right: 12px;
    cursor: pointer;
    text-transform: capitalize;
    border-radius: 12px;
}


/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

/* Modifier: fixed 2-column layout instead of the 6-col span system.
   Add alongside .card-grid, e.g. <div class="card-grid grid-cols-2">.
   Deliberately not !important, so the max-width:1000px rule below
   (which is !important) still wins on small screens. */
.card-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1000px) {
    .card-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .content-card {
        grid-column: span 1 !important;
    }
}

/* Span utility classes — add one to a .content-card to control its width on the
   6-column desktop grid, instead of wiring layout to :nth-child(n), which
   breaks the moment a card is added, removed or reordered. */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.content-card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    overflow: hidden;
    transition: all .25s ease;
    height: 100%;
}

.content-card h2 {
    margin: 0;
    padding: 1rem 1.5rem;
    background: var(--card-header-bg);
    color: var(--card-header-text);
    border-bottom: var(--card-header-border);
    font-size: 1.3rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.content-card h2 span:first-child {
    flex: 1;
}

.content-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 1.8rem;
    color: var(--icon-badge-text);
    background: var(--icon-badge-bg);
    padding: 5px;
    border-radius: 12px;
}

.content-card-content {
    padding: 2rem;
}

.content-card ul:last-child,
.content-card p:last-child {
    margin-bottom: 0;
}

.content-card a {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: none;
}

.content-card a:hover {
    text-decoration: underline;
}

/* Utility: float an image within card text (e.g. a photo alongside an
   intro paragraph). Resets to a normal block image on small screens. */
.float-right {
    float: right;
    max-width: 45%;
    height: auto;
    margin: 0 0 1rem 1.5rem;
    border-radius: 14px;
}

@media (max-width: 600px) {
    .float-right {
        float: none;
        max-width: 100%;
        margin: 0 0 1rem;
    }
}

/* --------------------------------------------------------------------------
   Tile buttons / quick links (e.g. Guidance, Ts & Cs, Application Form)
   -------------------------------------------------------------------------- */
ul.tile-grid {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: center;
    padding: 0;
}

.content-card-content .btn {
    background: var(--btn-bg) !important;
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
.accordion-item,
.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:not(:first-of-type):not(:last-of-type) {
    background-color: #fff !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.accordion-item .accordion-title {
    padding: 0;
    background-color: #fff;
    border-radius: 0 !important;
    cursor: pointer;
}

.accordion-item .accordion-title h2 {
    margin: 0;
    background: none !important;
    color: #000;
    border-bottom : none;
}

.accordion-item .accordion-title.active-title,
.accordion-item .accordion-title:hover {
    background-color: var(--accent);
}

.accordion-item .accordion-title.active-title h2,
.accordion-item .accordion-title:hover h2,
.accordion-item .accordion-title.active-title h2 i,
.accordion-item .accordion-title:hover h2 i {
    color: var(--accent-text) !important;
}

.accordion-item .accordion-content {
    display: none;
    line-height: 1.7;
    padding: 20px;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}

.accordion-item > a {
    background-color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    color: var(--link-color);
}

/* --------------------------------------------------------------------------
   Icon grid (clickable topic/category shortcut tiles)
   -------------------------------------------------------------------------- */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    padding: 2.5rem 1.5rem;
    min-height: 200px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all .25s ease;
}

.icon-tile:hover,
.icon-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    text-decoration: none;
}

.icon-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 1.75rem;
}

.icon-tile-label {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
    color: #000;
}

.icon-tile-label::after {
    content: "\2192"; /* → */
    display: block;
    margin-top: .5rem;
    font-weight: 600;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Team grid (staff / "meet the team" listings)
   -------------------------------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.team-card {
    text-align: center;
    height: 100%;
}

.team-card figure {
    margin: 0;
}

.team-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50% 50% 50% 0;
}

.team-content {
    padding: 1.5rem;
}

.team-content h3 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.team-role {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

.row-center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}


@media (max-width: 1200px) {
  .row-center {
    flex-direction: column;
}
}


@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Embedded iframes on small screens
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
    iframe {
        width: 100%;
        height: 300px !important;
    }
}

@media only screen and (min-width: 600px) {
    iframe {
        width: 100%;
        height: 600px!important;
    }
}

@media (max-width: 760px) {
    #title-section h1 {
        font-size: 34px;
        margin-top: -10px;
        padding-top: 10px;
        margin-left: -8px;
    }
}