/* ===================================================================
   JRS CONSULTANCY — SITE ENHANCEMENTS
   Shared styles for: hero pattern overlay, government portal cards,
   live news widget, FAQ accordions, industries grid, compliance
   calendar, milestones timeline, trust badge, service tabs.
   Loaded after the page-specific stylesheet on every page.
=================================================================== */

/* -------------------------------------------------
   Robust mobile menu tap target — guarantees a
   clickable area even if the icon font is slow/blocked
-------------------------------------------------- */

.menu-toggle{
    min-width:44px;
    min-height:44px;
    display:flex !important;
    align-items:center;
    justify-content:center;
}

@media (min-width:769px){
    .menu-toggle{
        display:none !important;
    }
}

/* -------------------------------------------------
   Decorative pattern overlay for dark banner sections
-------------------------------------------------- */

.page-hero,
.about-hero,
.culture-section{
    background-image: url("../images/pattern-overlay.svg"), linear-gradient(135deg,#001b4d 0%,#0d2c54 55%,#052b6d 100%);
    background-repeat:no-repeat;
    background-position: right center, center;
    background-size: cover, cover;
    position:relative;
}

.page-hero::after{ z-index:0; }

/* On narrow screens the hero text is centered and spans the full
   width, so the decorative arrow/bar-chart graphic (designed to sit
   quietly off to the right of a wide banner) ends up overlapping the
   heading, paragraph and buttons. Drop it below tablet width and
   keep just the plain gradient so the text stays clean and readable. */
@media (max-width:768px){
    .page-hero,
    .about-hero,
    .culture-section{
        background-image: linear-gradient(135deg,#001b4d 0%,#0d2c54 55%,#052b6d 100%);
    }
}

/* =============================================================
   TRUST BADGE (about / home)
============================================================= */

.trust-badge-wrap{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:22px;
}

.trust-badge-wrap img{
    width:64px;
    height:64px;
    flex-shrink:0;
}

.trust-badge-wrap p{
    margin:0;
    font-size:14px;
    color:#4a4a4a;
    line-height:1.6;
}

/* =============================================================
   MILESTONES / TIMELINE (about)
============================================================= */

.milestones-section{
    padding:90px 10%;
    background:var(--light-bg);
}

.milestones-track{
    max-width:960px;
    margin:0 auto;
    position:relative;
}

.milestones-track::before{
    content:"";
    position:absolute;
    left:24px;
    top:6px;
    bottom:6px;
    width:2px;
    background:linear-gradient(to bottom, #d4a017, #0d2c54);
}

.milestone{
    position:relative;
    padding:0 0 42px 66px;
}

.milestone:last-child{ padding-bottom:0; }

.milestone::before{
    content:"";
    position:absolute;
    left:15px;
    top:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    border:4px solid #d4a017;
}

.milestone-year{
    display:inline-block;
    color:#d4a017;
    font-weight:700;
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:6px;
}

.milestone h4{
    color:#0d2c54;
    font-size:20px;
    margin-bottom:8px;
}

.milestone p{
    color:#555;
    line-height:1.7;
    max-width:640px;
}

/* =============================================================
   FOUNDER AVATAR
============================================================= */

.founder-card{
    display:flex;
    align-items:center;
    gap:40px;
    text-align:left;
}

.founder-avatar{
    flex-shrink:0;
    width:130px;
    height:130px;
}

.founder-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

.founder-card .founder-text h2{
    text-align:left;
}

@media (max-width:700px){
    .founder-card{
        flex-direction:column;
        text-align:center;
    }
    .founder-card .founder-text h2{
        text-align:center;
    }
}

/* =============================================================
   INDUSTRIES WE SERVE
============================================================= */

.industries-section{
    padding:90px 10%;
    background:#fff;
}

.industries-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
    max-width:1200px;
    margin:0 auto;
}

.industry-card{
    background:var(--light-bg);
    border-radius:14px;
    padding:26px 14px;
    text-align:center;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.industry-card:hover{
    transform:translateY(-6px);
    background:#fff;
    box-shadow:0 14px 30px rgba(13,44,84,0.12);
}

.industry-card i{
    font-size:26px;
    color:#0d2c54;
    margin-bottom:10px;
}

.industry-card span{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:#222;
}

@media (max-width:1000px){
    .industries-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px){
    .industries-grid{ grid-template-columns:repeat(2,1fr); }
}

.expect-grid{
    grid-template-columns:repeat(4,1fr);
}
@media (max-width:900px){
    .expect-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
    .expect-grid{ grid-template-columns:1fr; }
}

/* =============================================================
   IMPORTANT GOVERNMENT PORTALS
============================================================= */

.portals-section{
    padding:90px 10%;
    background:var(--light-bg);
}

.portals-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    max-width:1200px;
    margin:0 auto;
}

.portal-card{
    background:#fff;
    border-radius:16px;
    padding:26px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    border:1px solid #eee;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.portal-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(13,44,84,0.12);
    border-color:transparent;
}

.portal-icon{
    flex-shrink:0;
    width:46px;
    height:46px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d2c54,#001b4d);
    color:#d4a017;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.portal-card h4{
    color:#0d2c54;
    font-size:16.5px;
    margin-bottom:6px;
}

.portal-card p{
    font-size:13.5px;
    color:#666;
    line-height:1.6;
    margin-bottom:10px;
}

.portal-card a{
    font-size:13px;
    font-weight:700;
    color:#d4a017;
    text-decoration:none;
    letter-spacing:.3px;
}

.portal-card a i{
    margin-left:4px;
    transition:transform .2s ease;
}

.portal-card a:hover i{
    transform:translateX(3px);
}

.portals-disclaimer{
    max-width:1200px;
    margin:34px auto 0;
    font-size:13px;
    color:#888;
    text-align:center;
    line-height:1.7;
}

@media (max-width:1000px){
    .portals-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .portals-grid{ grid-template-columns:1fr; }
    .portals-section, .industries-section, .milestones-section{ padding:60px 6%; }
}

/* =============================================================
   LIVE NEWS WIDGET
============================================================= */

.news-section{
    padding:90px 10%;
    background:#fff;
}

.news-widget{
    max-width:900px;
    margin:0 auto;
    background:var(--light-bg);
    border-radius:18px;
    padding:8px 0 0;
    overflow:hidden;
    border:1px solid #ececec;
}

.news-widget-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 26px;
    font-size:13px;
    font-weight:600;
    color:#0d2c54;
    letter-spacing:.3px;
    border-bottom:1px solid #e6e6e6;
}

.news-live-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#2ecc71;
    box-shadow:0 0 0 0 rgba(46,204,113,0.6);
    animation:newsPulse 1.8s infinite;
    flex-shrink:0;
}

.news-live-dot-off{
    background:#bbb;
    animation:none;
}

@keyframes newsPulse{
    0%{ box-shadow:0 0 0 0 rgba(46,204,113,0.55); }
    70%{ box-shadow:0 0 0 9px rgba(46,204,113,0); }
    100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

.news-refresh-btn{
    margin-left:auto;
    background:none;
    border:none;
    color:#0d2c54;
    cursor:pointer;
    font-size:14px;
    padding:4px 8px;
    border-radius:6px;
    transition:background .2s ease, transform .3s ease;
}

.news-refresh-btn:hover{
    background:rgba(13,44,84,0.08);
}

.news-widget.news-loading .news-refresh-btn i{
    animation:newsSpin .8s linear infinite;
}

@keyframes newsSpin{
    to{ transform:rotate(360deg); }
}

.news-list{
    list-style:none;
    margin:0;
    padding:6px 0;
}

.news-item a{
    display:block;
    padding:16px 26px;
    text-decoration:none;
    border-bottom:1px solid #e9e9e9;
    transition:background .2s ease;
}

.news-item:last-child a{ border-bottom:none; }

.news-item a:hover{
    background:#fff;
}

.news-item-title{
    display:block;
    color:#1a1a1a;
    font-size:15px;
    font-weight:600;
    line-height:1.5;
    margin-bottom:6px;
}

.news-item-meta{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    color:#888;
}

.news-dot{ color:#ccc; }

.news-widget-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 26px;
    font-size:12.5px;
    color:#999;
    background:#fff;
    border-top:1px solid #e6e6e6;
}

.news-widget-foot a{
    color:#0d2c54;
    font-weight:700;
    text-decoration:none;
}

.news-skeleton li{
    height:56px;
    margin:0 26px 10px;
    border-radius:8px;
    background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
    background-size:400% 100%;
    animation:newsShimmer 1.4s ease infinite;
    list-style:none;
}

@keyframes newsShimmer{
    0%{ background-position:100% 50%; }
    100%{ background-position:0 50%; }
}

.news-fallback{
    padding:22px 26px 28px;
}

.news-fallback p{
    color:#666;
    font-size:14px;
    line-height:1.7;
    margin-bottom:16px;
}

.news-fallback-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#0d2c54;
    color:#fff;
    padding:12px 22px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
}

@media (max-width:640px){
    .news-section{ padding:60px 6%; }
}

/* =============================================================
   FAQ ACCORDION
============================================================= */

.faq-section{
    padding:90px 10%;
    background:var(--light-bg);
}

.faq-list{
    max-width:840px;
    margin:0 auto;
}

.faq-item{
    background:#fff;
    border-radius:14px;
    margin-bottom:14px;
    overflow:hidden;
    border:1px solid #eee;
}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    background:none;
    border:none;
    text-align:left;
    font-family:Georgia, serif;
    font-size:16px;
    font-weight:700;
    color:#0d2c54;
    cursor:pointer;
}

.faq-question i{
    flex-shrink:0;
    color:#d4a017;
    transition:transform .25s ease;
}

.faq-item.open .faq-question i{
    transform:rotate(45deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.faq-answer p{
    padding:0 24px 20px;
    color:#555;
    line-height:1.75;
    font-size:14.5px;
}

@media (max-width:640px){
    .faq-section{ padding:60px 6%; }
}

/* =============================================================
   COMPLIANCE CALENDAR (resources page)
============================================================= */

.calendar-section{
    padding:90px 10%;
    background:#fff;
}

.calendar-table-wrap{
    max-width:1100px;
    margin:0 auto;
    overflow-x:auto;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.calendar-table{
    width:100%;
    border-collapse:collapse;
    min-width:640px;
    background:#fff;
}

.calendar-table th{
    background:#0d2c54;
    color:#fff;
    text-align:left;
    padding:16px 20px;
    font-size:13px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.calendar-table td{
    padding:16px 20px;
    font-size:14.5px;
    color:#333;
    border-bottom:1px solid #eee;
}

.calendar-table tr:last-child td{ border-bottom:none; }

.calendar-table tr:nth-child(even) td{ background:#fafafa; }

.calendar-table td.due-date{
    color:#0d2c54;
    font-weight:700;
    white-space:nowrap;
}

.calendar-note{
    max-width:1100px;
    margin:20px auto 0;
    font-size:13px;
    color:#888;
    text-align:center;
    line-height:1.7;
}

/* =============================================================
   RESOURCE PAGE HERO QUICK LINKS
============================================================= */

.resource-jump{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-top:26px;
    position:relative;
    z-index:1;
}

.resource-jump a{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.25);
    color:#fff;
    padding:9px 18px;
    border-radius:30px;
    font-size:13px;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease;
}

.resource-jump a:hover{
    background:rgba(212,160,23,0.25);
    border-color:#d4a017;
}

/* =============================================================
   SERVICE DETAIL — documents required strip
============================================================= */

.service-detail-card .doc-note{
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed #e2e2e2;
    font-size:12.5px;
    color:#888;
    display:flex;
    align-items:flex-start;
    gap:8px;
    line-height:1.6;
}

.service-detail-card .doc-note i{
    color:#d4a017;
    margin-top:2px;
}

.service-detail-card .portal-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:12.5px;
    font-weight:700;
    color:#0d2c54;
    text-decoration:none;
}

.service-detail-card .portal-link i{
    color:#d4a017;
}

/* =============================================================
   OFFICE BANNER (contact)
============================================================= */

.office-banner{
    width:100%;
    max-height:220px;
    overflow:hidden;
    line-height:0;
}

.office-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media (max-width:640px){
    .office-banner{ max-height:130px; }
}

/* =============================================================
   MAP EMBED (contact)
============================================================= */

.map-embed{
    max-width:1300px;
    margin:0 auto;
    height:400px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.map-note{
    max-width:1300px;
    margin:22px auto 0;
    text-align:center;
    color:#666;
    font-size:14px;
}

.map-note i{ color:#d4a017; }

.map-note a{
    color:#0d2c54;
    font-weight:700;
    text-decoration:none;
}

@media (max-width:640px){
    .map-embed{ height:300px; }
}

/* =============================================================
   GENERIC SECTION INTRO
============================================================= */

.enhance-intro{
    max-width:760px;
    margin:-40px auto 50px;
    text-align:center;
    color:#666;
    font-size:15px;
    line-height:1.8;
}