/*
Theme Name: AccuWeather Clone Theme
Description: A custom theme built exactly from the provided static HTML.
Author: Your Name
Version: 1.0
*/

/* ---------------- CUSTOM FONTS ---------------- */
@font-face {
    font-family: 'knowledge-regular';
    src: url('fonts/knowledge-regular.woff') format('woff2'),
         url('fonts/knowledge-regular.woff') format('woff'),
         url('fonts/knowledge-regular.woff') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'knowledge-regular';
    src: url('fonts/knowledge-bold.woff2') format('woff2'),
         url('fonts/knowledge-bold.woff') format('woff'),
         url('fonts/knowledge-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------- CSS RESET & BASE ---------------- */
*{margin:0;padding:0;box-sizing:border-box;}
body{
    background-color:#f4f4f4; /* Gray background for the public site */
    color:#222;
    overflow-x:hidden;
    word-wrap:break-word;
    font-family: 'knowledge-regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 15px;background:#fff;width:100%;}

/* Utility */
.text-orange{color:#f05523}
.text-blue{color:#2a7de1}
.font-bold{font-weight:700}
.font-small{font-size:12px;color:#666}

/* ---------------- HEADER ---------------- */
header{background:#1f1f1f;border-bottom:none;padding:12px 0;position:relative;z-index:100;}
.header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:15px;background:transparent}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:21px;letter-spacing:-0.5px;color:#fff;white-space:nowrap}

.header-right {display:flex;align-items:center;}
.header-search{display:flex;align-items:center;background:#fff;border-radius:4px;padding:8px 14px;width:380px;max-width:100%;gap:10px}
.header-search input{border:none;background:transparent;outline:none;font-size:14px;width:100%;color:#333}
.header-search input::placeholder{color:#777}
.header-search > svg{width:18px;height:18px;fill:#666;flex-shrink:0}
.search-icon-btn {display:none;} 

/* ---------------- NAVIGATION ---------------- */
.main-nav{background:#fff;padding:0}
.nav-wrapper{position:relative;border-bottom:1px solid #dcdcdc;overflow:hidden;padding:0 15px}
.nav-list{display:flex;gap:35px;font-size:13px;font-weight:500;color:#5a7b9c;padding:14px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;padding-right:40px}
.nav-list::-webkit-scrollbar{display:none}
.nav-list li a{color:#161616;transition:color 0.2s}
.nav-list li a:hover, .nav-list li a.active, .nav-list li.current-menu-item > a{color:#161616}

.nav-arrow{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;padding-left:30px;padding-right:15px;background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);width:60px;pointer-events:none}
.nav-arrow svg{width:20px;height:20px;fill:#222}

/* ---------------- BREADCRUMB ---------------- */
.breadcrumb{padding:15px 0;font-size:12px;color:#666;text-transform:uppercase;}
.breadcrumb span{color:#999}

/* ---------------- LAYOUT GRID (Blog/Article) ---------------- */
/* Default to the 2-column grid for News and Articles */
.content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* Category Header (News List) */
.category-header {margin-bottom: 30px}
.category-title {font-size: 32px; font-weight: 700; color: #222; margin-bottom: 10px; line-height: 1.2;}
.category-desc {font-size: 16px; color: #555; line-height: 1.5; max-width: 800px;}

/* Article List */
.article-list {display: flex;flex-direction: column;gap: 15px;}
.list-item {display: flex;gap: 20px;padding-bottom: 15px;/* margin-bottom: 15px; */border-bottom: 1px solid #eee;}
.list-thumb {width: 250px; flex-shrink: 0; background: #eee;}
.list-thumb img {width: 100%; height: 160px; object-fit: cover; display: block;}
.list-content {display: flex; flex-direction: column; flex: 1;}
.list-cat {color: #f05523; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;}
.list-title {font-size: 20px; font-weight: 600; line-height: 1.25; color: #222; margin-bottom: 8px;}
.list-title a {color: inherit;}
.list-title a:hover {color: #f05523;}
.list-desc {font-size: 15px; color: #444; line-height: 1.5; margin-bottom: 12px;}
.list-date {font-size: 13px; color: #000; font-weight: 500;}

/* Pagination */
.pagination {display: flex;justify-content: center;align-items: center;margin-top: 12px;}
.page-btn, .pagination .page-numbers {padding: 8px 14px; border: 1px solid #ddd; background: #fff; border-radius: 4px; font-size: 13px; font-weight: 600; color: #333; transition: all 0.2s; display:inline-block;}
.page-btn:hover, .pagination .page-numbers:hover {background: #f4f4f4;}
.page-btn.active, .pagination .page-numbers.current {border-color: #161616;background: #161616;color: #fff;}
.page-dots {font-size: 13px; color: #666; padding: 0 5px;}

/* ---------------- SINGLE ARTICLE ---------------- */
.article-title{font-size:32px;font-weight:700;margin-bottom:10px;line-height:1.2}
.article-sub{font-size:16px;line-height:1.5;color:#333;margin-bottom:15px}
.article-meta{font-size:12px;color: #161616;margin-bottom:15px;display:flex;flex-wrap:wrap;gap:5px;line-height:1.6}
.article-meta a{color:#2a7de1;font-weight:600;}
.article-meta a:hover{text-decoration:underline}

.social-share{display:flex;gap:10px;margin-bottom:20px}
.social-share svg{width:20px;height:20px;fill:#666;cursor:pointer;transition:fill 0.2s}
.social-share svg:hover{fill:#333}

.hero-img{width:100%;border-radius:4px;margin-bottom:15px;position:relative}
.hero-img img{width:100%;height:auto;border-radius:4px}
.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:rgba(0,0,0,0.5);border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background 0.2s}
.play-overlay:hover{background:rgba(240, 85, 35, 0.8)}
.play-overlay svg{fill:#fff;width:24px;height:24px}
.hero-caption{font-size:12px;color: #161616;margin-bottom:30px}
.hero-caption strong{color:#333}

.article-body p{font-size: 16px;line-height:1.6;color: #000000;margin-bottom:20px}
.article-body a{color:#f05523}
.article-body a:hover{text-decoration:underline}

/* Article List Styles */
.article-body ul { list-style-type: disc; margin-left: 25px; margin-bottom: 20px; }
.article-body ol { list-style-type: decimal; margin-left: 25px; margin-bottom: 20px; }
.article-body li { font-size: 17px; line-height: 1.6; color: #222; margin-bottom: 10px; }

.article-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 13px; color: #111; line-height: 1.2;}
.article-body h3 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; color: #222; line-height: 1.3; }
.article-body h4 { font-size: 18px; font-weight: 700; margin: 25px 0 10px; color: #222; line-height: 1.4; }
.article-body h5 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; color: #333; line-height: 1.4; }

.inline-img, .article-body figure{margin:30px 0;border-radius:4px}
.inline-img img, .article-body figure img{width:100%;border-radius:4px}
.inline-img figcaption, .article-body figure figcaption{font-size:12px;color:#666;margin-top:8px}
.inline-img figcaption strong{color:#333}

.tags-container {display: flex;align-items: center;gap: 12px;margin-top: 30px;flex-wrap: wrap;padding-top:20px;border-top:1px solid #eee;}
.tags-label {font-size: 13px;font-weight: 600;color: #666;letter-spacing: 0.5px;text-transform: uppercase;}
.tag-btn, .tags-container a {display: inline-block;padding: 6px 16px;border: 1px solid #ddd;border-radius: 20px;font-size: 14px;font-weight: 600;color: #1a568c;background: #fff;transition: all 0.2s ease;}
.tag-btn:hover, .tags-container a:hover {border-color: #a0a0a0;background-color: #f9f9f9;}

/* ---------------- PRIVACY POLICY LAYOUT (WordPress Page) ---------------- */
/* Override the grid on static Pages to match your original HTML */
body.page .content-wrapper {
    display: block; 
    max-width: 900px; 
    margin: 0 auto; 
    padding-bottom: 60px; 
}

.page-header { margin-top: 10px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px; }
.page-title { font-size: 28px; font-weight: 700; color: #222; margin-bottom: 8px; }
.last-updated { font-size: 13px; color: #666; text-transform: uppercase; }

.policy-body { font-size: 15px; line-height: 1.6; color: #333; }
.policy-body h2 { font-size: 18px; font-weight: 700; color: #111; margin: 35px 0 15px; text-transform: uppercase; letter-spacing: 0.5px; }
.policy-body p { margin-bottom: 18px; }
.policy-body a { color: #2a7de1; text-decoration: none; }
.policy-body a:hover { text-decoration: underline; }

.policy-body ul { list-style-type: disc; margin-left: 25px; margin-bottom: 20px; }
.policy-body li { margin-bottom: 10px; line-height: 1.6; }
.policy-body strong { color: #222; }

/* ---------------- SIDEBAR ---------------- */
.sidebar{background:#fff;padding:20px 0;}
.sidebar h3{font-size:18px;font-weight:700;margin-bottom:15px}
.sidebar-item{display:flex;gap:15px;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #eee}
.sidebar-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.sidebar-item .info{flex:1}
.sidebar-item .cat{font-size:10px;font-weight:700;text-transform:uppercase;color:#555;margin-bottom:3px}
.sidebar-item .title{font-size:14px;font-weight:600;line-height:1.3;color:#222}
.sidebar-item .title:hover{color:#f05523}
.sidebar-item .thumb{width:80px;height:60px;border-radius:4px;object-fit:cover;flex-shrink:0}

/* ---------------- FOOTER ---------------- */
footer{background:#fff;}
.footer-breadcrumb {background-color: #f8f8f8;padding: 18px 0;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #eee;}
.footer-breadcrumb .container {display: flex;align-items: center;gap: 10px;font-size: 15px;color: #161616;background: transparent;overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
.footer-breadcrumb .container::-webkit-scrollbar { display: none; }
.footer-breadcrumb a {color: #161616;transition: color 0.2s;}
.footer-breadcrumb a:hover { color: #f05523; }
.footer-breadcrumb svg {width: 18px;height: 18px;fill: #161616;flex-shrink: 0;}

.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:40px 0 20px;}
.footer-col h4{font-size:13px;font-weight:500;color:#161616;margin-bottom:15px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.footer-col h4 .chevron {display:none;} 
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{font-size:13px;color: #161616;}
.footer-col ul li a:hover{color:#f05523}

.footer-social{display:flex;gap:15px;padding-bottom:30px;flex-wrap:wrap;}
.footer-social svg{width:40px;height:40px;}

.footer-bottom{text-align:center;font-size:12px;color: #161616;border-top:1px solid #eee;padding:25px 0}
.footer-bottom .bottom-links {margin-top: 10px; font-weight: 600; display:flex; justify-content:center; flex-wrap:wrap; gap:8px;}
.footer-bottom a{color: #161616;}
.footer-bottom a:hover{text-decoration:underline}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:992px){
    .content-wrapper{grid-template-columns:1fr;gap:30px}
}
@media(max-width:768px){
    .header-search { display: none; }
    .search-icon-btn { display: block; fill: #fff; width: 24px; height: 24px; cursor: pointer; }
    .header-search.active { display: flex; position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #fff; border-radius: 0; padding: 12px 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-bottom: 1px solid #ddd; z-index: 99; }
    .nav-list{gap:20px;font-size:13px}
    
    .list-item {gap: 15px; align-items: flex-start;}
    .list-thumb {width: 180px;}
    .list-thumb img {height: 120px;}
    .list-title {font-size: 20px; margin-bottom: 6px;}
    .list-desc {font-size: 13px; margin-bottom: 8px;}
    
    .page-title {font-size: 24px;}
    .article-title{font-size:26px}
    .policy-body h2 {font-size: 16px;}

    /* Footer Accordion Fixes */
    .footer-grid { grid-template-columns: 1fr; gap: 0; padding: 10px 0 20px; }
    .footer-col h4 {cursor: pointer;padding: 18px 0;margin-bottom: 0;color: #161616;font-size: 14px;-webkit-tap-highlight-color: transparent;}
    .footer-col h4 .chevron { display: block; width: 20px; height: 20px; fill: #222; transition: transform 0.3s ease; }
    .footer-col ul { display: none; padding-bottom: 15px; }
    .footer-col.active ul { display: block; }
    .footer-col.active h4 .chevron { transform: rotate(180deg); }
}
@media(max-width:576px){
    header{padding:10px 0}
    .header-inner{gap:10px;}
    .logo {font-size: 16px; gap: 6px;}
    .logo svg {width: 24px; height: 24px;}
    
    .category-title {font-size: 26px;}
    .category-desc {font-size: 15px;}
    .list-item {gap: 12px;}
    .list-thumb {width: 110px;}
    .list-thumb img {height: 80px;}
    .list-cat {font-size: 11px; margin-bottom: 3px;}
    .list-title {font-size: 15px; font-weight:400; margin-bottom: 4px;}
    .list-desc {display: none;}
    .list-date {font-size: 11px;}
    .pagination {}
    .page-btn, .pagination .page-numbers {padding: 6px 10px; font-size: 12px;}

    .article-title{font-size:24px}
    .social-share{gap:12px}
    .social-share svg{width:22px;height:22px}
    
    .footer-breadcrumb .container { font-size: 14px; }
}