/* Extracted styles for the homepage */
/* Minimal reset to keep the original design inline-friendly */
body{
    margin:0;
    font-family:'Sofia Sans', Arial, sans-serif;
    background:#0b1020;
    color:#fff;
    overflow-x:hidden;
}
header{
    background:#000000;
    padding:20px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:999;
    backdrop-filter:blur(8px);
}
header .brand{
    font-size:32px;
    font-weight:bold;
    color:#00d4ff;
    text-shadow:0 0 10px #00d4ff;
}
header nav a{
    color:white;
    text-decoration:none;
    margin:0 12px;
}
/* Dropdown menu for categories */
.dropdown-inline{position:relative;display:inline-block}
.dropdown-inline .dropbtn{color:white;text-decoration:none;margin:0 12px;cursor:pointer}
.dropdown-inline .dropdown-content{display:none;position:absolute;background:#0f1724;min-width:180px;box-shadow:0 8px 16px rgba(0,0,0,0.6);z-index:1000;padding:8px;border-radius:8px;left:0;overflow:hidden}
.dropdown-inline .dropdown-content a{color:#fff;display:block;padding:6px 10px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.dropdown-inline .dropdown-content a:hover{background:rgba(255,255,255,0.03)}

/* Override Bootstrap dropdown hover so items don't change background on mouseover */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active{
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}
/* clip hover backgrounds to dropdown rounded corners and give first/last items matching radii */
.dropdown-inline .dropdown-content a:first-child{border-top-left-radius:6px;border-top-right-radius:6px}
.dropdown-inline .dropdown-content a:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.dropdown-inline:hover .dropdown-content{display:block}
#announcement{
    background:#1877f2;
    text-align:center;
    padding:10px;
    font-weight:bold;
    position:sticky;
    top:80px;
    z-index:998;
}
#slider{
    height:550px;
    position:relative;
    display:flex;
    align-items:center;
    padding:60px;
    transition:0.5s;
    background-position:center;
    background-size:cover;
}
 .card{
     max-width:650px;
     background:rgba(0,0,0,0.6);
     padding:30px;
     border-radius:15px;
 }

/* Position slider card at bottom-left on wide screens, keep centered on small screens */
@media (min-width:981px) {
    #slider { display:block; }
    #slider .card{
        position:absolute;
        left:40px;
        bottom:40px;
        max-width:650px;
        margin:0;
        background: rgba(0,0,0,0.6);
        padding:24px;
        border-radius:12px;
    }
}
.btn-primary{
    background:#00d4ff;
    border:none;
    padding:15px 30px;
    color:black;
    font-weight:bold;
    border-radius:8px;
    cursor:pointer;
}
.section{padding:50px 40px}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
    margin-top:20px;
}
.tile{
    background:#151c35;
    border-radius:12px;
    overflow:hidden;
    display:block; /* ensure tiles are block-level so their inner content (image + text) stays inside the panel */
    color:inherit;
    text-decoration:none;
}
footer{
    background:#050814;
    padding:30px;
    text-align:center;
    color:#888;
}
@media (max-width:600px){
    #slider{height:420px;padding:30px}
    .card h1{font-size:32px}
}

/* Latest posts grid: show 4 posts in 2x2 layout on larger screens, collapse to 1 column on small screens */
.latest-grid{ grid-template-columns: repeat(2,1fr); }
@media (max-width:576px){ .latest-grid{ grid-template-columns: repeat(1,1fr); } }

/* Two-column homepage layout: make sidebar stack below main content on small screens */
.home-two-col{ display:flex; gap:18px; align-items:flex-start }
.home-two-col > div:first-child{ flex:0 0 66.666%; }
.home-two-col > aside{ flex:0 0 33.333%; }
/* Stack the sidebar under the main content on narrower viewports.
   Increase breakpoint to 980px so the 'most read' column moves below
   the latest posts when the viewport is 980px wide or narrower. */
@media (max-width:980px){
    .home-two-col{ flex-direction:column; gap:12px }
    .home-two-col > div:first-child, .home-two-col > aside{ flex:0 0 auto; width:100% }
}

/* Category grid: default 2 columns, collapse to 1 on small screens */
.category-grid{ grid-template-columns: repeat(2,1fr); }
@media (max-width:768px){ .category-grid{ grid-template-columns: repeat(1,1fr); } }

/* Tile images: consistent aspect and responsive height */
.tile img, .tile-img { display:block; width:100%; height:180px; object-fit:cover }
@media (max-width:768px){ .tile img{ height:140px } }

/* Responsive header/nav adjustments */
header{ padding:16px 20px }
header nav{ flex-wrap:wrap }
@media (max-width:768px){
    header{ padding:12px 14px }
    header nav{ flex-direction:column; align-items:flex-start; gap:8px }
    .dropdown-inline .dropdown-content{ position:static; box-shadow:none; width:100%; margin-top:6px; display:none }
    .dropdown-inline.open .dropdown-content{ display:block }
    /* main nav mobile toggle */
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
    #mainNav{ display:none; width:100% }
    #mainNav.open{ display:flex; flex-direction:column; gap:10px }
    /* hide desktop dropdown when mobile hamburger is used to avoid duplicate category lists */
    .navbar-nav .dropdown { display: none; }
}
@media (min-width:768px){ .nav-toggle{ display:none } #mainNav{ display:flex !important } }

/* Ad placeholder default styles used across frontend views */
.ad-placeholder{ width:100%; max-width:980px; height:110px; background:#f6f6f6; border:2px dashed #d0d0d0; display:flex;align-items:center;justify-content:center;color:#666;border-radius:8px;font-weight:600 }
@media (max-width:480px){ .ad-placeholder{height:80px;font-size:14px;padding:8px} }

/* CSS hamburger (checkbox) to toggle collapse without JS */
.nav-checkbox{ display:none }
.hamburger-toggle{ width:36px; height:30px; display:inline-block; position:relative; cursor:pointer }
.hamburger-toggle span, .hamburger-toggle span:before, .hamburger-toggle span:after{ display:block; position:absolute; height:2px; width:22px; background:#fff; left:7px }
.hamburger-toggle span{ top:14px }
.hamburger-toggle span:before{ content:''; top:-8px }
.hamburger-toggle span:after{ content:''; top:8px }

@media (max-width:767px){
    /* hide bootstrap collapse by default and show when checkbox checked */
    .navbar-collapse{ display:none !important }
    #navToggleCheckbox:checked + .hamburger-toggle + .navbar-collapse{ display:block !important }
    /* mobile categories styling inside collapse */
    .mobile-cats a{ color:#fff; text-decoration:none }
}

/* Layout-specific styles originally inlined in frontend.blade.php */
body{ background:#2d4a67; color:#fff; font-family:'Sofia Sans', sans-serif; font-size:20px }
.site-logo{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:inline-block; border:2px solid rgba(255,255,255,0.08); box-shadow:0 2px 8px rgba(0,0,0,0.45) }
header .brand{ display:flex; align-items:center; gap:12px }
.brand .site-title{ font-size:18px; color:#00d4ff; font-weight:700; display:inline-block }
@media (max-width:767px){ .brand .site-title{ display:none } .site-logo{ width:44px; height:44px } }

/* Subtitle shown under the site title near the logo */
.brand .site-subtitle{
    font-size:13px;
    color:#cfeffc;
    opacity:0.9;
    line-height:1.1;
    margin-top:2px;
}
@media (max-width:767px){ .brand .site-subtitle{ display:none } }

/* Cookie consent banner styles (moved from inline) */
#cookieConsent{ position:fixed; left:0; right:0; bottom:18px; margin:0 auto; max-width:980px; background:rgba(0,0,0,0.85); color:#fff; padding:16px 18px; border-radius:10px; display:flex; gap:12px; align-items:center; z-index:1200; box-shadow:0 6px 24px rgba(0,0,0,0.6); }
#cookieConsent p{ margin:0; flex:1; color:#ddd; font-size:15px }
#cookieConsent .btn-accept{ background:#00d4ff; color:#012; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; font-weight:600 }
@media (max-width:600px){ #cookieConsent{ flex-direction:column; align-items:stretch; text-align:center } #cookieConsent p{ font-size:14px } }
#cookieConsent.hide{ display:none!important }

/* Slider / hero styles for homepage */
#slider{ justify-content:flex-start; padding-left:40px }
@media (max-width:768px){ #slider{ justify-content:center; padding-left:0 } }
#slider .card { background: rgba(0,0,0,0.35); color: #fff; padding: 24px; max-width:520px; width:100%; box-shadow:none; border:none; border-radius:10px }
#slideTitle { font-size:32px; margin:0 0 12px; font-weight:700; }
#slideText { font-size:18px; line-height:1.45; margin:0 0 16px; }
#slider .btn { padding:8px 14px; font-size:15px; }
@media (max-width:768px){ #slideTitle{font-size:24px} #slideText{font-size:15px} }
@media (max-width:420px){ #slideTitle{font-size:20px} #slideText{font-size:14px} #slider .card{padding:16px} }

#slideText{ display:none !important }

/* Ensure hero card excerpts are hidden and show a small date under titles */
.hero-card-excerpt{ display:none !important }
.post-date{ color:#cfeffc; font-size:13px; margin-top:6px }
/* slide date style (shown under slide title) */
.slide-date{ color:#cfeffc; font-size:15px; margin-bottom:8px }
#slideDots{ margin-top:12px; display:flex; gap:8px; align-items:center }
.slide-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; background:rgba(255,255,255,0.35); cursor:pointer }

/* Categories list styles */
.categories-list{ display:flex; gap:20px; flex-wrap:wrap; margin-top:20px }
.category-tile{ padding:20px; border-radius:12px; flex:1; min-width:150px; text-align:center; text-decoration:none; color:inherit; display:flex; align-items:center; justify-content:center }

/* Post tile inner content */
.tile-body{ padding:20px }
.post-category{ font-size:16px; color:#00d4ff; font-weight:700; margin-bottom:6px }
.post-title{ margin:0 0 8px }
.post-excerpt{ margin:0; color:#aaa }

/* Homepage videos grid moved from inline styles */
.home-videos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px }
@media (max-width:992px){ .home-videos-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:768px){ .home-videos-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .home-videos-grid{ grid-template-columns:1fr } }
.home-video-tile{ padding:0; border-radius:12px; display:block; overflow:hidden; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); box-shadow:0 2px 6px rgba(0,0,0,0.45); text-decoration:none; color:inherit }
.home-video-thumb{ width:100%; height:180px; object-fit:cover; display:block }
.home-video-title{ padding:12px; text-align:center; color:#fff; font-size:20px; min-height:64px; display:flex; align-items:center; justify-content:center }

/* Random fact section */
.centered-section{ text-align:center }
.section-title{ font-size:32px }
.random-fact-text{ font-size:22px; margin:20px 0 }

/* Related videos (used on video details page) */
.related-tile{ flex:1; min-width:180px; max-width:31%; text-decoration:none; color:inherit; border-radius:8px; overflow:hidden; background:#151c35; padding:0 }
.related-thumb{ width:100%; height:120px; object-fit:cover; display:block }
.related-title{ padding:10px; font-size:16px; color:#fff; text-align:center }

.post-content tbody, td, tfoot, th, thead, tr {
    border-width: 1px !important;
}
.post-content table {
    width:100% !important;
}

/* Categories with posts: featured + 3-card grid */
.category-with-posts{ margin-bottom:40px }
/* Category heading with full-width underline and a highlighted title with a slashed (diagonal) right edge */
:root{ --category-accent:#00d4ff }
.category-title{ margin:0 0 12px; font-size:22px; color:var(--text-color, #fff); position:relative;  border-bottom:2px solid var(--category-accent) }
.category-title a{ color:#012; text-decoration:none; font-weight:700; display:inline-block; position:relative; padding:5px 12px 5px 5px; background:var(--category-accent); z-index:2 }
.category-title a::after{ display:none }
.category-title a:hover{ color:#001 }

.cat-featured-card{ display:flex; gap:18px; align-items:stretch; background:#0f1724; border-radius:10px; overflow:hidden; text-decoration:none; color:inherit }
.cat-featured-text{ padding:20px; flex:1; display:flex; flex-direction:column; justify-content:center }
.cat-featured-text .post-category{ font-size:13px; color:#9aa; margin-bottom:6px }
.cat-featured-title{ font-size:20px; margin:0 0 8px }
.cat-featured-excerpt{ margin:0; color:#bbb }
.cat-featured-image{ width:40%; min-width:220px; background-size:cover; background-position:center }

.cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px }
.cat-card{ position:relative; border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; background-size:cover; background-position:center; padding-top:56% }
.cat-card-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%); padding:12px }
.cat-card-title{ margin:0; color:#fff; font-weight:600; font-size:16px }

@media (max-width:980px){
    .cat-featured-card{ flex-direction:column-reverse }
    .cat-featured-image{ width:100%; height:180px; min-width:0; background-size:cover }
    .cat-grid{ grid-template-columns: repeat(2,1fr) }
    .cat-card{ padding-top:48% }
}

@media (max-width:576px){
    .cat-grid{ grid-template-columns: repeat(1,1fr) }
}

/* Most read box on the right of category listing */
.most-read-box{ background:rgba(255,255,255,0.03); padding:16px; border-radius:8px; position:relative }
.most-read-box h3{ margin:0 0 12px }
.most-read-box ol{ margin:0; padding-left:18px }

/* Make the entire right column (aside) sticky so the Most-read and the banner
   stay together while scrolling. This avoids the Most-read box overlapping the ad. */
.home-two-col > aside { position:sticky; top:110px; align-self:start }

@media (max-width:980px){
    /* on small screens stack the aside under the categories */
    .home-two-col{ flex-direction:column }
    .home-two-col > aside { position:static }
}

/* Hero: left 2/3 slider, right 1/3 two latest post cards */
.home-hero-inner{ display:flex; gap:18px; align-items:stretch; flex-wrap:nowrap }
.hero-slider{ flex:0 0 66.666%; display:flex }
.hero-slider #slider{ width:100%; display:flex; align-items:center; padding-left:40px }
.hero-cards{ flex:0 0 33.333%; display:flex; flex-direction:column; justify-content:flex-start; gap:12px }

/* On wide screens make each card share the available height equally */
.hero-card{ display:block; text-decoration:none; color:inherit; background-size:cover; background-position:center; border-radius:8px; align-items:flex-end; flex:1; min-height:0; position:relative; overflow:hidden }
.hero-card + .hero-card{ margin-top:12px }
.hero-card-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end }
.hero-card-body{ width:100%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%); padding:12px }
.hero-card .post-category{ font-size:13px; color:#9aa }
.hero-card-title{ margin:4px 0; font-weight:600; color:#fff }
.hero-card-excerpt{ margin:0; color:#bbb; font-size:13px }
.view-all-link{ margin-top:auto; color:#00d4ff; text-decoration:none; font-weight:700 }
.no-posts{ color:#aaa; padding:8px }

/* generic lazy background helper: elements with data-bg or .lazy-bg will get their
   background-image set by JS. Provide sensible defaults for sizing and positioning. */
.lazy-bg{ background-size:cover; background-position:center; background-repeat:no-repeat }

/* Move hero cards under the slider for viewports <= 980px (mobile/tablet)
   Previously this stacked at 900px; the requirement is to stack when
   width is less than 980px and ensure the cards remain visible. */
@media (max-width:980px){
    .home-hero-inner{ flex-direction:column }
    .hero-slider{ flex-basis:100% }
    .hero-slider #slider{ justify-content:center; padding-left:0 }
    /* On small screens show the two hero cards side-by-side beneath the slider.
       Each card will take 50% of the row so they sit next to each other on mobile. */
    .hero-cards{ display:flex !important; flex-basis:100%; width:100%; flex-direction:row; flex-wrap:wrap; gap:12px; align-items:stretch }
    /* avoid wrapping caused by gap + 50% widths on very narrow devices by subtracting half the gap
       so two cards fit the row exactly */
    .hero-card{ width:calc(50% - 6px); flex:0 0 calc(50% - 6px); margin-top:0; min-height:160px; box-sizing:border-box }
    /* ensure the adjacent-card top margin used on desktop does not apply on mobile */
    .hero-card + .hero-card{ margin-top:0 }

    /* On narrow screens hide the excerpt inside the small hero cards so only the title shows */
    .hero-card-excerpt{ display:none }

    /* reduce hero card titles on mobile to 14px as requested */
    .hero-card .hero-card-title { font-size:14px; }
}

/* Center page content and limit width to 80% on wider screens (desktop) */
@media (min-width:981px){
    main{ width:70%; margin:0 auto; }
}


/* Recent posts list (sidebar) */
.recent-posts-list { list-style:none; padding-left:0; margin:0; color:#fff }
.recent-posts-list .recent-post-item { display:block }
.recent-posts-list .recent-post-item a { display:block }
.recent-posts-list .recent-post-item img { display:block }
.recent-posts-list .recent-post-item .title { color:inherit }

/* Scroll-to-top button (fixed, left-bottom) */
.scroll-top-btn{
    position:fixed;
    left:18px;
    bottom:18px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(0,0,0,0.6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.45);
    cursor:pointer;
    z-index:1300;
    transition:transform .18s ease, opacity .18s ease;
    opacity:0;
    transform:translateY(8px) scale(.95);
}
.scroll-top-btn.show{ opacity:1; transform:translateY(0) scale(1); }
.scroll-top-btn:hover{ transform:scale(1.03) }
.scroll-top-btn i{ font-size:16px }

/* Separator between recent-post items: thin subtle line */
.recent-posts-list .recent-post-item{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06) }
.recent-posts-list .recent-post-item:last-child{ border-bottom:0; padding-bottom:0 }

/* Most-read box: allow removing background via .no-bg modifier */
.most-read-box.no-bg{ background:transparent }
.cat-featured-excerpt {
    font-size:14px;
}