/*
 * File: assets/css/style.css
 * Location: /assets/css/style.css
 * Designed & developed by Sioto Fine
 */

:root{
    --red:#c8102e;
    --red-dark:#8d0b20;
    --gold:#f4c542;
    --navy:#14213d;
    --blue:#064789;
    --ink:#1f2937;
    --muted:#667085;
    --bg:#f6f7fb;
    --card:#ffffff;
    --line:#e6e8ef;
    --shadow:0 18px 55px rgba(15,23,42,.12);
    --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.container,
.admin-shell{
    width:min(1320px,calc(100% - 32px));
    margin-inline:auto;
}

.skip-link{
    position:absolute;
    top:-80px;
    left:16px;
    background:#fff;
    color:#000;
    padding:10px;
    z-index:99;
}

.skip-link:focus{top:16px}

.topbar{
    background:var(--navy);
    color:#fff;
    font-size:.88rem;
}

.topbar-inner{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:9px 0;
}

.topbar i{
    color:var(--gold);
    margin-right:7px;
}

.site-header{
    background:#fff;
    box-shadow:0 3px 22px rgba(15,23,42,.08);
    position:sticky;
    top:0;
    z-index:50;
}

.navbar{background:#fff}

.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:86px;
    gap:18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--ink);
}

.brand:hover{text-decoration:none}

.brand img{
    width:62px;
    height:62px;
    object-fit:contain;
}

.brand strong{
    display:block;
    font-size:1.08rem;
    color:var(--navy);
}

.brand small{
    display:block;
    color:var(--muted);
    font-weight:600;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-menu a{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    color:var(--navy);
    font-weight:700;
    font-size:.94rem;
}

.nav-menu a:hover,
.nav-menu a.active{
    background:#fff0f2;
    color:var(--red);
    text-decoration:none;
}

.nav-menu .admin-link{
    background:var(--navy);
    color:#fff;
}

.nav-menu .admin-link:hover{
    background:var(--red);
    color:#fff;
}

.nav-toggle{
    display:none;
    border:0;
    background:var(--red);
    color:#fff;
    border-radius:12px;
    padding:10px 13px;
    font-size:1.15rem;
    cursor:pointer;
}

.hero{
    background:
        radial-gradient(circle at top left,rgba(244,197,66,.28),transparent 30%),
        linear-gradient(135deg,var(--navy),#0a1128 60%,var(--red-dark));
    color:#fff;
    padding:80px 0;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:42px;
    align-items:center;
}

.hero h1{
    font-size:clamp(2.3rem,5vw,4.7rem);
    line-height:1.03;
    margin:0 0 20px;
}

.hero p{
    font-size:1.1rem;
    color:#eef2ff;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px;
}

.hero-card{
    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.2);
    border-radius:30px;
    padding:32px;
    text-align:center;
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow);
}

.hero-card img{
    width:210px;
    margin:0 auto 16px;
}

.hero-card h2{margin:0 0 8px}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--red);
    font-weight:900;
    font-size:.8rem;
    margin:0 0 10px;
}

.hero .eyebrow,
.page-hero .eyebrow,
.red-panel .eyebrow,
.dark-panel .eyebrow{
    color:var(--gold);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    border:0;
    padding:11px 18px;
    font-weight:800;
    cursor:pointer;
    text-decoration:none;
    transition:.2s ease;
    white-space:nowrap;
}

.btn:hover{
    text-decoration:none;
    transform:translateY(-1px);
}

.btn-primary{
    background:var(--red);
    color:#fff;
}

.btn-primary:hover{
    background:var(--red-dark);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border:2px solid rgba(255,255,255,.7);
    color:#fff;
}

.btn-light{
    background:#fff;
    color:var(--navy);
    border:1px solid var(--line);
}

.btn-danger{
    background:#b42318;
    color:#fff;
}

.btn-sm{
    padding:7px 12px;
    font-size:.84rem;
}

.full{width:100%}

.section{padding:64px 0}
.section-light{background:#fff}

.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.section-heading h2{
    font-size:2rem;
    margin:0;
    color:var(--navy);
}

.info-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:-98px;
    position:relative;
    z-index:2;
}

.info-strip>div{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.info-strip i{
    font-size:1.5rem;
    color:var(--red);
    margin-top:4px;
}

.info-strip strong,
.info-strip span{
    display:block;
}

.info-strip span{color:var(--muted)}

.card-grid{
    display:grid;
    gap:24px;
}

.card-grid.three{
    grid-template-columns:repeat(3,1fr);
}

.service-card,
.news-card,
.side-card,
.card-content,
.search-result,
.message-card,
.panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(15,23,42,.08);
}

.service-card{padding:26px}

.service-card>i{
    width:54px;
    height:54px;
    border-radius:18px;
    background:#fff0f2;
    color:var(--red);
    display:grid;
    place-items:center;
    font-size:1.5rem;
    margin-bottom:18px;
}

.service-card h2,
.service-card h3{
    margin:0 0 10px;
    color:var(--navy);
}

.service-card p{
    color:var(--muted);
    margin:0;
}

.service-card dl{
    margin:18px 0 0;
    display:grid;
    gap:10px;
}

.service-card dl div{
    background:#f8fafc;
    border-radius:14px;
    padding:12px;
}

.service-card dt{
    font-size:.75rem;
    color:var(--muted);
    font-weight:900;
    text-transform:uppercase;
}

.service-card dd{
    margin:0;
    color:var(--navy);
    font-weight:800;
}

.feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.feature-panel{
    border-radius:28px;
    padding:34px;
    min-height:285px;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    box-shadow:var(--shadow);
}

.red-panel{background:linear-gradient(135deg,var(--red),#7d0a1c)}
.dark-panel{background:linear-gradient(135deg,var(--navy),#0a1128)}

.feature-panel h2{
    font-size:2rem;
    line-height:1.15;
    margin:0 0 10px;
}

.feature-panel p{
    color:#fff;
    margin-bottom:24px;
}

.news-card{overflow:hidden}

.news-card img{
    width:100%;
    height:190px;
    object-fit:contain;
    background:linear-gradient(135deg,#fff,#f3f4f6);
    padding:20px;
}

.news-card div{padding:20px}

.news-card h2,
.news-card h3{
    margin:4px 0 10px;
    line-height:1.25;
}

.news-card h2 a,
.news-card h3 a{
    color:var(--navy);
}

.date{
    font-size:.85rem;
    color:var(--muted)!important;
    margin:0;
}

.read-more{font-weight:900}

.page-hero{
    background:linear-gradient(135deg,var(--navy),var(--red-dark));
    color:#fff;
    padding:70px 0;
}

.page-hero h1{
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:1.08;
    margin:0 0 14px;
}

.page-hero p{
    color:#eef2ff;
    font-size:1.07rem;
}

.enhanced-page-hero{
    background:
        radial-gradient(circle at top right,rgba(244,197,66,.28),transparent 33%),
        linear-gradient(135deg,#111827,var(--red-dark));
}

.content-layout,
.article-layout,
.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:28px;
    align-items:start;
}

.card-content{padding:32px}

.side-card{
    padding:26px;
    position:sticky;
    top:120px;
}

.side-card img{
    width:170px;
    margin:0 auto 18px;
}

.prose h2,
.prose h3{
    color:var(--navy);
}

.prose p{margin-bottom:1rem}

.intro-text{
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    box-shadow:0 8px 30px rgba(15,23,42,.08);
}

.notice-box{
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#7c2d12;
    padding:14px;
    border-radius:16px;
    margin:18px 0;
}

.notice-box i{margin-top:4px}

.checklist-card ul,
.icon-list{
    padding-left:20px;
}

.icon-list{
    list-style:none;
    padding-left:0;
}

.icon-list li{margin:12px 0}

.icon-list i{
    color:var(--red);
    margin-right:8px;
}

.pill-list{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin:18px 0;
}

.pill-list span{
    background:#fff0f2;
    color:var(--red);
    font-weight:900;
    border-radius:999px;
    padding:8px 12px;
}

.faq-list{
    display:grid;
    gap:14px;
}

.faq-list details{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
}

.faq-list summary{
    font-weight:900;
    color:var(--navy);
    cursor:pointer;
}

.form-card label,
.admin-form label,
.login-card label{
    display:grid;
    gap:7px;
    font-weight:800;
    color:var(--navy);
    margin-bottom:16px;
}

input,
textarea,
select{
    width:100%;
    border:1px solid #d0d5dd;
    border-radius:14px;
    padding:12px 14px;
    font:inherit;
    background:#fff;
    color:var(--ink);
}

textarea{resize:vertical}

.search-form{
    display:flex;
    gap:10px;
    margin-bottom:28px;
}

.search-form input{flex:1}

.alert{
    padding:14px 18px;
    border-radius:16px;
    margin:18px 0;
    font-weight:800;
}

.alert-success{
    background:#ecfdf3;
    color:#027a48;
}

.alert-error{
    background:#fef3f2;
    color:#b42318;
}

.alert-info{
    background:#eff8ff;
    color:#175cd3;
}

.empty-state{
    background:#fff;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    padding:30px;
    text-align:center;
    color:var(--muted);
    font-weight:800;
}

.pagination{
    display:flex;
    gap:8px;
    margin-top:30px;
}

.pagination a{
    background:#fff;
    border:1px solid var(--line);
    padding:8px 13px;
    border-radius:12px;
    color:var(--navy);
    font-weight:900;
}

.pagination a.active{
    background:var(--red);
    color:#fff;
}

.article-body figure{
    margin:0 0 24px;
}

.article-body figure img{
    width:100%;
    border-radius:18px;
    max-height:520px;
    object-fit:contain;
    background:#f8fafc;
}

.article-body figcaption{
    text-align:center;
    color:var(--muted);
    font-size:.9rem;
    margin-top:8px;
}

.search-result{
    padding:22px;
    margin-bottom:14px;
}

.search-result span{
    background:#fff0f2;
    color:var(--red);
    font-weight:900;
    border-radius:999px;
    padding:5px 10px;
    font-size:.8rem;
}

.search-result h2{
    margin:10px 0 4px;
}

.staff-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.staff-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(15,23,42,.08);
    overflow:hidden;
}

.staff-photo-wrap{
    background:linear-gradient(135deg,#fff,#f3f4f6);
    padding:18px;
}

.staff-photo-wrap img{
    width:100%;
    height:270px;
    object-fit:contain;
}

.staff-card-body{padding:24px}

.staff-card h2{
    margin:0;
    color:var(--navy);
    line-height:1.2;
}

.staff-card h3{
    margin:6px 0 12px;
    color:var(--red);
    font-size:1rem;
}

.staff-card p{color:var(--muted)}

.staff-contact{
    display:grid;
    gap:8px;
    margin-top:16px;
}

.staff-contact a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:900;
    color:var(--navy);
    word-break:break-word;
}

.staff-contact a:hover{
    color:var(--red);
    text-decoration:none;
}

.footer-logo{width:92px}

.site-footer{
    background:var(--navy);
    color:#fff;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:28px;
    padding:46px 0;
}

.site-footer a{
    display:block;
    color:#e5e7eb;
    margin:8px 0;
}

.site-footer p{color:#e5e7eb}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:15px 0;
}

.footer-bottom .container{
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    color:#e5e7eb;
    font-size:.92rem;
}

/* Homepage animated hero override */
.hero.hero-animated{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    min-height:570px!important;
    display:flex!important;
    align-items:center!important;
    color:#fff!important;
    padding:90px 0!important;
    background:#c8102e!important;
    background-image:none!important;
}

.hero.hero-animated::before,
.hero.hero-animated::after{
    content:none!important;
    display:none!important;
}

.hero-animated-bg{
    position:absolute!important;
    inset:-22%!important;
    z-index:0!important;
    display:block!important;
    pointer-events:none!important;
    opacity:1!important;
    background:
        linear-gradient(
            120deg,
            #c8102e 0%,
            #ef4444 14%,
            #00247d 28%,
            #2563eb 42%,
            #fcd116 57%,
            #16a34a 72%,
            #c8102e 100%
        )!important;
    background-size:650% 650%!important;
    animation:tongaHeroColourShift 7s ease-in-out infinite!important;
}

.hero-animated-glow{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    display:block!important;
    pointer-events:none!important;
    background:
        radial-gradient(circle at 15% 20%,rgba(252,209,22,.72),transparent 26%),
        radial-gradient(circle at 82% 18%,rgba(255,255,255,.38),transparent 25%),
        radial-gradient(circle at 78% 80%,rgba(200,16,46,.65),transparent 28%),
        radial-gradient(circle at 20% 78%,rgba(37,99,235,.68),transparent 31%)!important;
    filter:blur(3px);
    animation:tongaHeroGlowMove 6s ease-in-out infinite alternate!important;
}

.hero-animated-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    display:block!important;
    pointer-events:none!important;
    background:
        linear-gradient(90deg,rgba(2,6,23,.42),rgba(2,6,23,.08),rgba(2,6,23,.34)),
        repeating-linear-gradient(135deg,rgba(255,255,255,.11) 0 1px,transparent 1px 20px)!important;
}

.hero-animated-blob{
    position:absolute!important;
    z-index:3!important;
    display:block!important;
    border-radius:999px!important;
    pointer-events:none!important;
    filter:blur(18px);
    opacity:.72!important;
    animation:tongaHeroBlobFloat 8s ease-in-out infinite!important;
}

.hero-animated-blob-one{
    width:350px;
    height:350px;
    top:-100px;
    right:4%;
    background:rgba(252,209,22,.92);
}

.hero-animated-blob-two{
    width:300px;
    height:300px;
    bottom:-100px;
    left:6%;
    background:rgba(200,16,46,.92);
    animation-delay:-3s!important;
}

.hero-animated-blob-three{
    width:250px;
    height:250px;
    top:33%;
    left:44%;
    background:rgba(37,99,235,.92);
    animation-delay:-6s!important;
}

.hero-animated-wave{
    position:absolute!important;
    left:-12%!important;
    right:-12%!important;
    bottom:-34%!important;
    z-index:4!important;
    height:340px!important;
    display:block!important;
    pointer-events:none!important;
    border-radius:50% 50% 0 0!important;
    background:
        radial-gradient(ellipse at center,rgba(255,255,255,.34),transparent 62%),
        linear-gradient(90deg,rgba(252,209,22,.38),rgba(255,255,255,.15),rgba(200,16,46,.38))!important;
    filter:blur(3px);
    animation:tongaHeroWaveMove 8s ease-in-out infinite!important;
}

.hero.hero-animated .container.hero-grid{
    position:relative!important;
    z-index:10!important;
    align-items:center!important;
    gap:clamp(2rem,5vw,5rem)!important;
}

.hero.hero-animated .hero-copy{
    position:relative!important;
    z-index:11!important;
    animation:tongaHeroTextIn .9s ease both!important;
}

.hero.hero-animated .eyebrow{
    display:inline-flex!important;
    align-items:center!important;
    gap:.55rem!important;
    width:fit-content!important;
    padding:.55rem .9rem!important;
    border:1px solid rgba(255,255,255,.45)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.20)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    color:#fff!important;
}

.hero.hero-animated h1{
    color:#fff!important;
    text-shadow:0 14px 34px rgba(0,0,0,.50)!important;
}

.hero.hero-animated .hero-copy>p:not(.eyebrow){
    color:rgba(255,255,255,.97)!important;
    text-shadow:0 8px 24px rgba(0,0,0,.34)!important;
}

.hero.hero-animated .hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:.85rem!important;
}

.hero.hero-animated .hero-actions .btn{
    box-shadow:0 16px 36px rgba(0,0,0,.24)!important;
}

.hero.hero-animated .hero-actions .btn:hover,
.hero.hero-animated .hero-actions .btn:focus-visible{
    transform:translateY(-3px);
    box-shadow:0 22px 46px rgba(0,0,0,.30)!important;
}

.hero.hero-animated .hero-actions .btn-outline{
    border-color:rgba(255,255,255,.86)!important;
    color:#fff!important;
    background:rgba(255,255,255,.12)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
}

.hero.hero-animated .hero-actions .btn-outline:hover,
.hero.hero-animated .hero-actions .btn-outline:focus-visible{
    background:#fff!important;
    border-color:#fff!important;
    color:#c8102e!important;
}

.hero.hero-animated .hero-card{
    position:relative!important;
    z-index:11!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.44)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.14))!important;
    box-shadow:0 30px 84px rgba(0,0,0,.38)!important;
    backdrop-filter:blur(17px)!important;
    -webkit-backdrop-filter:blur(17px)!important;
    animation:tongaHeroCardIn 1s ease .12s both,tongaHeroCardFloat 5s ease-in-out 1.15s infinite!important;
}

.hero.hero-animated .hero-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    z-index:-1;
    background:linear-gradient(135deg,rgba(255,255,255,.50),transparent 30%,rgba(252,209,22,.34) 62%,transparent);
    opacity:.95;
}

.hero.hero-animated .hero-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-70px;
    top:-70px;
    border-radius:999px;
    background:rgba(255,255,255,.24);
    pointer-events:none;
}

.hero.hero-animated .hero-card img{
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.32))!important;
    animation:tongaHeroLogoPulse 4.8s ease-in-out infinite!important;
}

.hero.hero-animated .hero-card h2{
    color:#fff!important;
    text-shadow:0 10px 28px rgba(0,0,0,.38)!important;
}

.hero.hero-animated .hero-card p{
    color:rgba(255,255,255,.94)!important;
}

.hero.hero-animated + .section .info-strip{
    margin-top:-34px;
    position:relative;
    z-index:20;
    border:1px solid rgba(226,232,240,.95);
    box-shadow:0 22px 48px rgba(15,23,42,.12);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.hero.hero-animated + .section .info-strip>div{
    transition:transform .22s ease,box-shadow .22s ease;
}

.hero.hero-animated + .section .info-strip>div:hover{
    transform:translateY(-3px);
}

@keyframes tongaHeroColourShift{
    0%{transform:translate3d(0,0,0) scale(1);background-position:0% 50%}
    25%{background-position:50% 100%}
    50%{transform:translate3d(-2%,1%,0) scale(1.04);background-position:100% 50%}
    75%{background-position:50% 0%}
    100%{transform:translate3d(0,0,0) scale(1);background-position:0% 50%}
}

@keyframes tongaHeroGlowMove{
    0%{transform:translate3d(-2%,-1%,0) scale(1)}
    100%{transform:translate3d(2%,2%,0) scale(1.06)}
}

@keyframes tongaHeroBlobFloat{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(24px,-28px,0) scale(1.12)}
}

@keyframes tongaHeroWaveMove{
    0%,100%{transform:translate3d(0,0,0) scaleX(1)}
    50%{transform:translate3d(4%,-22px,0) scaleX(1.08)}
}

@keyframes tongaHeroTextIn{
    from{opacity:0;transform:translateY(22px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes tongaHeroCardIn{
    from{opacity:0;transform:translateY(26px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes tongaHeroCardFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

@keyframes tongaHeroLogoPulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.035)}
}

/* Tonga-China Relations section on About page */
.relation-section{position:relative;overflow:hidden}
.relation-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 15%,rgba(200,16,46,.08),transparent 28%),radial-gradient(circle at 88% 10%,rgba(244,197,66,.16),transparent 30%);pointer-events:none}
.relation-section>.container{position:relative}
.relationship-heading{align-items:flex-start}
.relationship-heading p:not(.eyebrow){max-width:760px;margin:10px 0 0;color:var(--muted)}
.relation-highlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:30px}
.relation-highlight-card,.relation-closing-card,.timeline-item{background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px rgba(15,23,42,.08)}
.relation-highlight-card{border-radius:var(--radius);padding:28px}
.relation-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#fff0f2;color:var(--red);font-size:1.45rem;margin-bottom:16px}
.relation-highlight-card h3,.timeline-item h3,.relation-closing-card h3{color:var(--navy);margin:0 0 10px}
.relation-highlight-card p,.timeline-item p,.relation-closing-card p{color:var(--muted);margin:0 0 12px}
.relation-highlight-card p:last-child,.timeline-item p:last-child,.relation-closing-card p:last-child{margin-bottom:0}
.relation-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0}
.timeline-item{border-radius:20px;padding:22px;position:relative;overflow:hidden}
.timeline-item::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--red),var(--gold))}
.timeline-item span{display:inline-flex;align-items:center;gap:8px;background:#fff7e0;color:#8a5a00;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:900;margin-bottom:12px}
.relation-closing-card{border-radius:var(--radius);padding:28px;display:flex;gap:18px;align-items:flex-start;background:linear-gradient(135deg,#fff,#fff9ea)}
.relation-closing-card>i{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:1.45rem;flex:0 0 auto}

@media (max-width:920px){
    .topbar-inner,
    .footer-bottom .container{
        flex-direction:column;
    }

    .nav-toggle{
        display:block;
    }

    .nav-menu{
        display:none;
        position:absolute;
        left:16px;
        right:16px;
        top:92px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:18px;
        padding:12px;
        box-shadow:var(--shadow);
        z-index:70;
    }

    .nav-menu.open{
        display:block;
    }

    .nav-menu a{
        padding:13px;
    }

    .hero-grid,
    .content-layout,
    .article-layout,
    .contact-grid,
    .feature-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .info-strip,
    .card-grid.three,
    .staff-grid{
        grid-template-columns:1fr;
    }

    .info-strip{
        margin-top:0;
    }

    .side-card{
        position:static;
    }

    .hero{
        padding:54px 0;
    }

    .section{
        padding:42px 0;
    }

    .relation-highlight-grid,
    .relation-timeline{
        grid-template-columns:1fr;
    }

    .relation-closing-card{
        display:block;
    }

    .relation-closing-card>i{
        margin-bottom:16px;
    }
}

@media (max-width:768px){
    .hero.hero-animated{
        min-height:auto!important;
        padding:4rem 0!important;
    }

    .hero-animated-blob{
        opacity:.36!important;
    }

    .hero.hero-animated .hero-actions{
        align-items:stretch!important;
    }

    .hero.hero-animated .hero-actions .btn{
        width:100%!important;
        justify-content:center!important;
    }

    .hero.hero-animated + .section .info-strip{
        margin-top:0;
    }
}

@media (prefers-reduced-motion:reduce){
    .hero-animated-bg,
    .hero-animated-glow,
    .hero-animated-blob,
    .hero-animated-wave,
    .hero.hero-animated .hero-copy,
    .hero.hero-animated .hero-card,
    .hero.hero-animated .hero-card img{
        animation:none!important;
    }
}
/* Homepage appointment and events cards */
.homepage-action-section{
    padding-top:34px;
    background:linear-gradient(180deg,#f6f7fb 0%,#eef2f7 100%);
}
.homepage-action-heading{margin-bottom:22px}
.home-action-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}
.home-action-grid.single-card{grid-template-columns:minmax(0,760px)}
.home-action-card{
    position:relative;
    overflow:hidden;
    min-height:285px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:22px;
    align-items:flex-start;
    border-radius:28px;
    padding:30px;
    color:#fff;
    box-shadow:var(--shadow);
}
.home-action-card::after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-90px;
    bottom:-110px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
}
.home-action-card.appointment-card{
    background:radial-gradient(circle at top right,rgba(255,255,255,.22),transparent 32%),linear-gradient(135deg,#0f172a,#1d4ed8);
}
.home-action-card.events-card{
    background:radial-gradient(circle at top right,rgba(255,255,255,.20),transparent 32%),linear-gradient(135deg,#7c2d12,#c8102e);
}
.home-action-icon{
    position:relative;
    z-index:2;
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.26);
    font-size:1.8rem;
    color:#fff;
}
.home-action-content{position:relative;z-index:2}
.home-action-content .eyebrow{color:#fde68a;margin-bottom:7px}
.home-action-content h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;margin:0 0 12px;color:#fff}
.home-action-content p:not(.eyebrow){margin:0 0 24px;color:rgba(255,255,255,.92)}
.home-action-card.events-card .btn-light{border-color:rgba(255,255,255,.8)}

/* Appointment public page */
.appointment-layout{align-items:start}
.form-intro{color:var(--muted);margin-top:-5px;margin-bottom:24px}
.appointment-side-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:#eff6ff;color:#1d4ed8;font-size:1.7rem;margin-bottom:18px}

/* Events and alerts public page */
.event-filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.event-filter-bar a{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:900;box-shadow:0 5px 18px rgba(15,23,42,.05)}
.event-filter-bar a.active,.event-filter-bar a:hover{background:var(--red);color:#fff;text-decoration:none;border-color:var(--red)}
.events-list{display:grid;gap:20px}
.event-alert-card{display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-left:6px solid #1d4ed8;border-radius:22px;padding:24px;box-shadow:0 8px 30px rgba(15,23,42,.08)}
.event-alert-card.alert{border-left-color:#c8102e}
.event-alert-card.priority-urgent{border-color:#fecaca;border-left-color:#b91c1c;background:linear-gradient(90deg,#fff7f7,#fff)}
.event-alert-card.priority-high{border-left-color:#d97706}
.event-alert-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eff6ff;color:#1d4ed8;font-size:1.45rem}
.event-alert-card.alert .event-alert-icon{background:#fff0f2;color:#c8102e}
.event-alert-content h2{margin:8px 0 10px;color:var(--navy);line-height:1.2}
.event-alert-meta{display:flex;gap:9px 14px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.88rem;font-weight:700}
.event-alert-meta span{display:inline-flex;align-items:center;gap:6px}
.event-type-badge,.priority-badge{border-radius:999px;padding:5px 10px;font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.event-type-badge.event{background:#eff6ff;color:#1d4ed8}
.event-type-badge.alert{background:#fff0f2;color:#c8102e}
.priority-badge.high{background:#fef3c7;color:#92400e}
.priority-badge.urgent{background:#fee2e2;color:#b91c1c}
.event-summary{font-size:1.04rem;font-weight:700;color:#334155}
.event-details{color:#475569;margin-bottom:18px}

@media(max-width:800px){
    .home-action-grid{grid-template-columns:1fr}
    .home-action-card{grid-template-columns:1fr;padding:24px}
    .event-alert-card{grid-template-columns:1fr;padding:20px}
}

.appointment-layout .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
@media(max-width:700px){
    .appointment-layout .form-grid{grid-template-columns:1fr}
}