/*
Theme Name: Traveller International Weekly
Theme URI: https://travellerweekly.com
Author: Traveller International Weekly
Author URI: https://travellerweekly.com
Description: Custom magazine-style theme for Traveller International Weekly, a travel news and guides publication. Inspired by AeroTime and Travel and Tour World layouts.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: traveller-international-weekly
*/

/* ===== Variables ===== */
:root{
  --navy:#0b2545;
  --teal:#0f6f6a;
  --orange:#e8590c;
  --bg:#ffffff;
  --bg-alt:#f6f7f9;
  --text:#1b2430;
  --muted:#5c6672;
  --border:#e6e8ec;
  --radius:8px;
  --maxw:1200px;
  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'Inter', -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--teal); }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.2; margin:0 0 .5em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ===== Header ===== */
.site-header{ border-bottom:1px solid var(--border); background:var(--bg); }
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
}
.site-logo .logo-text{
  font-family:var(--font-head); font-weight:800; font-size:26px;
  color:var(--navy); letter-spacing:.5px;
}
.subscribe-btn{
  background:var(--orange); color:#fff !important; padding:10px 22px;
  border-radius:4px; font-weight:600; font-size:14px;
}
.subscribe-btn:hover{ background:#c94a00; color:#fff !important; }

.main-nav{
  border-top:1px solid var(--border);
  display:flex; align-items:center;
}
.nav-menu{
  list-style:none; display:flex; gap:28px; margin:0; padding:12px 0;
  flex-wrap:wrap;
}
.nav-menu a{
  font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--navy);
}
.nav-toggle, .nav-toggle-label{ display:none; }

@media(max-width:820px){
  .nav-toggle-label{
    display:block; cursor:pointer; padding:12px 0;
  }
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{
    content:''; display:block; width:26px; height:2px; background:var(--navy); position:relative; margin:6px 0;
  }
  .nav-menu{
    flex-direction:column; gap:0; max-height:0; overflow:hidden; width:100%;
    transition:max-height .3s ease;
  }
  .nav-menu li{ border-top:1px solid var(--border); }
  .nav-menu a{ display:block; padding:12px 0; }
  .nav-toggle:checked ~ .nav-menu{ max-height:600px; }
}

/* ===== Layout ===== */
.site-main{ padding:30px 20px 60px; }
.content-layout{
  display:grid; grid-template-columns:2.2fr 1fr; gap:40px;
  max-width:var(--maxw); margin:0 auto;
}
@media(max-width:900px){ .content-layout{ grid-template-columns:1fr; } }

.section-title{
  font-size:22px; border-bottom:3px solid var(--orange); padding-bottom:10px;
  margin-bottom:24px; color:var(--navy);
}

.category-tag{
  display:inline-block; background:var(--teal); color:#fff; font-size:11px;
  font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:4px 10px; border-radius:3px; margin-bottom:10px;
}

/* ===== Hero ===== */
.hero-post{
  display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center;
  margin-bottom:50px; padding-bottom:40px; border-bottom:1px solid var(--border);
}
.hero-image img{ border-radius:var(--radius); }
.hero-text h1{ font-size:34px; margin:6px 0 14px; }
.hero-text p{ color:var(--muted); margin-bottom:18px; }
.read-more-btn{
  display:inline-block; background:var(--navy); color:#fff !important;
  padding:10px 20px; border-radius:4px; font-weight:600; font-size:14px;
}
.read-more-btn:hover{ background:var(--teal); color:#fff !important; }
@media(max-width:700px){ .hero-post{ grid-template-columns:1fr; } }

/* ===== Post grid ===== */
.post-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
}
@media(max-width:600px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:#fff; transition:box-shadow .2s ease;
}
.post-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.post-card-img img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
.post-card-body{ padding:16px; }
.post-card-body h3{ font-size:18px; margin:4px 0 8px; }
.post-card-body p{ color:var(--muted); font-size:14px; margin:0; }

/* ===== Sidebar ===== */
.sidebar .widget{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin-bottom:24px;
}
.widget-title{ font-size:16px; border-bottom:2px solid var(--orange); padding-bottom:8px; color:var(--navy); }
.trending-item{ padding:10px 0; border-bottom:1px solid var(--border); font-weight:600; font-size:14px; }
.trending-item:last-child{ border-bottom:none; }
.newsletter-widget{ background:var(--navy); color:#fff; }
.newsletter-widget .widget-title{ color:#fff; border-color:var(--orange); }
.newsletter-widget p{ color:#cfd8e3; font-size:14px; }
.newsletter-form{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.newsletter-form input{ padding:10px; border-radius:4px; border:none; }
.newsletter-form button{
  background:var(--orange); color:#fff; border:none; padding:10px; border-radius:4px;
  font-weight:600; cursor:pointer;
}
.newsletter-form button:hover{ background:#c94a00; }

/* ===== Single / Page ===== */
.single-post h1{ font-size:32px; }
.post-meta{ color:var(--muted); font-size:13px; margin-bottom:20px; }
.single-featured-img{ margin-bottom:24px; }
.single-featured-img img{ border-radius:var(--radius); }
.post-content{ font-size:17px; }
.post-content p{ margin-bottom:1.2em; }
.pagination{ margin-top:30px; }

/* ===== Comments ===== */
.comments-area{ margin-top:50px; border-top:1px solid var(--border); padding-top:30px; }
.comment-list{ list-style:none; padding:0; }

/* ===== Footer ===== */
.site-footer{ background:var(--navy); color:#cfd8e3; margin-top:40px; }
.footer-widgets{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:24px;
  padding:40px 20px;
}
.footer-widget-title{ color:#fff; font-size:15px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:18px 20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px;
}
.footer-menu{ list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.footer-menu a:hover{ color:#fff; }