/*
Theme Name: Khawzawl Times Theme
Theme URI: https://khawzawltimes.in/
Author: Lalrotluanga Ralte
Author URI: https://khawzawltimes.in/
Description: Khawvel hmasawnna thang mekah Khawzawl Times Dayly News Paper chu inher rem ve zelin social media leh website lamah hma kan la chho ve mek ni.
Version: 1.0
Text Domain: khawzawl-times-theme
*/

/* === Theme basics & variables === */
:root{
  --header-bg: #111;
  --header-text: #fff;
  --subbar-bg: #222;
  --body-bg: #f4f4f4;
  --footer-bg: #111;
  --footer-text: #ccc;
  --cat-bg: #000;
  --date-bg: #777;         /* replaced generic 'gray' with hex for stable contrast */
  --link-focus: #0073aa;
  --accent: #0073aa;       /* useful for callouts */
  --text-color: #222;

  /* layout & logo sizing */
  --container-width: 1000px; /* change to 1100px if you prefer wider pages */
  --site-logo-height: 40px;  /* visual height for header/footer logos */
}

/* Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  font-family: Arial, sans-serif;
  margin:0;
  padding:0;
  background:var(--body-bg);
  color:var(--text-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--link-focus); }

/* Focus / accessibility */
a:focus, button:focus{ outline:2px solid var(--link-focus); outline-offset:2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--link-focus);
  outline-offset: 2px;
}

/* Layout containers */
.header-container,
main,
.footer-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header specifics */
header{ background:var(--header-bg); color:var(--header-text); padding:4px 15px; text-align:center; }
.header-container{ display:flex; justify-content:space-between; align-items:center; padding:4px 15px; min-height:50px; gap:12px; }
header h1{ margin:0; font-size:1.8rem; }

/* Subbar */
.sub-bar{ background:var(--subbar-bg); color:var(--header-text); padding:0; font-size:12px; line-height:1.1; }

/* Top menu */
.top-menu ul{ display:flex; list-style:none; margin:0; padding:0; gap:20px; }
.top-menu a{ color:var(--header-text); font-weight:bold; }

/* Main layout */
main{ max-width: var(--container-width); margin:20px auto; display:grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap:20px; padding:0 20px; }

/* ---------- Align hero (left column) and editorial (right column) ---------- */
/* Ensure the main grid rows start at the same baseline */
main {
  /* you already have this, but explicitly set vertical alignment */
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start; /* IMPORTANT: forces items to align to the top */
}

/* Make sure the top-level section doesn't add unexpected offset */
main > section,
main > .sidebar {
  margin: 0;
  padding: 0;
}

/* Ensure the featured/hero block doesn't have extra top margin */
.featured-post,
.featured-post + .posts-grid, /* in case hero is followed by grid */
.featured-post * {
  margin-top: 0;
}

/* Sidebar editorial: remove incidental top margin and optionally make sticky */
aside.sidebar {
  margin-top: 0;        /* remove any extra gap */
  align-self: start;    /* explicit: align to grid start */
}

/* Make editorial block sticky so it visually aligns while scrolling long left column */
aside.sidebar .editorial-section {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;            /* gap from top of viewport; adjust as needed */
}

/* Optional: if hero image height causes misalignment visually, cap it consistently */
.featured-post .featured-img,
.single .featured-img,
.featured-img.single-featured {
  max-height: none;     /* allow tall hero — or set a desired max, e.g. 600px */
  object-fit: cover;
}

/* If the editorial block seems vertically centered due to flex or other rule, force top alignment */
.footer-container,
.header-container,
main > .sidebar,
main > section {
  align-self: start;
}

/* Small screen behavior: ensure editorial follows the flow beneath the hero */
@media (max-width: 768px) {
  aside.sidebar .editorial-section {
    position: static; /* disable sticky on small screens to avoid overlap */
    top: auto;
  }
}

/* Content / Articles */
article{ background:#fff; padding:15px; border-radius:10px; margin-bottom:20px; transition:transform .24s ease; }
article:hover{ transform:translateY(-5px); }
/* Responsive article images: remove fixed height and use aspect-ratio for single post hero */
article img {
  width: 100%;
  height: auto;                 /* remove fixed height */
  object-fit: cover;
  border-radius: 8px;
  transition: opacity .24s ease;
  /* Prevent other rules from constraining height (override only if necessary) */
  max-height: none;
}

/* Larger hero for single posts — apply to featured thumbnail class or target article image on single view */
.single .featured-img,
.featured-post .featured-img,
.single-featured {
  width: 100%;
  aspect-ratio: 16/9;           /* taller hero; change to 3/1 if you prefer wider */
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  max-height: none;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1/1) {
  .single .featured-img,
  .featured-post .featured-img,
  .single-featured {
    height: 450px;              /* fallback tall height — adjust if you want taller/shorter */
  }
}

article img:hover{ opacity:0.9; }

/* Meta */
.meta{ display:inline-flex; margin-bottom:10px; border-radius:3px; overflow:hidden; }
.meta .cat{ background:var(--cat-bg); color:#fff; padding:5px 10px; font-size:13px; }
.meta .date{ background:var(--date-bg); color:#fff; padding:5px 10px; font-size:13px; }

/* Sidebar */
aside > div, .sidebar > div{ background:#fff; padding:15px; border-radius:10px; margin-bottom:20px; }
aside h2{ display:flex; justify-content:space-between; align-items:center; margin:0 0 10px 0; font-size:18px; }
aside ul{ list-style:none; padding:0; margin:0; }
aside li{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
aside li img{ width:60px; height:40px; object-fit:cover; border-radius:4px; }

/* Latest news style */
.latest-news-sidebar h2,
.editorial-sidebar h2,
.article-sidebar h2,
.sidebar-article h2,
.sidebar-archive h2 {
  background: #000;
  color: #fff;
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 4px;
  margin: 0 0 10px 0;
  display: block;
}

/* Posts grid */
.posts-grid{ display:grid; gap:20px; }
.posts-grid.cols-2{ grid-template-columns: 1fr 1fr; }
.posts-grid.cols-1{ grid-template-columns: 1fr; }

/* Back to top (accessible) */
#back-to-top{
  position:fixed;
  bottom:30px;
  right:30px;
  background:var(--header-bg);
  color:var(--header-text);
  border:none;
  padding:12px 16px;
  border-radius:50%;
  font-size:18px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .2s ease;
  z-index:999;
}
#back-to-top.show{ opacity:1; pointer-events:auto; }
#back-to-top:hover{ transform:scale(1.06); background:var(--link-focus); }
#back-to-top:focus{ outline:2px solid var(--link-focus); outline-offset:3px; }

/* Logo constraints (avoid layout shift, override inline attrs if necessary) */
.custom-logo,
.custom-logo img,
.header-container .custom-logo-link img,
.footer-left .custom-logo-link img {
  display:inline-block;
  max-height: var(--site-logo-height) !important; /* remove !important if you can */
  height: auto !important;
  width: auto !important;
  margin: 0;
  padding: 0;
  object-fit: contain !important;
}

/* Footer layout - merged / simplified */
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px;
  gap:20px;
  box-sizing:border-box;
}
.footer-container{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:20px 0;
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 20px;
}
.footer-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  flex:0 1 auto;
}
.footer-left .custom-logo,
.footer-left .footer-logo,
.footer-left .footer-logo .custom-logo-link {
  display:block;
  max-height:var(--site-logo-height) !important;
  width:auto !important;
  height:auto !important;
  margin:0;
  padding:0;
  object-fit:contain !important;
}
.footer-address{ margin-top:.5rem; line-height:1.4; color:var(--footer-text); font-size:14px; }

/* Footer right links */
.footer-right{ text-align:right; flex:0 1 300px; }
.footer-right h4{ margin:0 0 10px; font-size:16px; color:var(--footer-text); }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:6px; }
.footer-links li a{ color:var(--footer-text); font-size:14px; text-decoration:none; }
.footer-links li a:hover{ color:var(--link-focus); }

/* Social row */
.footer-social{
  width:100%;
  max-width:var(--container-width);
  margin:15px auto 5px;
  padding:0 20px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-social .social-text{ margin:0; font-weight:bold; color:var(--footer-text); white-space:nowrap; }
.footer-social a.social{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; margin:0 6px; padding:0; }
.footer-social a.social img{ width:24px; height:24px; object-fit:contain; display:block; transition:opacity .3s; }
.footer-social a.social img:hover{ opacity:0.7; }

/* Copyright / bottom */
.footer-bottom{
  background:var(--footer-bg);
  color:var(--footer-text);
  text-align:center;
  padding:8px 20px;
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:5px;
  font-size:14px;
  line-height:1.4;
}

/* Sidebar list helpers */
.latest-news-list, .latest-news-sidebar ul, .sidebar-article ul { list-style:none; padding:0; margin:0; }
.latest-news-item, .latest-news-sidebar li, .sidebar-article li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid #eee; }
.latest-thumb { width:60px; height:60px; object-fit:cover; border-radius:4px; }

/* Misc */
.header-container .custom-logo img{ max-height:32px !important; }

/* Responsive */
@media (max-width:768px) {
  main{ grid-template-columns:1fr; }
  .top-menu ul{ display:none; }
  .sidebar.collapse .sidebar-content{ display:none; }
  .sidebar.collapse .sidebar-toggle{ display:block; }
  #news-menu{ display:none; margin-top:10px; }

  .header-container, .footer-container, main { max-width:100%; padding:0 15px; }
  .footer-container{ flex-direction:column; align-items:center; text-align:center; }
  .footer-left{ align-items:center; text-align:center; }
  .footer-right{ text-align:center; margin-top:.75rem; }
  .footer-top{ flex-direction:column; align-items:center; text-align:center; }
}

/* smaller screens: tweak social */
@media (max-width:480px){
  .footer-social{ gap:8px; padding:0 12px; }
  .footer-social .social-text{ width:100%; text-align:center; }
  .footer-social a.social{ margin:6px 8px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  article:hover { transform: none; }
}

/* Utility / optional tweaks */
/* Use .posts-grid.cols-2 / cols-1 to change listing width easily */
/* Remember to add aria-label="Back to top" on #back-to-top in HTML for accessibility */
/* Contact page: move container to the right */
.site-main--contact .header-container {
  display: flex;            /* flexbox alignment */
  justify-content: flex-end; /* push form to the right */
}

/* Keep form/container width consistent with header/footer */
.page-template-page-contact-us .entry-content,
.page-id-105 .entry-content { /* use page slug template class or page ID if needed */
  max-width: var(--container-width); /* same container width the theme uses */
  margin: 0 auto;                    /* center it */
  padding: 0 20px;                   /* same horizontal padding as header-container */
  box-sizing: border-box;
}

/* If you want the contact form itself narrower and aligned with the left header logo,
   wrap the form in .contact-inner and give it left margin equal to header left padding. */
.contact-form {
  max-width: 760px;   /* width of the form block */
  margin-left: 0;     /* default left aligned inside entry-content */
}

/* If you need to nudge the whole content slightly to the right (one-inch-ish request),
   prefer using padding-left value to match header exact padding */
.page-template-page-contact-us .entry-content { padding-left: 15px; } /* tweak 15px -> 20px as needed */

.contact-social {
  display: flex;
  gap: 10px;         /* space between icons */
  list-style: none;  /* remove bullet points */
  padding: 0;
  margin: 0;
}

.contact-social li {
  display: inline-block;
}

.contact-social img {
  width: 24px;       /* make icons small */
  height: 24px;
  display: block;
}


/* ================= About page (ID 96) — Cleaned & safe ================= */
/* Replace 96 with your actual page ID if different */
.page-id-96 {
  --about-sidebar-width: 320px;
  --about-max-width: 900px;
}

/* hide post meta / date on About page */
.page-id-96 .meta,
.page-id-96 .meta .cat,
.page-id-96 .meta .date,
body.page-id-96 p.meta,
body.page-id-96 .post-meta,
body.page-id-96 .entry-meta {
  display: none !important;
}

/* Heading: black full-width bar and centered title */
.page-id-96 h1,
.page-id-96 h2 {
  background: #000;
  color: #fff !important;
  text-align: center;
  padding: 12px 16px;
  margin: 0 0 18px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Main + right sidebar layout (non-invasive) */
@media (min-width: 880px) {
  .page-id-96 main[role="main"] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  /* content column */
  .page-id-96 main[role="main"] > section,
  .page-id-96 main[role="main"] > .page-content,
  .page-id-96 main[role="main"] > article {
    flex: 1 1 auto;
    min-width: 0; /* allow shrinking */
    max-width: calc(100% - var(--about-sidebar-width));
    box-sizing: border-box;
    padding-right: 0.5rem;
    margin: 0;
  }

  /* right sidebar column (expecting <aside class="sidebar"> to be inside main or directly after section) */
  .page-id-96 main[role="main"] > aside.sidebar,
  .page-id-96 aside.sidebar {
    flex: 0 0 var(--about-sidebar-width);
    width: var(--about-sidebar-width);
    box-sizing: border-box;
    margin: 0;
    padding-left: 0.5rem;
  }
}

/* Mobile / tablet: stack vertically and use full width */
@media (max-width: 879px) {
  .page-id-96 main[role="main"],
  .page-id-96 main[role="main"] > section,
  .page-id-96 main[role="main"] > aside.sidebar,
  .page-id-96 aside.sidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .page-id-96 aside.sidebar {
    margin-top: 1.25rem;
  }

  .page-id-96 h1,
  .page-id-96 h2 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Readable content container — centered, wider, good line length */
.page-id-96 .entry-content,
.page-id-96 .excerpt,
.page-id-96 article,
.page-id-96 .page-content {
  max-width: var(--about-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  line-height: 1.55;
  font-size: 16px;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}

/* Make media inside content responsive */
.page-id-96 .entry-content img,
.page-id-96 .entry-content iframe,
.page-id-96 .entry-content video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}

/* Sidebar widget visuals (cards + black titles) */
.page-id-96 .sidebar .widget {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.page-id-96 .sidebar .widget .widget-title,
.page-id-96 .sidebar .widget h2,
.page-id-96 .sidebar .widget h3 {
  background: #000;
  color: #fff;
  padding: 8px 10px;
  margin: 0 0 10px 0;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

/* Recent posts / list styling */
.page-id-96 .recent-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-id-96 .recent-post-item {
  margin-bottom: 10px;
}
.page-id-96 .recent-post-link {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}
.page-id-96 .recent-post-date {
  display: block;
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

/* Defensive: avoid tiny sidebar rule (remove/override any prior 80px shrink) */
.page-id-96 body, .page-id-96 body * { /* no-op to ensure higher specificity if needed */ }
.page-id-96 aside.sidebar[style*="width: 80px"], .page-id-96 aside.sidebar.small-sidebar {
  width: var(--about-sidebar-width) !important;
  flex: 0 0 var(--about-sidebar-width) !important;
}

/* ======= quick fixes: social icons, sidebar, defensive overrides ======= */

/* Force footer/social icons to exact size and avoid 100%-width overrides */
.footer-social a.social img,
.footer-social img,
.subbar-right img,
.sidebar li img,
aside li img {
  width: 24px !important;      /* desired display size */
  height: 24px !important;
  max-width: none !important;  /* avoid percentage scaling from other rules */
  object-fit: contain !important;
  display: inline-block !important;
}

/* If any wide images still overflow container, cap them */
.footer-social,
.sub-bar,
.subbar-right {
  overflow: visible; /* keep icons visible */
}

/* Make sure sidebar is not accidentally shrunk to 80px */
.page-id-96 aside.sidebar,
.page-id-96 main[role="main"] > aside.sidebar,
.page-id-96 .sidebar {
  width: var(--about-sidebar-width) !important;
  min-width: var(--about-sidebar-width) !important;
  flex: 0 0 var(--about-sidebar-width) !important;
  display: block !important;
}

/* Defensive: if an inline style or other selector sets width:80px, override it */
.page-id-96 aside.sidebar[style],
.page-id-96 aside.sidebar[style*="width"] {
  width: var(--about-sidebar-width) !important;
  min-width: var(--about-sidebar-width) !important;
}

/* Ensure footer-social layout doesn't expand full-screen on some broken configs */
.footer-social {
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Prevent site-wide rules accidentally turning all images to width:100% (diagnostic guard) */
/* This only adds higher specificity for small important targets (icons & author thumbnails) */
img:not(.wp-post-image):not(.editorial-thumb):not(.article-thumb) {
  max-width: 100%;
  height: auto;
}

/* Optional: temporary visual debug (uncomment to turn on) */
/*
.page-id-96 main[role="main"] > section { outline: 2px dashed rgba(0,120,200,0.25); }
.page-id-96 aside.sidebar { outline: 2px dashed rgba(200,60,60,0.25); }
*/




/* ---------- Casual copy deterrent (CSS) ---------- */
/* Prevent user selection on main content (deterrent only) */
.article, .entry-content, .excerpt, .page-content, main {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;         /* Standard */
  cursor: default;
}

/* Prevent images from being dragged / downloaded by simple drag */
.entry-content img,
.article img,
.page-content img,
img.custom-logo {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* prevents right-click on some browsers for images */
}

/* Make images still accessible to keyboard / screen readers (we will re-enable pointer-events via JS if needed) */
img[alt] { pointer-events: none; }

/* Light visual: no visible selection */
::selection { background: transparent; color: inherit; }

/* Watermark helper (optional): when wrapping an image, use this */
.image-watermark { position: relative; display: inline-block; }
.image-watermark img { display: block; pointer-events: none; -webkit-user-drag: none; }
.image-watermark .wm-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(-18deg);
  opacity: 0.14;
  font-size: 28px;
  color: #000;
  pointer-events: none;
  user-select: none;
}