/* Self-hosted Montserrat — carried over from the original afriasia.info site
   (woffs copied verbatim from its /fonts/). Regular = normal weight, 800 = bold. */
@font-face {
    font-family: 'montserrat';
    src: url("/fonts/montserrat-v25-latin-regular.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'montserrat';
    src: url("/fonts/montserrat-v25-latin-800.woff") format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --site-color: #1B1464;   /* original afriasia.info navy */
    --site-cream: #fffeef;   /* accent — used as the footer background; the body is plain white */
    --site-muted: #6c757d;
}

html, body {
    background: #fff;
    color: var(--site-color);   /* navy body text, matching the original site */
    font-family: 'montserrat', 'Helvetica Neue', Arial, sans-serif;
}
/* Size/weight on body only — keeping it off <html> preserves the 16px rem root
   that every rem-based component size in this file is measured against. */
body {
    font-size: 1.125rem;        /* ~18px, matching the old site's "large" body copy */
    font-weight: bold;          /* the original site's pervasive heavy look */
}
/* The self-hosted Montserrat set ships only weights 400 and 800; Bootstrap's
   default heading weight (500) would fall back to the thin 400 and render
   *lighter* than the bold body. Pin headings to bold so they use the 800 face. */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

.site-navbar {
    background: #fff !important;
}
.logo-img { width: 200px; height: 130px; }

.site-link, .site-link:hover {
    color: var(--site-color) !important;
    font-weight: 700;
}

.site-carousel .carousel-item img {
    height: 360px;
    object-fit: cover;
    width: 100%;
}
.site-carousel .carousel-caption h5 {
    background: rgba(0,0,0,.45);
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: .25rem;
}

/* Flipster (3D coverflow) engine */
.flipster-carousel { padding: 1.5rem 0; }
/* Applied momentarily during the infinite-loop seam re-centre (see
   carousel-flipster-init.js) so the jump back to the real slide is instant. */
.flip-no-anim .flipster__container,
.flip-no-anim .flipster__item,
.flip-no-anim .flipster__item__content { transition: none !important; }
.flipster-carousel li { list-style: none; }
/* Size by max-height (not a fixed height) so the taller banner fills more of the
   page while staying uniform on desktop; max-width guards against wide images
   overflowing on narrow screens, and auto width/height keeps every aspect ratio. */
.flipster-carousel li img {
    max-height: clamp(340px, 52vh, 560px);
    max-width: 80vw;   /* leave room either side so the coverflow neighbours show */
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
/* Flipster's coverflow container uses a width-relative padding-bottom (5%) for
   the reflection, which makes the gap below the image vary with viewport width.
   Pin it (out-specifying flipster's own .flipster--coverflow rule) so the
   indicator dots can overlap the image bottom by a fixed amount at any width. */
.flipster-carousel .flipster--coverflow .flipster__container { padding-bottom: 1.5rem; }
/* Lift the dots up so they sit over the bottom edge of the centre image. */
.flipster-carousel .carousel-dots { position: relative; z-index: 6; margin-top: -3.25rem; }

/* Ken Burns engine (CSS zoom + crossfade) */
.kenburns { position: relative; height: 360px; overflow: hidden; border-radius: 4px; }
.kenburns .kb-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.kenburns .kb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kenburns .kb-slide--active { opacity: 1; }
.kenburns .kb-slide--active img { animation: kb-zoom 6s ease-out forwards; }
@keyframes kb-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
.kenburns .kb-caption { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; }
.kenburns .kb-caption h5 {
    display: inline-block; margin: 0;
    background: rgba(0,0,0,.45); color: #fff;
    padding: .25rem .75rem; border-radius: .25rem;
}

/* Circular slide-position indicators (used by the Flipster engine; the
   Bootstrap/Fade engines use the same shape via the override below). */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
}
.carousel-dots button {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.3);
    background: rgba(255,255,255,.7);
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.carousel-dots button:hover { transform: scale(1.15); }
.carousel-dots button.active {
    background: var(--site-color, #5a3520);
    border-color: var(--site-color, #5a3520);
}

/* Make Bootstrap's default rectangular indicators circular too, so engines
   look consistent if the user switches. */
.site-carousel .carousel-indicators { margin-bottom: .5rem; }
.site-carousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6);
    background-color: rgba(255,255,255,.5);
    opacity: 1;
    margin: 0 .25rem;
    box-sizing: border-box;
    transition: background-color .2s, transform .15s;
}
.site-carousel .carousel-indicators [data-bs-target]:hover { transform: scale(1.15); }
.site-carousel .carousel-indicators .active { background-color: var(--site-color, #5a3520); border-color: var(--site-color, #5a3520); }

.main-content { padding: 1.5rem 1rem; }

.home-tagline {
    text-align: center;
    /* Viewport-relative so the tagline grows to span the full width (echoing the
       original afriasia.info site's vw-based text); clamped for phones/huge screens. */
    font-size: clamp(1.25rem, 2vw, 2.5rem);
    color: var(--site-color);
    padding: 1rem;
}

/* Full-window-width grid: horizontal padding matches the Bootstrap row gutter
   (0.75rem) so the row's negative margins are absorbed without overflowing. */
.destinations-grid { padding: 1rem 0.75rem; }
.destination-card { margin-bottom: 1.5rem; text-align: center; }
.destination-link { display: block; color: var(--site-color); }
/* Fill the full column width. img-fluid only caps at max-width:100%, so images
   narrower than the (now full-window) column wouldn't scale up; width:100% makes
   them always fill it, height:auto keeps the 9:10 card-crop aspect. */
.destination-link img { width: 100%; height: auto; border-radius: 4px; }
.destination-name {
    display: block;
    margin-top: .5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--site-color);
}
.destination-placeholder {
    background: #ccc;
    aspect-ratio: 9 / 10;   /* tracks the destination_card crop aspect */
    border-radius: 4px;
}

.destination-body { padding: 1rem; }
.destination-heading {
    color: var(--site-color);
    border-bottom: 2px solid var(--site-color);
    padding-bottom: .25rem;
    margin-bottom: 1rem;
}
.property-row {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
.property-row:last-child { border-bottom: 0; }
.property-text h3 { color: var(--site-color); }
.btn-learn-more { margin-top: .5rem; }

/* Extra breathing room below the carousel on the news page — ~5 blank lines.
   `lh` (5 line-heights) is the literal "5 blank lines"; the rem value is a
   fallback for browsers without `lh` support. */
.news-page { padding: 1rem; margin-top: 7.5rem; margin-top: 5lh; }
.news-heading { color: var(--site-color); margin-bottom: 1.25rem; }

/* Responsive grid: 1/2/3 columns by viewport via auto-fit + minmax — no media
   queries needed. Cards never narrower than ~280px. */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.news-card {
    display: block;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .12s, transform .12s;
}
.news-card[data-news-toggle="1"],
.news-card--link { cursor: pointer; }
.news-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.news-card:focus-visible { outline: 3px solid var(--site-color); outline-offset: 2px; }

.news-card-img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #eceef1;
}
.news-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .85rem;
}
.news-card-title h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--site-color);
    line-height: 1.25;
}
.news-card-chevron {
    flex: 0 0 auto;
    color: var(--site-color);
    font-size: 1.2rem;
    line-height: 1;
    transition: transform .15s ease;
}
.news-card--link .news-card-chevron {
    /* Outbound arrow stays put; only the expand chevron rotates. */
    font-size: 1rem;
}

/* Hidden body. When the card is expanded, this becomes visible and the card
   itself stretches to span every column in the grid row (full-row callout),
   pushing subsequent cards down in normal document flow. */
.news-card-body {
    display: none;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #eee;
}
.news-card.is-expanded {
    grid-column: 1 / -1;
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.news-card.is-expanded .news-card-body { display: block; }
.news-card.is-expanded .news-card-chevron { transform: rotate(180deg); }
/* When expanded, the head image can use more of the full-width real estate. */
.news-card.is-expanded .news-card-img { height: 320px; }

.newsletter-body {
    /* keep newsletter styles isolated visually */
    background: #fff;
    border: 1px solid #e3e3e3;
    padding: 1rem;
    overflow-x: auto;
}
.newsletter-body table { max-width: 100% !important; }
.newsletter-body img { max-width: 100% !important; height: auto !important; }

.static-page { padding: 2rem 1rem; max-width: 800px; }
.static-page h1 { color: var(--site-color); }

.site-footer {
    background: var(--site-cream);
    color: var(--site-color);
    padding: 1.25rem 1rem;
    margin-top: 2rem;
    border-top: 1px solid #e3e3e3;
}
.site-footer a { color: var(--site-color); }
.site-footer a:hover { text-decoration: underline; }
.footer-logo { width: 200px; height: 130px; }

/* Right-column credential strip: ATTA (always), PATA (opt-in per page). */
.footer-badges { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.pata-logo { height: 130px; width: auto; }   /* match ATTA — fill the footer banner height */
/* Fill the footer banner's content height (matches the 130px AfriAsia logo);
   width scales with the SVG's ~1.64:1 aspect. */
.atta-logo { height: 130px; width: auto; }

.empty-state {
    text-align: center;
    color: var(--site-muted);
    padding: 2rem;
}

.error-page { padding: 4rem 1rem; text-align: center; }
.error-page h1 { font-size: 5rem; color: var(--site-color); }