/* --- Import Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap');

/* - -- General Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito Sans', Arial, Helvetica, sans-serif; /* Apply font globally */
}

body {
  background: #f9f9f9;
  color: #333;
  line-height: 1.6;
}

/* --- Header --- */
header {
  background: #fff;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo { font-weight: 700; font-size: 1.5rem; color:#ff3b3f; }
nav ul { display:flex; list-style:none; gap:20px; }
nav ul li a { text-decoration:none; color:#333; font-weight:500; transition:0.2s; }

/* Active menu item background highlight */
nav ul li.active a {
  background-color: rgba(255, 204, 204, 0.3); /* soft pinkish tint, adjust as needed */
  padding: 6px 12px;   /* space around the text */
  border-radius: 6px;  /* rounded corners for smooth look */
  font-weight: 600;    /* slightly bolder than normal */
  transition: background 0.3s ease; /* smooth hover transition */
}

/* Optional: hover effect for all menu items */
nav ul li a:hover {
  background-color: rgba(255, 204, 204, 0.2);
  border-radius: 6px;
}



main { margin: 0; padding: 0; }

/* Post Header */
.post-header {
  background: #fff;        /* optional: keep white background */
  padding: 2rem 1rem;      /* space around title and meta */
  font-family: 'Nunito Sans', sans-serif;
  display: block;           /* normal block flow */
  box-shadow: none;         /* remove shadow if any */
  border-bottom: 1px solid #eee; /* optional underline */
  position: static;         /* ensure it is not sticky */
  top: auto;                /* reset top */
  width: 100%;              /* full width */
  margin-bottom: 2rem;      /* spacing below header */
}

/* Title */
.post-header h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: #111;
}

/* Meta */
.post-header .meta {
  font-size: 0.95rem;
  color: #555;
}


/* --- Article Layout --- */
.article-container {
  max-width:800px; margin:30px auto;
  background:#fff; padding:20px 30px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
.article-container img { width:100%; border-radius:10px; margin:20px 0; }
.article-container h1 { font-size:2rem; margin-bottom:10px; color:#ff3b3f; }
.article-meta { font-size:0.9rem; color:#777; margin-bottom:20px; }

/* Single Post Images */
.single-post img.featured-image {
  width: 50%;           /* 50% of viewport width */
  max-width: 740px;     /* optional max width */
  display: block;
  margin: 20px auto;    /* center horizontally with spacing */
  border-radius: 12px;
  object-fit: cover;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .single-post img.featured-image {
    width: 90%;         /* almost full width on small screens */
  }
}

/* --- Social Share Buttons --- 

.social-share {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.social-share a,
.social-share .copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #ff3b3f;
  border: 1.5px solid #ddd;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-share a:hover,
.social-share .copy-btn:hover {
  background: #ff3b3f;
  color: #fff;
  border-color: #ff3b3f;
}
  */
  
 /* --- Social Share (Base) --- */
.social-share {
  display:flex; gap:10px; margin:15px ;
}
.social-share a, .copy-btn {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  background:#ff3b3f; color:#fff; font-size:18px;
  transition:0.2s; cursor:pointer; text-decoration:none;
}
.social-share a:hover, .copy-btn:hover { background:#e03236; color: #fff; }


/* --- Related Articles --- */
.related { margin-top:40px;  text-align: center; }
.related h3 { margin-bottom:15px; color:#ff3b3f; }
.related-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:15px;
}
.related .card {
  background:#fff; border-radius:10px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  overflow:hidden; transition:0.3s;
  border:1px solid ;
  position: relative; /* for like-btn */
}
.related .card:hover { transform: translateY(-5px); }
.related .card img { width:100%; height:120px; object-fit:cover; }
.related .card-content { padding:10px; }
.related .card-content h4 { font-size:1rem; margin-bottom:5px; color:#333; }
.related .card-content a { text-decoration:none; color:#ff3b3f; font-weight:600; }

/* --- Categories --- */
.categories { display:flex; gap:10px; padding:20px 40px; flex-wrap:wrap; }
.categories button {
  padding:10px 20px; border:none; border-radius:20px;
  background:#ff3b3f; color:#fff; cursor:pointer; transition:0.2s;
}
.categories button:hover { background:#e03236; }

/* Modal overlay */
/* Modal overlay */
.modal {
  position: fixed; /* always fixed on screen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  display: none; /* hidden initially */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


/* Modal content box */
.modal-content {
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  text-align: center;
  position: relative;
}


/* Optional: overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 900;
  display: none;
}

/* Close button */
#modal-x {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Modal categories buttons container */
.modal-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.modal-categories a button {
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  background: #FF6B6B;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.modal-categories a button:hover {
  background: #005fa3;
}

/* Modal Close button */
#modal-close {
  margin-top: 20px;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background: #555;
  color: white;
  cursor: pointer;
}
#modal-close:hover {
  background: #333333; /* darker on hover */
}


/* --- Cards Grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
}
.card {
  background:#fff;
  border-radius:10px;
  border:1px solid ;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  transition:0.3s;
  position: relative; /* for like-btn */
}

.card a {
  
  color: inherit;
  text-decoration: none;
}

.card h3 a {
  color: #333; /* normal text color */
  text-decoration: none;
  transition: color 0.3s ease;
}

.card h3 a:hover {
  color: #ff3b3f; /* your accent red */
  text-decoration: underline;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit; /* use normal text color */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}





.card-link h3 {
  color: #333;
  transition: color 0.3s ease;
}

.card-link:hover h3 {
  color: #ff3b3f; /* your accent red */
  text-decoration: underline;
}



.read-more {
  display: inline-block;
  padding: 6px 12px;
  background: #ff3b3f;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}
.read-more:hover {
  background: #e03236;
}

/* --- Single Post --- */
.single-post {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.single-post h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 15px;
}

.single-post .meta {
  font-size: 14px;
  color: #777;
  margin-bottom: 25px;
}

.single-post img {
  width: 100%;
  border-radius: 12px;
  margin: 20px 0;
}

.single-post p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

.single-post blockquote {
  border-left: 4px solid #ff3b3f;
  padding-left: 15px;
  color: #555;
  font-style: italic;
  margin: 20px 0;
}

.single-post .tags {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Tags Page --- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.tags a {
  background: #f1f1f1;
  color: #333;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.tags a:hover {
  background: #ff3b3f;
  color: #fff;
}

/* --- Tags Index Page --- */
.tags-index {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.tags-index h1 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #333;
}

/* Grid layout */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* Individual tag card */
.tag-card {
  background: #fff;
  border-radius: 12px;
  border:1px solid;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.tag-card a {
  display: block;
  padding: 25px 15px;
  color: inherit;
  text-decoration: none;
}

.tag-card h2 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #333;
  transition: color 0.3s ease;
}

.tag-card p {
  font-size: 14px;
  color: #777;
}

/* Hover effects */
.tag-card:hover {
  background:yellow; 
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.tag-card:hover h2 {
  color: black; /* accent color */
}

/* --- Tag Page Listing --- */
.tags-index {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.tag-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tag-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.tag-card img {
    width: 100%;
    height: 180px;       /* Keeps images uniform */
    object-fit: cover;   /* Crops smartly to fit container */
    border-bottom: 1px solid #eee;
    display: block;
}

.tag-card h2 {
    font-size: 1.2rem;
    margin: 12px 15px 6px 15px;
    color: #333;
}

.tag-card p {
    font-size: 0.9rem;
    color: #777;
    margin: 0 15px 12px 15px;
}

.tag-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}



/* Ensure single article cards on tag pages are centered and limited in width */
.tag-posts .card-grid {
  display: flex;
  justify-content: center; /* center even if one card */
  flex-wrap: wrap;         /* wrap multiple cards if needed */
  gap: 1.5rem;             /* spacing between cards */
}

.tag-posts .card-grid > .card {
  max-width: 600px;        /* prevents a single card from stretching full width */
  width: 100%;             /* responsive within max-width */
  margin: 0 auto;          /* centers the card horizontally */
}


/* --- Contact Page --- */
.page-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    font-family: 'Nunito Sans', sans-serif;
    color: #333;
    line-height: 1.8;
}

.page-content h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ff3b3f;
}

.page-content h2, .page-content h3 {
    color: #ff3b3f;
    margin-bottom: 15px;
}

.page-content p {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: #444;
}

.page-content a {
    color: #ff3b3f;
    text-decoration: none;
    transition: color 0.3s;
}

.page-content a:hover {
    color: #e03236;
    text-decoration: underline;
}

/* Contact Form Specific */
.contact-form {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
}

.contact-form h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: #ff3b3f;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    transition: border 0.3s, box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #ff3b3f;
    box-shadow: 0 0 8px rgba(255, 64, 63, 0.3);
}

.contact-form button {
    width: 100%;
    padding: 16px;
    background: #ff3b3f;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button:hover {
    background: #e03236;
}






.page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.page .page-content p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.read-more-text {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #ff3b3f;
  font-weight: 600;
  transition: color 0.2s;
}

.read-more-text:hover {
  color: #e03236;
}



.card:hover { transform: translateY(-5px); }
.card img { width:100%; height:auto; object-fit:contain; position: relative;  overflow: hidden; }
.card-content { padding:15px; }
.card-content h3 { font-size:1.2rem; margin-bottom:5px; line-height: 1.4; color:#ff3b3f; font-weight: 600; }
.card-content .meta { font-size:0.8rem; color:#777; margin-bottom:10px; }
.card-content p { font-size:0.95rem; margin-bottom:10px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; color: #444;   }
.card-content a { text-decoration:none; color:#ff3b3f; font-weight:600; }
.card-banner {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff3b3f;   /* 🔴 Pick category color later */
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.card-ribbon {
  position: absolute;
  top: 15px;
  left: -40px;
  width: 160px;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(-45deg);
  padding: 5px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 2;
}

/* Default */
.card-ribbon {
  background: #FF3B3F; /* fallback red */
}

/* 🎨 Category-based colors */
.card-ribbon.sports {
  background: #1E90FF; /* blue */
}
.card-ribbon.politics {
  background: #228B22; /* green */
}
.card-ribbon.entertainment {
  background: #FF1493; /* pink */
}
.card-ribbon.technology {
  background: #8A2BE2; /* purple */
}
.card-ribbon.business {
  background: #FFA500; /* orange */
}
.card-ribbon.health {
  background: #DC143C; /* crimson */
}

.card-banner[data-category="Sports"] { background: #007bff; }
.card-banner[data-category="Politics"] { background: #28a745; }
.card-banner[data-category="Entertainment"] { background: #ff9800; }


/* --- Like Button --- */
.like-btn {
  background: none; border: none; color: #999;
  font-size: 1.5rem; cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  position: absolute; bottom: 10px; right: 10px;
}
.like-btn:hover { color: #e74c3c; transform: scale(1.2); }
.like-btn.liked { color: #e74c3c; }


.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}
.tags a {
  background: #f1f1f1;
  color: #333;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 14px;
  transition: all 0.3s ease;
}
.tags a:hover {
  background: #ff3b3f;
  color: #fff;
}

/* Pagination Container */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  gap: 10px;
  font-family: 'Nunito Sans', sans-serif;
}

/* Numbered Page Links */
.pagination a {
  display: inline-block;
  padding: 8px 12px;
  background: #f1f1f1;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.2s ease;
}

/* Current Page */
.pagination a.current {
  background: #333;
  color: #fff;
  font-weight: bold;
}

/* Hover Effect */
.pagination a:hover {
  background: #555;
  color: #fff;
}

/* Previous/Next Links */
.pagination a.prev,
.pagination a.next {
  font-weight: bold;
}


/* Contact Page Form */
/* Contact Page Card Form */
.contact-form {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  font-family: 'Nunito Sans', sans-serif;
  position: relative;
  overflow: hidden;
}

.contact-form h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 25px;
  color: #333;
}

.contact-form .form-group {
  position: relative;
  margin-bottom: 25px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 12px 14px 12px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: transparent;
  outline: none;
  transition: border 0.3s, box-shadow 0.3s;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #777;
  pointer-events: none;
  transition: 0.3s ease all;
  background: #fff;
  padding: 0 4px;
}

.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label {
  top: -10px;
  left: 10px;
  font-size: 0.8rem;
  color: #ff4081; /* Accent color */
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff4081;
  box-shadow: 0 0 8px rgba(255,64,129,0.3);
}

.contact-form button {
  width: 100%;
  padding: 16px;
  background: #ff4081;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: #e73370;
}

.contact-form .form-note {
  text-align: center;
  font-size: 0.85rem;
  color: #777;
  margin-top: 12px;
}


/* --- Newsletter --- */
.newsletter {
  background:#ff3b3f; color:#fff;
  padding:30px 40px; text-align:center;
  margin:20px 40px; border-radius:10px;
}
.newsletter input[type="email"] {
  padding:10px; width:250px;
  border:none; border-radius:5px; margin-right:10px;
}
.newsletter button {
  padding:10px 20px; border:none; border-radius:5px;
  background:#fff; color:#ff3b3f; cursor:pointer; font-weight:600;
}

/* --- Footer --- */
footer {
  background:#222; color:#fff;
  padding:20px 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap;
  font-size:0.9rem;
}
footer a { color:#ff3b3f; text-decoration:none; margin-right:15px; }
footer a:hover { text-decoration:underline; }

/* --- Inline Article (Fixed border color) --- */
.inline-article {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  max-width: 700px;  /* keeps it neat */
}

.inline-article-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.inline-article img {
  width: 120px;   /* small image */
  height: auto;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;  /* prevent image from shrinking too much */
}

.article-content {
  flex: 1;
}

.article-content h2 {
  font-size: 16px;   /* small title */
  margin-bottom: 6px;
}

.inline-article:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}


.read-more {
  display: inline-block;
  padding: 5px 10px;
  background: #0077cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;   /* small button text */
  font-weight: 500;
  transition: background 0.3s ease;
}

.read-more:hover {
  background: #005fa3;
}

/* Small screen adjustments (only shrink fonts, keep layout) */
@media (max-width: 768px) {
  .inline-article img {
    width: 100px;   /* slightly smaller image */
  }

  .article-content h2 {
    font-size: 14px;  /* smaller title */
  }

  .read-more {
    font-size: 11px;
    padding: 4px 8px;
  }
}

 
/* --- Responsive --- */
@media (max-width: 1024px) {
  header { padding: 15px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  nav ul { flex-wrap: wrap; gap: 10px; }
  .categories { padding: 15px 20px; justify-content: flex-start; gap: 8px; }
  .categories button { padding: 8px 15px; font-size: 0.9rem; }
  .card img { height: auto; width: 100%; object-fit: contain; }
  .card-content h3 { font-size: 1.1rem; }
  .card-content p { font-size: 0.9rem; }
  .newsletter { padding: 20px; margin: 15px 20px; }
  .newsletter input[type="email"] { width: 100%; margin-bottom:10px; }
  .newsletter button { width: 100%; }
  footer { flex-direction: column; align-items: flex-start; gap:10px; }
}
@media (max-width: 480px) {
  header { padding: 10px 15px; }
  .categories { padding: 10px 15px; }
  .card img {
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  .card-content h3 { font-size: 1rem; }
  .card-content p { font-size: 0.85rem; }
  .categories button { padding: 6px 12px; font-size: 0.85rem; }
  .newsletter { padding: 15px; margin: 10px 15px; }
  .inline-article-inner { flex-direction: column; align-items: flex-start; }
  .inline-article-image img { width: 80px; height: 80px; }
  .inline-article-text h3 { font-size: 0.9rem; }
  .inline-article-label { font-size: 0.8rem; }
}


.hero {
background: #f9f9f9;
padding: 3rem 1rem;
border-bottom: 1px solid #ddd;
 }
 
.hero-content {
	max-width: 1100px;
	margin: 0 auto; 
	display: flex; 
	flex-wrap: wrap; 
	align-items: center;
	gap: 2rem; } 
	
.hero-article { 
	display: flex; 
	flex-wrap: wrap;
	gap: 2rem; 
	align-items: center;
	justify-content: center; } 
	
	.hero-article img { width: 100%;
	max-width: 500px;
	border-radius: 12px;
	object-fit: cover;
	transition: transform 0.3s ease, cursor 0.3s ease; }
	
	.hero-article img:hover {
	transform: scale(1.03); 
	cursor: pointer; }
	
	.hero-text { 
	flex: 1;
	min-width: 280px; }

	.hero-text h1 { font-size: 2.2rem;
	margin-bottom: 1rem; 
	color: #111; 
	transition: color 0.3s ease; }

	.hero-text h1 a {
    text-decoration: none;
	color: inherit; } 
	
	.hero-text h1 a:hover { 
	 color: #FF6347; } 
	 
	.hero-text p {
	font-size: 1.1rem; 
	color: #333;
	line-height: 1.6;
	margin-bottom: 1.2rem;
	transition: color 0.3s ease; }

	.hero-text p a {
	text-decoration: none;
	color: inherit; } 
	
	.hero-text p a:hover { 
	 color: #FF6347; }

	.hero-text .read-more {
	 display: inline-block; 
	 color: #fff;
	 background: #FF6347;
	 padding: 0.7rem 1.2rem;
	 border-radius: 6px;
	 text-decoration: none;
	 transition: background 0.3s ease; }

	 .hero-text .read-more:hover {
	 background: #005fa3; }






/* Featured Home / Editor’s Picks styled like Hero */
.featured-home {
  background: #f9f9f9;
  padding: 3rem 1rem;
  border-bottom: 1px solid #ddd;
}

.featured-home h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #111;
}

.featured-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
  align-items: stretch; /* ensures all items stretch to same height */
}

.featured-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 1rem;
  flex: 1 1 450px;
  max-width: 500px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  flex-direction: column; /* default for mobile */
  height: 100%; /* stretch cards to same height */
}

.featured-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.featured-img {
  flex-shrink: 0;
}

.featured-img img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease, cursor 0.3s ease;
}

.featured-img img:hover {
  transform: scale(1.03);
  cursor: pointer;
}

.featured-info {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push read-more to bottom */
}

.featured-info h3 {
  font-size: 1.3rem;
  margin: 0;
  color: #111;
  transition: color 0.3s ease;
}

.featured-info h3:hover {
  color: #FF6347;
}

/* Remove blue link color for all links inside featured-home */
.featured-item a {
  color: inherit;
  text-decoration: none;
}

/* Desktop layout: image left, content right */
@media (min-width: 768px) {
  .featured-item {
    flex-direction: row;
    height: auto; /* let flexbox equalize height via grid */
  }

  .featured-img img {
    width: 180px;
    height: 120px;
  }
}

/* Mobile layout stacked */
@media (max-width: 767px) {
  .featured-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .featured-img img {
    width: 100%;
    height: auto;
  }
}

/* Beautiful Next / Previous Navigation Cards */
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin: 3rem 0 0;
  gap: 2rem;
  flex-wrap: wrap;
}

.post-navigation a {
  flex: 1 1 45%;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, #ff7b7b, #ffb27b);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.post-navigation a:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #ff5a5a, #ffa15a);
}

.post-navigation span {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.post-navigation h4 {
  margin: 0.3rem 0 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.prev-article span {
  text-align: left;
}

.next-article span {
  text-align: right;
}

.post-navigation::before,
.post-navigation::after {
  content: '';
  display: none; /* optional for decorative arrows if needed */
}

@media (max-width: 768px) {
  .post-navigation a {
    flex: 1 1 100%;
  }
}