/*
Theme Name: Astra Child
Template: astra
Version: 2.8
*/

/* ═══════════════════════════════════════════════════════════
   BOARDING GATE — SHARED DESIGN SYSTEM
   Single source of truth for the whole site. The homepage
   template (page-home.php) and all inner pages use these
   styles together with the Tailwind CDN config enqueued in
   functions.php.
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg-teal:        #5dcaa5;
    --bg-teal-dark:   #149b94;
    --bg-navy:        #0e1c2d;
    --bg-navy-light:  #132a42;
    --bg-surface:     #fbf9fa;
    --bg-slate:       #3a485a;
    --bg-slate-light: #778599;
    --bg-ink:         #1b1b1d;
    --bg-ink-soft:    #44474c;
    --bg-line:        rgba(196, 198, 205, 0.3);
}

/* === BASE === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: "Inter", sans-serif;
    background: var(--bg-surface);
    margin: 0;
    padding: 0;
}

/* === MATERIAL ICONS === */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle; line-height: 1;
}
.icon-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* === HEADER === */
#bg-header { background-color: var(--bg-navy); position: fixed; top: 0; left: 0; right: 0; z-index: 9999; transition: background-color 0.3s, box-shadow 0.3s; }
#bg-header.scrolled { background-color: rgba(14,28,45,0.97); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.admin-bar #bg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #bg-header { top: 46px; } }
.bg-header-inner { max-width: 80rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .bg-header-inner { padding: 0 64px; } }
.bg-logo-link { display: flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 900; color: #ffffff; text-decoration: none !important; line-height: 1; white-space: nowrap; }
@media (min-width: 768px) { .bg-logo-link { font-size: 22px; } }

/* === DESKTOP NAV (hidden on mobile) === */
.bg-desktop-nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 768px) { .bg-desktop-nav { display: flex; } }

/* === NAV LINKS === */
.bg-nav-link { color: #ffffff !important; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; text-decoration: none !important; box-shadow: none !important; transition: color 0.2s; }
.bg-nav-link:hover { color: #ffffff !important; text-decoration: none !important; }
.bg-nav-link:visited { color: rgba(255,255,255,0.85) !important; }

/* === GET STARTED CTA (hidden on mobile) === */
.bg-cta-btn { display: none; background: #5dcaa5; color: #fff; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: 9999px; text-decoration: none !important; transition: background 0.2s; }
@media (min-width: 768px) { .bg-cta-btn { display: inline-flex; } }

/* === HAMBURGER BUTTON (visible only on mobile) === */
.bg-hamburger { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 6px; color: #fff; -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px; }
@media (min-width: 768px) { .bg-hamburger { display: none; } }

/* === MOBILE MENU === */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; }
#mobile-menu.open { max-height: 420px; opacity: 1; }
#mobile-menu .bg-nav-link { display: block; padding: 12px 16px; border-radius: 8px; font-size: 16px; }
#mobile-menu .bg-nav-link:active { background: rgba(255,255,255,0.08); }

/* === HOMEPAGE MAIN RESETS === */
#main-content, #main-content * { box-sizing: border-box; }
#main-content p, #main-content h1, #main-content h2,
#main-content h3, #main-content h4, #main-content h5 { margin: 0; padding: 0; }
#main-content ul, #main-content ol { margin: 0; padding: 0; list-style: none; }
#main-content a { text-decoration: none !important; box-shadow: none !important; }
#main-content a:hover { text-decoration: none !important; }

/* === FOOTER === */
#bg-footer a { text-decoration: none !important; box-shadow: none !important; }
#bg-footer p { margin: 0; padding: 0; }
#bg-footer ul { margin: 0; padding: 0; list-style: none; }

/* === SHARED COMPONENTS === */
.shadow-editorial { box-shadow: 0 10px 30px rgba(10,25,41,0.06); }
.article-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(10,25,41,0.12); }
.category-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(10,25,41,0.1); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.progress-bar { height: 3px; background: var(--bg-teal); border-radius: 9999px; transition: width 0.4s ease; }
.check-item { cursor: pointer; }
.check-item.checked .check-box { background-color: var(--bg-teal) !important; border-color: var(--bg-teal) !important; }
.check-item.checked .check-icon { opacity: 1 !important; }
.check-icon { opacity: 0; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: #c4c6cd; border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════
   INNER PAGES — make Astra content match the homepage design
   ═══════════════════════════════════════════════════════════ */

/* Static pages built with full-width custom sections:
   remove Astra's container, title and padding so page content
   controls its own layout (every page starts with its own hero). */
body.page:not(.page-template-page-home) .site-content .ast-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
body.page:not(.page-template-page-home) #primary {
    padding: 0 !important;
    margin: 0 !important;
}
body.page:not(.page-template-page-home) .site-content article {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent;
}
body.page:not(.page-template-page-home) .entry-header { display: none; }
body.page:not(.page-template-page-home) .entry-content { margin: 0; }
body.page:not(.page-template-page-home) .entry-content > * { max-width: none; }
body.page .ast-single-post-featured-section { display: none; }

/* Generic content typography (posts + any prose) */
.site-content { font-family: "Inter", sans-serif; color: var(--bg-slate); }
.site-content h1, .site-content h2, .site-content h3,
.site-content h4, .site-content h5, .site-content h6,
.entry-title, .page-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--bg-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* Don't let the heading defaults above beat Tailwind's text-white
   (hero titles and CTA bands on dark sections inside page content). */
.site-content .text-white { color: #ffffff !important; }
.entry-title a { color: var(--bg-navy); transition: color 0.2s; }
.entry-title a:hover { color: var(--bg-teal-dark); }
.entry-content a { color: var(--bg-teal-dark); }
.entry-content a:hover { color: var(--bg-teal); }

/* Buttons — teal pill everywhere */
.ast-button, .button, button[type="submit"]:not(#bg-footer button),
.wp-block-button__link, .read-more .ast-button, input[type="submit"] {
    background: var(--bg-teal) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}
.ast-button:hover, .button:hover, .wp-block-button__link:hover, input[type="submit"]:hover {
    background: var(--bg-teal-dark) !important;
    color: #ffffff !important;
}

/* Blog archive cards — match homepage article-card design */
.blog .site-main .ast-article-post,
.archive .site-main .ast-article-post,
.search .site-main article {
    background: #ffffff;
    border: 1px solid rgba(196,198,205,0.2);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(10,25,41,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}
.blog .site-main .ast-article-post:hover,
.archive .site-main .ast-article-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(10,25,41,0.12);
}
/* Grid layout — gap matches homepage gap-gutter (24px) */
.blog .site-main .ast-row,
.archive .site-main .ast-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 !important;
}
@media (max-width: 921px) {
    .blog .site-main .ast-row,
    .archive .site-main .ast-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .blog .site-main .ast-row,
    .archive .site-main .ast-row { grid-template-columns: 1fr; }
}
.blog .site-main .ast-article-post,
.archive .site-main .ast-article-post {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ast-separate-container .ast-blog-layout-4-grid .ast-article-inner { padding: 0 !important; height: 100%; display: flex; flex-direction: column; }
/* Featured image area — fixed 192px like homepage */
.blog .ast-article-post .post-thumb-img-content,
.archive .ast-article-post .post-thumb-img-content {
    height: 192px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eae7e9, #efedef);
}
.blog .ast-article-post .post-thumb-img-content img,
.archive .ast-article-post .post-thumb-img-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Content area — p-6 / md:p-8 like homepage */
.blog .ast-article-post .ast-blog-featured-section + .post-content,
.archive .ast-article-post .ast-blog-featured-section + .post-content,
.blog .ast-article-post .post-content,
.archive .ast-article-post .post-content {
    padding: 24px !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .blog .ast-article-post .post-content,
    .archive .ast-article-post .post-content { padding: 32px !important; }
}
.blog .site-main .ast-pagination,
.archive .site-main .ast-pagination { margin-top: 2rem; }
/* Title — matches homepage text-h2 */
.blog .entry-title, .archive .entry-title { font-size: 24px; line-height: 1.2; font-weight: 700; margin-bottom: 0.75rem; }
/* Category badges — pill style like homepage */
.cat-links a {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #44474c !important;
    background: #efedef;
    padding: 4px 10px;
    border-radius: 9999px;
    display: inline-block;
}
.entry-meta { margin-bottom: 1rem !important; }
.entry-meta, .entry-meta a { color: var(--bg-ink-soft) !important; font-family: "Inter", sans-serif; font-size: 12px; }
/* Excerpt */
.blog .ast-article-post .entry-content p,
.archive .ast-article-post .entry-content p { color: #44474c; font-size: 16px; line-height: 1.6; flex: 1; }
/* Read more — styled like homepage "Read article →" */
.read-more a {
    color: var(--bg-teal-dark);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.25rem;
    transition: gap 0.2s;
}
.read-more a:hover { gap: 12px; }

/* Archive / blog page title banner */
.ast-archive-description {
    background: var(--bg-navy);
    border-radius: 1rem;
    padding: 3rem 2.5rem !important;
    margin-bottom: 2rem;
}
.ast-archive-description .page-title,
.ast-archive-description h1 { color: #ffffff; }
.ast-archive-description p { color: var(--bg-slate-light); }

/* Single post */
.single-post .site-main article {
    background: #ffffff;
    border: 1px solid var(--bg-line);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(10,25,41,0.06);
}
.single-post .entry-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
.single-post .entry-content { font-size: 17px; line-height: 1.75; color: var(--bg-slate); }

/* Pagination */
.ast-pagination .page-numbers {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    border-radius: 9999px;
    color: var(--bg-ink-soft);
}
.ast-pagination .page-numbers.current { background: var(--bg-teal); color: #fff; }

/* Comments / misc niceties */
.comments-area { font-family: "Inter", sans-serif; }
.ast-scroll-top { background-color: var(--bg-teal) !important; border-radius: 9999px; }

/* ═══════════════════════════════════════════════════════════
   BLOG POST — shared .bg-post design system
   All blog posts use class="bg-post" wrapper inside wp:html.
   Styles defined here once so every post is consistent.
   ═══════════════════════════════════════════════════════════ */
.bg-post { max-width: 820px; margin: 0 auto; padding: 0 1rem; }
.bg-post h2 { font-family: "Plus Jakarta Sans", sans-serif; color: var(--bg-navy); font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; margin: 2.5rem 0 0.75rem; line-height: 1.25; }
.bg-post h3 { font-family: "Plus Jakarta Sans", sans-serif; color: var(--bg-navy); font-size: clamp(17px, 2vw, 21px); font-weight: 600; margin: 2rem 0 0.5rem; line-height: 1.3; }
.bg-post p { font-family: "Inter", sans-serif; color: var(--bg-slate); font-size: 16px; line-height: 1.8; margin: 0 0 1.1rem; }
.bg-post ul, .bg-post ol { font-family: "Inter", sans-serif; color: var(--bg-slate); font-size: 16px; line-height: 1.8; margin: 0 0 1.25rem; padding-left: 1.4rem; }
.bg-post li { margin-bottom: 0.45rem; }
.bg-post a { color: #149b94; font-weight: 500; text-decoration: none; }
.bg-post a:hover { color: #5dcaa5; }
.bg-post strong { color: var(--bg-navy); }

/* TOC */
.bg-post .toc { background: #f7f8fa; border: 1px solid rgba(196,198,205,0.4); border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; }
.bg-post .toc .toc-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 17px; color: var(--bg-navy); margin: 0 0 0.65rem; }
.bg-post .toc ol { margin: 0; padding-left: 1.25rem; }
.bg-post .toc li { margin-bottom: 0.3rem; font-size: 15px; }
.bg-post .toc a { color: #149b94; font-weight: 500; text-decoration: none; }
.bg-post .toc a:hover { color: #5dcaa5; text-decoration: underline; }

/* Tables */
.bg-post .table-wrap { margin: 1.5rem 0; border-radius: 0.5rem; border: 1px solid rgba(196,198,205,0.35); overflow: hidden; }
.bg-post table { width: 100%; border-collapse: collapse; font-family: "Inter", sans-serif; font-size: 15px; margin: 0; }
.bg-post th { background: var(--bg-navy); color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; padding: 0.75rem 1rem; text-align: left; }
.bg-post td { padding: 0.65rem 1rem; border-bottom: 1px solid rgba(196,198,205,0.35); color: var(--bg-slate); }
.bg-post td:first-child { font-weight: 600; color: var(--bg-navy); }
.bg-post tr:nth-child(even) td { background: #f7f8fa; }

/* Callout boxes */
.bg-post .intro-answer, .bg-post blockquote { border-left: 4px solid #5dcaa5; margin: 1.5rem 0; padding: 1rem 1.25rem; background: #f0fdf9; border-radius: 0 0.5rem 0.5rem 0; }
.bg-post .intro-answer p, .bg-post blockquote p { color: #065f46; margin: 0; }
.bg-post .warn-box { background: #fff8ed; border-left: 4px solid #f59e0b; padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.25rem 0; }
.bg-post .warn-box p { color: #78350f; margin: 0; }

/* CTA box */
.bg-post .cta-box { background: var(--bg-navy); border-radius: 1rem; padding: 2rem 2.5rem; text-align: center; margin: 2rem 0; }
.bg-post .cta-box h3 { color: #fff; margin: 0 0 0.5rem; }
.bg-post .cta-box p { color: #778599; margin: 0 0 1.25rem; }
.bg-post .cta-box a.cta-link { display: inline-block; background: #5dcaa5; color: var(--bg-navy); font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; padding: 0.75rem 2rem; border-radius: 9999px; text-decoration: none; transition: background 0.2s; }
.bg-post .cta-box a.cta-link:hover { background: #4bbf98; }

/* Image placeholders */
.bg-post .hero-img, .bg-post .img-placeholder { width: 100%; border-radius: 0.75rem; margin: 1.5rem 0; object-fit: cover; max-height: 400px; background: #e2e8f0; min-height: 200px; display: block; }
.bg-post .country-hero { margin: 1rem 0 1.25rem; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%); aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(120,133,153,0.3); }
.bg-post .country-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-post .country-hero.has-image { border: none; background: none; aspect-ratio: auto; }
.bg-post .country-hero .ph-label { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 700; color: #778599; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 1rem; }
.bg-post .country-hero .ph-label span { display: block; font-size: 11px; font-weight: 500; color: #94a3b8; letter-spacing: 0.02em; text-transform: none; margin-top: 0.35rem; font-family: "Inter", sans-serif; }

/* FAQ */
.bg-post .faq-item { border-top: 1px solid rgba(196,198,205,0.4); padding: 1.25rem 0; }
.bg-post .faq-item:last-child { border-bottom: 1px solid rgba(196,198,205,0.4); }
.bg-post .faq-item h3 { margin: 0 0 0.5rem; font-size: 17px; }
.bg-post .faq-item p { margin: 0; }

/* Updated note */
.bg-post .updated-note { font-size: 13px; color: #778599; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1.5rem; }

/* Badges (visa post) */
.bg-post .badge-yes { background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 9999px; white-space: nowrap; }
.bg-post .badge-no { background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 9999px; white-space: nowrap; }
.bg-post .badge-evisa { background: #e0f2fe; color: #075985; font-size: 11px; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 9999px; white-space: nowrap; }
.bg-post .badge-voa { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 9999px; white-space: nowrap; }
.bg-post .badge-gccd { background: #f3e8ff; color: #6b21a8; font-size: 11px; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 9999px; white-space: nowrap; }

/* Visa box */
.bg-post .visa-box { background: #f7f8fa; border: 1px solid rgba(196,198,205,0.45); border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 0.75rem 0 2rem; }
.bg-post .visa-box .vb-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #778599; margin: 0 0 0.65rem; }
.bg-post .visa-box .vr { display: grid; grid-template-columns: 140px 1fr; gap: 0.25rem 0.75rem; margin-bottom: 0.35rem; font-size: 14px; font-family: "Inter", sans-serif; align-items: baseline; }
.bg-post .visa-box .vr .vl { font-weight: 600; color: var(--bg-navy); }
.bg-post .visa-box .vr .vv { color: var(--bg-slate); }
.bg-post .visa-box .vr .vv a { color: #149b94; font-weight: 500; }

/* Check/cross lists (insurance post) */
.bg-post .check-list li::before { content: "✓"; color: #065f46; font-weight: 700; margin-right: 0.5rem; }
.bg-post .cross-list li::before { content: "✗"; color: #991b1b; font-weight: 700; margin-right: 0.5rem; }
.bg-post .check-list, .bg-post .cross-list { list-style: none; padding-left: 0.5rem; }

/* 404 + search */
.error404 .page-title, .search-no-results .page-title { font-family: "Plus Jakarta Sans", sans-serif; color: var(--bg-navy); }