/*
Theme Name: Winbuckz Theme
Author: Your Name
Description: A custom theme built from HTML, CSS, JS, and Bootstrap 5.
Version: 1.0
Text Domain: mycustomtheme
*/

/* ===========================
   CSS VARIABLES
   =========================== */
:root {
  --border-color: #1a1a1a;
  --text-main: #1a1a1a;
  --text-muted: #555;
  --bg-grey: #e0e0e0;
  --brand-dark: #1b2945;
  --brand-light-gray: #e6e6e6;
  --black: #000;
  --white: #fff;
  --font-serif: "Playfair Display", serif;


   --bg-start: #f7f4ea;
      --bg-end:   #e8ecf3;
      --ink:      #1c1c1c;
      --gold:     #c9962b;
}

body,html{
  overflow-x: hidden;
}

body{
  /* background: linear-gradient(120deg, var(--bg-start) 0%, #f4f1e6 55%, var(--bg-end) 100%); */
  position: relative;
}

#dots-l {
  position: absolute;
    top: 50%;
    left: -250px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: rgb(0, 13, 255);
  filter: blur(30px);
  opacity: 0.04;
  z-index: -1;
}
#dots-r {
  position: absolute;
    top: 785px;
    right: -250px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: rgb(0, 13, 255);
  filter: blur(30px);
  opacity: 0.05;
  z-index: -1;
}

/* ===========================
   GLOBAL / LAYOUT
   =========================== */
main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
  overflow: hidden;
}

/* ===========================
   DIVIDERS (All Variants)
   =========================== */
.divider-container {
  padding: 0 2rem;
  margin-top: 10px;
}

.divider-line {
  width: 100%;
  height: 1px;
  background-color: var(--black);
  position: relative;
}

/* .divider-line::before,
.divider-line::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background-color: var(--black);
}

.divider-line::before {
  left: 0;
}
.divider-line::after {
  right: 0;
} */

.top-divider-container {
  display: flex;
  align-items: center;
  margin: 40px 0;
  padding: 0 15px;
}

.top-divider-line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--border-color);
}

.top-divider-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.diamond {
  width: 4px;
  height: 4px;
  background-color: var(--black);
  transform: rotate(45deg);
}

.solid-line {
  flex-grow: 1;
  height: 1.5px;
  background-color: var(--black);
}


/* banner  */

        /* Banner Slider Container */
        .banner-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
 
        .banner-slider .swiper {
            width: 100%;
            height: auto;
        }
 
        .banner-slider .swiper-slide {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        /* Responsive image */
        .banner-slider .swiper-slide img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        @media (max-width: 575.98px) {
           .banner-slider .swiper-slide img {
            width: 114%;
           }
           .l1{
            display: none;
           }
        }
 
        /* Navigation arrows styling */
        .banner-slider .swiper-button-next,
        .banner-slider .swiper-button-prev {
            color: #343332;
            width: 44px;
            height: 44px;
            /* background-color: rgba(255, 255, 255, 0.8); */
            border-radius: 50%;
            transition: all 0.3s ease;
        }
 
        .banner-slider .swiper-button-next:hover,
        .banner-slider .swiper-button-prev:hover {
            background-color: rgba(255, 255, 255, 1);
            transform: scale(1.05);
        }
 
        .banner-slider .swiper-button-next::after,
        .banner-slider .swiper-button-prev::after {
            font-size: 18px;
            font-weight: bold;
        }
 
        /* Pagination bullets styling */
        .banner-slider .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background-color: #ffffff;
            opacity: 0.7;
            border: 2px solid #d4a017;
            transition: all 0.3s ease;
        }
 
        .banner-slider .swiper-pagination-bullet-active {
            background-color: #d4a017;
            opacity: 1;
            transform: scale(1.2);
        }
 
        /* Responsive tweaks */
        @media (max-width: 768px) {
            .banner-slider .swiper-button-next,
            .banner-slider .swiper-button-prev {
                width: 32px;
                height: 32px;
            }
 
            .banner-slider .swiper-button-next::after,
            .banner-slider .swiper-button-prev::after {
                font-size: 14px;
            }
 
            .banner-slider .swiper-pagination-bullet {
                width: 8px;
                height: 8px;
            }
        }
 
        @media (max-width: 480px) {
            .banner-slider .swiper-button-next,
            .banner-slider .swiper-button-prev {
                display: none;
            }
        }

/* banner end */


/* text banner  */

    .quote-banner {
     
      padding: clamp(2.5rem, 8vw, 6rem) 1rem;
      position: relative;
      overflow: hidden;
    }
 
    .quote-wrap {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(0.5rem, 3vw, 3rem);
    }

    /* The banner artwork is a flex item, so it needs min-width: 0 as well
       as max-width to shrink instead of overflowing on narrow screens. */
    .quote-wrap img {
      display: block;
      min-width: 0;
      max-width: 100%;
      height: auto;
    }
 
    /* ---------- Thumbs Up Icons ---------- */
    .thumb {
      flex: 0 0 auto;
      width: clamp(28px, 5vw, 60px);
      height: auto;
      color: var(--ink);
      opacity: 0.85;
    }
 
    .thumb-left  { transform: rotate(-8deg); }
    .thumb-right { transform: rotate(8deg); }
 
    /* ---------- Quote Text ---------- */
    .quote-text {
      color: var(--ink);
      font-weight: 400;
      line-height: 1.35;
      letter-spacing: -0.5px;
      font-size: clamp(1.05rem, 3.4vw, 2.6rem);
      text-align: center;
      margin: 0;
      max-width: 900px;
    }
 
    /* ---------- Gold annotations ---------- */
    .word-gap {
      font-weight: 700;
      position: relative;
      display: inline-block;
      padding: 0 0.15em;
    }
    .word-gap::before {
      content: "";
      position: absolute;
      inset: -18% -22%;
      border: 2.5px solid var(--gold);
      border-radius: 50%;
      transform: rotate(-4deg);
      pointer-events: none;
    }
 
    .word-you {
      position: relative;
      display: inline-block;
    }
    .word-you::after {
      content: "";
      position: absolute;
      left: -2%;
      right: -2%;
      bottom: -6px;
      height: 3px;
      background: var(--gold);
      border-radius: 2px;
      transform: skewX(-8deg);
    }
 
    .word-info {
      font-weight: 700;
      position: relative;
      display: inline-block;
      padding: 0.05em 0.25em;
    }
    .word-info::before {
      content: "";
      position: absolute;
      inset: -8% -6%;
      border: 2.5px solid var(--gold);
      border-radius: 3px;
      transform: rotate(-0.6deg);
      pointer-events: none;
    }
    .word-info::after {
      content: "";
      position: absolute;
      left: -4%;
      right: -4%;
      bottom: -8px;
      height: 3px;
      background: var(--gold);
      border-radius: 2px;
      transform: rotate(-1deg);
    }
 
    /* ---------- Responsive fine-tuning ---------- */
    @media (max-width: 575.98px) {
      .quote-wrap { gap: 0.4rem; }
      .word-gap::before  { inset: -12% -18%; }
      .word-info::before { inset: -6% -5%; }
    }
 
    @media (min-width: 1200px) {
      .quote-text { font-size: 2.75rem; }
    }


/* text banner end */

/* ===========================
   CATEGORY STRIP / MARQUEE
   =========================== */
.category-strip {
  /* background-color: var(--black); */
  color: var(--black);
  padding-top: 2rem;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
}

/* Desktop only — the strip is hidden on mobile and tablet */
@media (max-width: 1024.98px) {
  .category-strip {
    display: none;
  }
}

.marquee-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Set by the marquee script once the track is looping: the track is then
   positioned from the left edge and driven by transform, and the whole
   strip becomes grabbable. */
.marquee-wrapper.is-marquee {
  justify-content: flex-start;
  cursor: grab;
  touch-action: pan-y;          /* vertical scroll stays native, horizontal is ours */
  -webkit-user-select: none;
  user-select: none;
}

.marquee-wrapper.is-dragging {
  cursor: grabbing;
}

/* Pills must not start a native link/image drag while panning */
.marquee-wrapper.is-marquee a,
.marquee-wrapper.is-marquee img {
  -webkit-user-drag: none;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;               /* never shrink, so the measured width is real */
}

.marquee-wrapper.is-marquee .marquee-track {
  will-change: transform;
}

.category-item {
  --cat: var(--brand-dark);   /* per-category colour, set by .cat-c* below */

  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  margin-inline: 1.45rem;
}

.category-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55rem 1.35rem;
  border: 1.5px solid var(--cat);
  border-radius: 30px;
  color: var(--cat);
  background-color: transparent;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-item a img {
  flex: 0 0 auto;
  transition: filter 0.2s ease;
}

.category-item a:hover,
.category-item a:focus-visible {
  background-color: var(--cat);
  color: var(--white);
}

/* ACF category icons are uploaded images, so they are knocked out to
   white rather than recoloured when the pill fills in. */
.category-item a:hover img,
.category-item a:focus-visible img,
.category-item.is-active a img {
  filter: brightness(0) invert(1);
}

/* ---- Colour slots ----
   Assigned from the term_id, not the loop index, so a category keeps
   the same colour when others are added, removed or re-sorted. */
.category-item.cat-c0 { --cat: #1b2945; }  /* navy      */
.category-item.cat-c1 { --cat: #63d044; }  /* sky       */
.category-item.cat-c2 { --cat: #2f9e5f; }  /* green     */
.category-item.cat-c3 { --cat: #dc2e5c; }  /* blue      */
.category-item.cat-c4 { --cat: #1a1a1a; }  /* ink       */
.category-item.cat-c5 { --cat: #0e9aa7; }  /* teal      */
.category-item.cat-c6 { --cat: #6b4fbb; }  /* purple    */
.category-item.cat-c7 { --cat: #1a738f; }  /* terracotta*/

/* Active category (the archive currently being viewed) */
.category-item.is-active {
  --cat: var(--gold);
}

.category-item.is-active a {
  background-color: var(--cat);
  color: var(--white);
}

@media (max-width: 575.98px) {
  .category-item {
    font-size: 0.75rem;
    margin-inline: 0.3rem;
  }

  .category-item a {
    padding: 0.45rem 1rem;
    gap: 6px;
  }
}

/* ===========================
   BREADCRUMBS
   =========================== */
.breadcrumbs {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--black);
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span {
  color: #6c757d;
}

/* ===========================
   SECTION HEADER
   =========================== */
.section-header,
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.section-title,
.page-title {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  color: var(--black);
  margin: 0;
  line-height: 1;
}

.btn-view-all {
  background-color: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
  margin-bottom: 4px;
}

.btn-view-all:hover {
  opacity: 0.8;
  color: var(--white);
}

/* ===========================
   EDITORIAL BOX (Shared Card Frame)
   =========================== */
.editorial-card,
.editorial-box {
  border: 1.5px solid var(--black);
  padding: 8px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.editorial-card {
  border-color: var(--border-color);
  margin-bottom: 24px;
}

/* Box Header: Circles + Dashed Line + Issue Number */
.card-top-bar,
.box-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.window-circles,
.circles {
  display: flex;
  gap: 4px;
}

.window-circles span,
.circle {
  width: 9px;
  height: 9px;
  border: 1.2px solid var(--black);
  border-radius: 50%;
  display: inline-block;
  background-color: transparent;
}

.window-circles span {
  width: 8px;
  height: 8px;
  border-color: var(--border-color);
}

.dashed-divider,
.dashed-line {
  flex-grow: 1;
  margin: 0 10px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    var(--black) 40%,
    transparent 40%
  );
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

.dashed-divider {
  border-top: 1.5px dashed var(--border-color);
  margin: 0 12px;
  background: none;
}

.issue-number,
.issue-no {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ===========================
   IMAGE WRAPPERS
   =========================== */
.card-img-wrapper,
.image-wrapper {
  border: 1.5px solid var(--black);
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
  aspect-ratio: 4 / 3;
}

.card-img-wrapper {
  border-color: var(--border-color);
}

.card-img-wrapper img,
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Specific aspect ratio overrides */
.center-col .card-img-wrapper {
  /* aspect-ratio: 16 / 10; */
  aspect-ratio: 18 / 10;
}

/* Featured row: keep the big center card level with the two stacked
   left cards. The columns stretch to the row height, so the center card
   grows and its image absorbs the leftover space. */
@media (min-width: 992px) {
  .row > .left-col,
  .row > .center-col {
    display: flex;
    flex-direction: column;
  }

  .center-col > .editorial-card {
    flex: 1 1 0;
    min-height: 0;
  }

  /* Basis 0 plus an out-of-flow image: the wrapper asks for nothing more
     than its floor, so the left column decides the row height. */
  .center-col > .editorial-card .card-img-wrapper {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 240px;
  }

  .center-col > .editorial-card .card-img-wrapper img {
    position: absolute;
    inset: 0;
  }
}

/* ===========================
   TYPOGRAPHY & META
   =========================== */
.category-tag,
.tag-text {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.meta-info,
.meta-text {
  font-size: 0.8rem;
  color: var(--text-main);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.article-title,
.left-col .article-title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 8px 0 0;
}

.center-col .article-title {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 4px 0 12px;
}

/* ===========================
   RIGHT COLUMN / SIDE ARTICLES
   =========================== */
.side-article {
  margin-bottom: 16px;
}

.side-article h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}

.article-divider {
  border-top: 1.5px solid var(--border-color);
  opacity: 1;
  margin: 16px 0;
}

/* ===========================
   GREY AD BOX
   =========================== */
.grey-ad-box {
  background-color: var(--bg-grey);
  width: 100%;
  height: 250px;
  margin-top: 24px;
}

/* ===========================
   SIDEBAR WIDGETS
   =========================== */
.sidebar-inner-box {
  border: 1.5px solid var(--black);
  background-color: var(--gold) !important;
  padding: 24px 20px;
  background: var(--white);
  flex-grow: 1;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--black);
}

/* Categories List */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  font-size: 13px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1.5px solid #ccc;
}

.category-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Popular Posts */
.popular-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.popular-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.pop-number {
  font-size: 36px;
  font-weight: 700;
  color: #535050;
  line-height: 1;
}

.pop-content {
  flex-grow: 1;
}

.pop-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}

.pop-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pop-meta-stack .tag-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.pop-meta-stack .meta-text {
  font-size: 0.8rem;
}

/* ===========================
   HERO SECTION (Section 3)
   =========================== */
.hero-wrapper {
  border: 1.5px solid var(--black);
  width: 100%;
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background-color: #e9e9e9;
}

.hero-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.floating-content {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--white);
  padding: 3.5rem 4rem;
  width: 48%;
  max-width: 650px;
  z-index: 5;
}

.hero-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1.2rem;
  display: block;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1.15;
  color: var(--black);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.hero-meta {
  font-size: 12px;
  color: var(--black);
}

/* ===========================
   BUTTONS
   =========================== */
.btn-load-more {
  background-color: rgb(28 58 94);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 500;
  text-transform: lowercase;
  transition: opacity 0.2s;
}

.btn-load-more:hover {
  opacity: 0.8;
  color: var(--white);
}

/* ===========================
   PAGINATION
   =========================== */
.editorial-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 40px;
}

.page-box {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.page-box.active {
  background-color: var(--black);
  color: var(--white);
}

.page-box:hover:not(.active) {
  background-color: #f0f0f0;
  color: var(--black);
}

/* ===========================
   UTILITY CLASSES
   =========================== */
.mb-grid {
  margin-bottom: 24px;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .floating-content {
    padding: 2.5rem 3rem;
    width: 55%;
  }
}

@media (max-width: 991px) {
  .search-container {
    margin: 1rem 0;
    width: 100%;
  }
  .search-container input {
    width: 100%;
  }
  .btn-register {
    justify-content: center;
  }

  .center-col {
    order: -1;
  }

  .hero-wrapper {
    aspect-ratio: 16 / 9;
  }
  .hero-title {
    font-size: 1.8rem;
  }
  .floating-content {
    padding: 2rem;
    width: 65%;
  }

  .sidebar-wrapper {
    margin-top: 40px;
  }

  .section-header,
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .section-title,
  .page-title {
    font-size: 2.2rem;
  }

  .section-header {
    gap: 15px;
  }

  .hero-wrapper {
    aspect-ratio: 4 / 3;
  }
  .floating-content {
    width: 85%;
    padding: 1.5rem;
  }
  .hero-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 576px) {
  .hero-wrapper {
    aspect-ratio: 1 / 1;
  }
  .floating-content {
    width: 95%;
  }
}

.editorial-pagination ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.editorial-pagination li a {
  padding: 8px 12px;
  border: 1px solid #000000;
  text-decoration: none;
}
.editorial-pagination li .current {
  background-color: #000;
  color: #fff;
  padding: 8px 12px;
}

.page-numbers{
  color: black;
}

.tag-text a {
  text-decoration: none;
  color: #000;
}



/* blog  */
/* --- TOP HEADER AREA --- */
.article-header {
  text-align: center;
  max-width: 900px;
  margin: 60px auto 40px;
  padding: 0 20px;
}
.breadcrumbs {
  font-size: 11px;
  font-weight: 500;
  color: #555;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.main-title {
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  line-height: 1.15;
  color: #000;
  margin-bottom: 20px;
  font-weight: 400;
}
.subtitle {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.meta-info {
  font-size: 13px;
  color: #333;
}
.meta-info strong {
  font-weight: 600;
  color: #000;
}

/* --- MAIN ARTICLE CONTENT (LEFT COLUMN) --- */
.featured-image-wrapper {
  width: 100%;
  margin-bottom: 40px;
}
/* Note: Unlike previous sections, this image does not have the black border/circles based on your image */
.featured-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.article-body h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  color: #000;
  margin-top: 40px;
  margin-bottom: 20px;
}

.article-body h2,.article-body h3,.article-body h4,.article-body h5,.article-body h6 {
    font-family: "Playfair Display", serif;
      margin-top: 40px;
  margin-bottom: 20px;
    color: #000;
}

.article-body p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 24px;
}

/* --- SIDEBAR (RIGHT COLUMN) --- */
.sidebar-section {
  border-bottom: 1.5px solid #000;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.sidebar-title {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 20px;
  font-weight: 400;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.social-icons svg {
  width: 16px;
  height: 16px;
  fill: #000;
  transition: opacity 0.2s;
}
.social-icons a:hover svg {
  opacity: 0.6;
}

/* Author Box */
.author-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.author-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 2px;
}
.author-name {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  margin: 0 0 2px 0;
  color: #000;
}
.author-role {
  font-size: 11px;
  color: #666;
  margin-bottom: 10px;
}

/* Recent Posts */
.recent-post-item {
  margin-bottom: 24px;
}
.recent-post-item:last-child {
  margin-bottom: 0;
}
.recent-post-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
  margin-bottom: 8px;
}
.recent-post-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.recent-post-meta a {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: grey;
}


.tag-text{
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
}
.meta-text {
  font-size: 10px;
  color: #000;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991px) {
  .sidebar-wrapper {
    margin-top: 50px;
  }
  .main-title {
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) {
  .main-title {
    font-size: 2.2rem;
  }
  .article-body h2 {
    font-size: 1.8rem;
  }
}

/* --- HEADER SECTION --- */
.section-header {
  margin-bottom: 10px;
}

.section-title {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  color: #000;
  margin: 0;
  line-height: 1;
}

/* --- DIVIDER LINE --- */
.top-divider-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.diamond {
  width: 4px;
  height: 4px;
  background-color: #000;
  transform: rotate(45deg);
}
.solid-line {
  flex-grow: 1;
  height: 1.5px;
  background-color: #000;
}

/* --- EDITORIAL CARD STYLES --- */
.editorial-box {
  border: 1.5px solid #000;
  padding: 8px;
  background: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  display: flex;
  flex-direction: column;
}

/* Top Bar: Circles & Dots */
.box-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.circles {
  display: flex;
  gap: 4px;
}
.circle {
  width: 9px;
  height: 9px;
  border: 1.2px solid #000;
  border-radius: 50%;
  background-color: transparent;
}
.dashed-line {
  flex-grow: 1;
  margin: 0 10px;
  height: 1px;
  background-image: linear-gradient(to right, #000 40%, transparent 40%);
  background-size: 5px 1px;
  background-repeat: repeat-x;
}
.issue-no {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Inner Image Container */
.image-wrapper {
  border: 1.5px solid #000;
  width: 100%;
  aspect-ratio: 4 / 3.2; /* Matches the slightly boxy ratio of your image */
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Typography Inside Card */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tag-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.meta-text {
  font-size: 0.8rem;
  color: #000;
}
.article-title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 0;
  min-height: 43px;
}

.mb-grid {
  margin-bottom: 24px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .section-title {
    font-size: 2.2rem;
  }
}


/* logo  */
/* .navbar-brand img{
  width: 122px;
} */


/* search  */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(15, 5, 20, 0.88); */
    background: white;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 0;
}

.search-overlay__close {
    position: fixed;
    top: 20px;
    right: 28px;
    z-index: 3;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
    line-height: 0;
    stroke:black;
}

.search-overlay__close svg{
  stroke:black;
}

.search-overlay__close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.search-overlay__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 80px 24px 40px;
    margin: 0 auto;
}

.search-overlay__input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.search-overlay__input {
    width: 100%;
    padding: 18px 55px 18px 24px;
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
    background: #ffffff;
    border: 2px solid black;
    /* border-radius: 50px; */
    border-radius: 0px;
    outline: none;
    box-shadow: 0 8px 32px rgb(220 202 202 / 30%);
    font-family: inherit;
    -webkit-appearance: none;
}

.search-overlay__input::placeholder {
    color: #999;
    font-weight: 300;
}

.search-overlay__input:focus {
    border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 40px rgba(186, 185, 185, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.08);
    border: 1px solid black;
}

.search-overlay__spinner {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.search-overlay__results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.search-result-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid black;
    border-radius: 0px;
    text-decoration: none;
    color: #ffffff;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    cursor: pointer;
    overflow: hidden;
    animation: cardFadeIn 0.4s ease forwards;
    opacity: 0;
    transform: translateY(12px);
}

.search-result-card:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(145, 144, 144, 0.3);
    color: #ffffff;
    text-decoration: none;
}

@keyframes cardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result-card__thumb {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 0px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.search-result-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* .search-result-card:hover .search-result-card__thumb img {
    transform: scale(1.05);
} */

.search-result-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-result-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #000000;
}

.search-result-card__excerpt {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    color: rgb(30 24 24 / 79%);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-overlay__no-results {
    text-align: center;
    padding: 60px 20px;
}

.search-overlay__no-results p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    margin: 0;
}

body.search-overlay-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .search-overlay__content { padding: 70px 20px 30px; }
    .search-overlay__input { font-size: 16px; padding: 16px 50px 16px 20px; }
    .search-result-card__thumb { width: 85px; height: 85px; }
    .search-result-card__title { font-size: 14px; }
    .search-result-card__excerpt { font-size: 12px; }
}

@media (max-width: 600px) {
    .search-overlay__close { top: 14px; right: 16px; }
    .search-overlay__close svg { width: 26px; height: 26px;stroke:black; }
    .search-overlay__content { padding: 60px 14px 24px; }
    .search-overlay__input { font-size: 15px; padding: 14px 45px 14px 18px;border:1px solid rgb(39, 38, 38); }
    .search-overlay__results { grid-template-columns: 1fr; gap: 12px; }
    .search-result-card { padding: 14px; gap: 12px; border-radius: 0px;border:1px solid black; }
    .search-result-card__thumb { width: 75px; height: 75px; border-radius: 0px; }
    .search-result-card__title { font-size: 14px; }
    .search-result-card__excerpt { font-size: 12px; }
}

/* ===========================================================
   CURIOSITY QUOTE CARD  (sidebar widget - category.php)
   =========================================================== */

/* The card must scale with its own width, not the viewport: it is
   full-bleed on phones but sits in a narrow col-lg-4 on desktop, so
   viewport-based sizing pulls in the wrong direction at >=992px. */
.cq-widget {
  container-type: inline-size;
  width: 100%;
  /* Keeps the near-square composition when the sidebar goes
     full-bleed below 992px instead of stretching into a band. */
  max-width: 520px;
  margin-inline: auto;
}

.cq-card {
  --cq-paper: #f4f1e4;
  --cq-ink: #141414;
  --cq-gold: #c9962b;
  --cq-size: 1.75rem;   /* fallback; overridden per breakpoint below */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cq-size) * 0.34);
  text-align: center;
  width: 100%;
  padding: 6.5% 4.5%;


}

/* paper grain */
.cq-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: multiply;
  background-size: 140px 140px;
}

/* ---------- Quote marks (66 / 99) ---------- */
.cq-mark {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--cq-size) * 1.95);
  height: calc(var(--cq-size) * 1.22);
  color: var(--cq-ink);
  overflow: visible;
}

.cq-mark--close {
  transform: rotate(180deg);
}

/* ---------- Quote text ---------- */
.cq-card .cq-text {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
  font-family: "Poppins", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 300;
  font-size: var(--cq-size);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--cq-ink);
}

/* ---------- Highlighted word ---------- */
.cq-hl {
  position: relative;
  display: inline-block;
  padding: 0.04em 0.3em 0.06em;
  margin: 0 0.04em;
  color: var(--cq-gold);           /* drives currentColor in the SVGs */
  line-height: inherit;
}

.cq-hl__word {
  position: relative;
  z-index: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cq-ink);
}

/* Both overlays are replaced elements, so their box must be sized
   explicitly (an auto height would fall back to the intrinsic ratio). */
.cq-hl__box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cq-hl__scribble {
  position: absolute;
  left: 0;
  bottom: -0.07em;
  width: 100%;
  height: 0.26em;
  overflow: visible;
  pointer-events: none;
}

/* ---------- Type scale ----------
   Preferred: sized from the widget's own width. The clamp keeps it
   readable in a 280px sidebar and stops it ballooning when the card
   goes full-bleed on tablets. */
@supports (container-type: inline-size) {
  .cq-card { --cq-size: clamp(1.25rem, 10.2cqi, 3.3rem); }
}

/* Fallback for browsers without container queries (viewport-based) */
@supports not (container-type: inline-size) {
  .cq-card { --cq-size: 1.75rem; }

  @media (max-width: 359.98px)  { .cq-card { --cq-size: 1.3rem; } }
  @media (min-width: 360px) and (max-width: 575.98px)  { .cq-card { --cq-size: 1.6rem; } }
  @media (min-width: 576px) and (max-width: 767.98px)  { .cq-card { --cq-size: 2.1rem; } }
  @media (min-width: 768px) and (max-width: 991.98px)  { .cq-card { --cq-size: 2.6rem; } }
  @media (min-width: 992px) and (max-width: 1199.98px) { .cq-card { --cq-size: 1.55rem; } }
  @media (min-width: 1200px) and (max-width: 1399.98px){ .cq-card { --cq-size: 1.85rem; } }
  @media (min-width: 1400px)                           { .cq-card { --cq-size: 2.15rem; } }
}

/* ---------- Image variant (per-category "Quote Image") ----------
   Same footprint as the drawn card, but the uploaded artwork owns the
   whole box: no padding, no flex gaps, no paper grain behind it. */
.cq-card--image {
  padding: 0;
  gap: 0;
  display: block;
}

.cq-card--image::before {
  content: none;
}

.cq-card--image .cq-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}