/* Shared components of the theme. Colours and type from tokens.css only. */

/* ---------- Breadcrumbs (inc/breadcrumbs.php): the same on every template ---------- */
.wttc-crumbs { margin: 0 0 14px; font: 400 12px/1.4 var(--wttc-font-sans); }
.wttc-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.wttc-crumbs__item { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.wttc-crumbs__item + .wttc-crumbs__item::before { content: "/"; opacity: .5; }
.wttc-crumbs a { text-decoration: none; text-underline-offset: 3px; }
.wttc-crumbs a:hover, .wttc-crumbs a:focus-visible { text-decoration: underline; }
.wttc-crumbs [aria-current] { display: block; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

.wttc-crumbs--light { color: rgba(21, 27, 52, .68); }
.wttc-crumbs--light a, .wttc-crumbs--light a:visited { color: rgba(21, 27, 52, .68); }
.wttc-crumbs--light a:hover, .wttc-crumbs--light a:focus-visible { color: var(--wttc-navy); }
.wttc-crumbs--light [aria-current] { color: var(--wttc-navy); }

.wttc-crumbs--dark { color: rgba(255, 255, 255, .75); }
.wttc-crumbs--dark a, .wttc-crumbs--dark a:visited { color: rgba(255, 255, 255, .85); }
.wttc-crumbs--dark a:hover, .wttc-crumbs--dark a:focus-visible { color: var(--wttc-white); }
.wttc-crumbs--dark [aria-current] { color: var(--wttc-white); }

/* ---------- Layout wrapper: the content column of the site ---------- */
.wttc-wrap { width: min(var(--wttc-container), calc(100% - 48px)); margin-inline: auto; }

/* ---------- Buttons (white or navy, 4px corners). a.* selectors beat Hello's a:hover colour; every state is set ---------- */
.wttc-button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border: 1px solid transparent; border-radius: var(--wttc-radius); font: 500 14px/1.2 var(--wttc-font-sans); text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
a.wttc-button--dark, a.wttc-button--dark:visited { background: var(--wttc-navy); border-color: var(--wttc-navy); color: var(--wttc-white); }
a.wttc-button--dark:hover, a.wttc-button--dark:focus-visible, a.wttc-button--dark:active { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }
a.wttc-button--light, a.wttc-button--light:visited { background: var(--wttc-white); color: var(--wttc-navy); }
a.wttc-button--light:hover, a.wttc-button--light:focus-visible, a.wttc-button--light:active { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }

/* ---------- Closing band: navy, rounded, a title and a button ---------- */
.wttc-cta { padding: 72px 0; }
.wttc-cta__band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: clamp(28px, 4vw, 48px); border-radius: 12px; background: var(--wttc-peach); color: var(--wttc-navy); }
.wttc-cta__title { margin: 0; color: var(--wttc-navy); font: 400 clamp(26px, 3vw, 38px)/1.15 var(--wttc-font-serif); }
a.wttc-cta__band .wttc-button, .wttc-cta__band a.wttc-button--light, .wttc-cta__band a.wttc-button--light:visited { background: var(--wttc-navy); border-color: var(--wttc-navy); color: var(--wttc-white); }
.wttc-cta__band a.wttc-button--light:hover, .wttc-cta__band a.wttc-button--light:focus-visible, .wttc-cta__band a.wttc-button--light:active { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }
@media (max-width: 960px) { .wttc-cta { padding: 56px 0; } }

/* ---------- Chip (category label) ---------- */
.wttc-chip { display: inline-block; padding: 4px 10px; border-radius: var(--wttc-radius); background: #F3F0E7; color: var(--wttc-navy); font: 500 11px/1.3 var(--wttc-font-sans); letter-spacing: .4px; text-transform: uppercase; }
.wttc-chip--small { font-size: 10px; padding: 3px 8px; }
a.wttc-chip { text-decoration: none; transition: background-color .2s ease, color .2s ease; }
a.wttc-chip:link, a.wttc-chip:visited { color: var(--wttc-navy); }
a.wttc-chip:hover, a.wttc-chip:focus-visible, a.wttc-chip:active { background: var(--wttc-accent); color: var(--wttc-navy); }
a.wttc-chip:focus-visible { outline: 2px solid var(--wttc-navy); outline-offset: 2px; }

/* ---------- News card (article "More news" and the archives) ---------- */
.wttc-card { display: flex; flex-direction: column; overflow: hidden; border: .5px solid rgba(209, 207, 200, .55); border-radius: 12px; background: var(--wttc-white); color: inherit; text-decoration: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }
a.wttc-card, a.wttc-card:visited, a.wttc-card:hover, a.wttc-card:focus, a.wttc-card:active { color: inherit; }
.wttc-card:hover, .wttc-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21, 27, 52, .10); }
.wttc-card:focus-visible { outline: 2px solid var(--wttc-navy); outline-offset: 3px; }
.wttc-card__media { display: block; aspect-ratio: 16 / 10; background: rgba(209, 207, 200, .55); overflow: hidden; }
.wttc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.wttc-card:hover .wttc-card__media img { transform: scale(1.04); }
.wttc-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 16px 18px; }
.wttc-card__title { color: var(--wttc-navy); font: 400 18px/1.3 var(--wttc-font-serif); }
.wttc-card__date { font-size: 11px; color: rgba(21, 27, 52, .68); }
@media (prefers-reduced-motion: reduce) { .wttc-button, a.wttc-chip, .wttc-card, .wttc-card__media img { transition: none; } .wttc-card:hover, .wttc-card:focus-visible { transform: none; } .wttc-card:hover .wttc-card__media img { transform: none; } }