/***************************************************************
 * File: custom.css
 * Purpose: Project-level CSS overrides and experiments
 * Author: Fizul Islam
 * Notes: 
 * - Avoid editing style.css for minor fixes
 * - Keep everything modular & documented section-wise
 ***************************************************************/

/* ╭─────────────────────────────────────────────────────────────╮
   │ 0) GLOBAL OVERRIDES                                          │
   ╰─────────────────────────────────────────────────────────────╮*/

   body.custom-bg-dark {
    background: #0d1b2a !important;
    color: #e5e7eb !important;
}

.hide {
    display: none !important;
}

.text-center {
    text-align: center !important;
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ 1) HEADER / NAV OVERRIDES                                    │
   ╰─────────────────────────────────────────────────────────────╮*/

/* Example: Make header sticky */
.kc-header.sticky {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    z-index: 999;
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ 2) PAGE / POST LAYOUT                                        │
   ╰─────────────────────────────────────────────────────────────╮*/

.fullwidth-content .entry-content {
    max-width: none !important;
    padding: 0 !important;
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ 3) WIDGET / SIDEBAR CUSTOMIZATIONS                            │
   ╰─────────────────────────────────────────────────────────────╮*/

.sidebar .widget-title {
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid var(--kc-accent);
    padding-bottom: 4px;
    margin-bottom: 14px;
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ 4) BUTTON / LINK OVERRIDES                                   │
   ╰─────────────────────────────────────────────────────────────╮*/

.btn-rounded {
    border-radius: 40px !important;
}

a.no-underline {
    text-decoration: none !important;
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ 5) MOBILE TWEAKS                                             │
   ╰─────────────────────────────────────────────────────────────╮*/

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ 6) PRINT MODE (EXTRA OVERRIDES)                              │
   ╰─────────────────────────────────────────────────────────────╮*/

@media print {
    body {
        background: #fff !important;
    }
}

/***************************************************************
 * General Section Padding and Font Size Adjustments
 ***************************************************************/

/* Default (desktop) */
:root {
    --kc-sec-pad-t: 80px;
    --kc-sec-pad-b: 80px;
    --kc-font-size: 17px;
}

section,
.wp-block-group {
    padding-top: var(--kc-sec-pad-t);
    padding-bottom: var(--kc-sec-pad-b);
}

body {
    font-size: var(--kc-font-size);
}

/* Tablet */
@media (max-width: 1024px) {
    section,
    .wp-block-group {
        padding-top: var(--kc-sec-pad-t-tablet, var(--kc-sec-pad-t));
        padding-bottom: var(--kc-sec-pad-b-tablet, var(--kc-sec-pad-b));
    }
    body {
        font-size: var(--kc-font-size-tablet, var(--kc-font-size));
    }
}

/* Mobile */
@media (max-width: 767px) {
    section,
    .wp-block-group {
        padding-top: var(--kc-sec-pad-t-mobile, var(--kc-sec-pad-t));
        padding-bottom: var(--kc-sec-pad-b-mobile, var(--kc-sec-pad-b));
    }
    body {
        font-size: var(--kc-font-size-mobile, var(--kc-font-size));
    }
}

/***************************************************************
 * ADD YOUR CUSTOM CODE BELOW (Safe zone)
 ***************************************************************/


.kc-header.is-sticky{position:sticky;top:0;z-index:999;backdrop-filter:blur(6px)}
.kc-cta.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--kc-border,#e5e7eb);background:var(--kc-accent,#2563eb);color:#fff;text-decoration:none}
.kc-cta.btn:hover{opacity:.9}


.kc-reactions { display:flex; gap:10px; margin:20px 0; }
.kc-reactions button {
	cursor:pointer;
	padding:6px 12px;
	border-radius:6px;
	border:1px solid #ddd;
	background:#f6f6f6;
	transition:.2s;
}
.kc-reactions button:hover { background:#e2e2e2; }
.kc-post-views { opacity:.7; margin-bottom:10px; }

/* without kirki plaug in core fallback css  */
.kc-cta.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--kc-border,#e5e7eb);background:var(--kc-accent,#2563eb);color:#fff;text-decoration:none}
.kc-cta.btn:hover{opacity:.9}


/* Hide submenus by default (we use [hidden]) */
.kc-header .sub-menu[hidden] { display: none; }

/* Mega wrapper layout */
.kc-mega { width: 100%; }
.kc-mega__inner { max-width: var(--kc-container, 1280px); margin: 0 auto; }
.kc-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kc-mega__col > li > a { font-weight: 600; }
.kc-sub-toggle { background: none; border: 0; cursor: pointer; margin-left: .4rem; }

/* make header interactable above ticker/others */
.kc-header{position:relative;z-index:40}
.kc-topbar,.kc-topbar2,.kc-breaking{position:relative;z-index:10}

/* any accidental full-width overlay should not block clicks */
.header-cover,.ticker-cover{pointer-events:none}

.kc-cta.btn{position:relative;z-index:4544}


/* Cookie Banner: layout + actions */
.kc-cookie-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    background: #111; color: #fff; padding: 14px 16px;
    border-radius: 12px; display: flex; gap: 14px; align-items: center;
    z-index: 9999; animation: kc-fade-in .25s ease;
  }
  .kc-cookie-banner.hide { animation: kc-fade-out .25s ease; opacity:0; }
  .kc-cookie-msg { line-height: 1.5; }
  .kc-cookie-link { color: #9ec5ff; text-decoration: underline; }
  .kc-cookie-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
  .kc-cookie-btn {
    background: #e5e7eb; color: #111; border: 0; padding: 8px 14px; border-radius: 8px;
    cursor: pointer; font-size: 14px;
  }
  .kc-cookie-accept { background: var(--kc-accent,#0b72e7); color: #fff; }
  .kc-cookie-details { background: #334155; color:#fff; }
  .kc-cookie-decline { background: #ef4444; color:#fff; }
  .kc-cookie-btn:hover { opacity:.9; }
  
  @keyframes kc-fade-in { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  @keyframes kc-fade-out { from{opacity:1;} to{opacity:0;} }
  
  /* Modal (আপনার আগের শেয়ার মোডাল স্টাইলের সাথেই মানানসই) */
  .kc-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:10000}
  .kc-modal[aria-hidden="false"]{display:flex;align-items:center;justify-content:center}
  .kc-modal__dialog{position:relative;background:#fff;max-width:min(760px,95vw);width:100%;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:18px}
  .kc-modal__close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:26px;cursor:pointer}
  .kc-modal__title{margin:0 0 12px}
  .kc-modal__body{margin-top:4px}
  .kc-modal__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
  
  /* Switch blocks */
  .kc-cookie-prefs{display:grid;gap:12px}
  .kc-switch{border:1px solid #e5e7eb;border-radius:10px;padding:12px}
  .kc-switch__head{display:flex;align-items:center;gap:10px;justify-content:space-between}
  .kc-switch__label{font-weight:600}
  .kc-switch__desc{color:#6b7280;margin-top:6px}
  
  /* Pretty checkbox */
  .kc-switch__input{display:none}
  .kc-switch__slider{
    position:relative; width:44px; height:24px; border-radius:999px; background:#e5e7eb; display:inline-block;
  }
  .kc-switch__slider::after{
    content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s ease;
  }
  .kc-switch__input:checked + .kc-switch__slider{ background:#0b72e7; }
  .kc-switch__input:checked + .kc-switch__slider::after{ transform: translateX(20px); }
  .kc-switch__input[disabled] + .kc-switch__slider{ background:#93c5fd; opacity:.8; cursor:not-allowed; }
  
  @media (max-width:640px){
    .kc-cookie-banner{flex-direction:column; align-items:flex-start}
    .kc-cookie-actions{margin-left:0}
  }  

  /* Off-canvas menu – mobile */
@media (max-width:1024px){
    #kc-primary{
      position:fixed; inset:60px 0 0 0;
      transform:translateX(-100%);
      background:#fff; height:calc(100vh - 60px);
      overflow:auto; padding:12px 14px; z-index:1000;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
    #kc-primary.open{ transform:translateX(0); transition:transform .25s ease; }
    .kc-header{ position:sticky; top:0; z-index:1100; }
  }  


  /* ============================================
   NAV: Polished, designable & responsive
   Works with .kc-header, .kc-burger, #kc-primary
   ============================================ */

/* ----- Design tokens (easy to tweak) ----- */
:root{
    --nav-bg:#ffffff;
    --nav-text:#0f172a;
    --nav-dim:#6b7280;
    --nav-accent:#0b72e7;
    --nav-hover:#084a9a;
    --nav-ring:#2563eb33;
  
    --nav-radius:14px;
    --nav-pill:10px;
    --nav-shadow:0 10px 30px rgba(0,0,0,.08);
  
    --dd-bg:#fff;
    --dd-br:#e5e7eb;
    --dd-shadow:0 18px 50px rgba(0,0,0,.12);
  
    --mm-col-gap:20px;
    --mm-minw:920px;
  }
  
  /* ----- Header bar ----- */
  .kc-header{
    background:var(--nav-bg);
    border-bottom:1px solid #eef2f7;
    position:relative;
  }
  .kc-header.is-sticky{backdrop-filter:saturate(1.2) blur(6px)}
  
  /* Branding keeps its own styles */
  
  /* ----- Primary menu (desktop base) ----- */
  #kc-primary.kc-menu{
    display:flex; align-items:center; gap:18px;
  }
  #kc-primary > li > a{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 10px; font-weight:600; color:var(--nav-text);
    position:relative; border-radius:var(--nav-pill);
  }
  #kc-primary > li > a:hover,
  #kc-primary > li.current-menu-item > a{
    color:var(--nav-hover);
    background:#f1f5f9;
  }
  #kc-primary > li > a::after{
    content:""; position:absolute; left:10px; right:10px; bottom:8px;
    height:2px; background:transparent; border-radius:2px;
    transition:all .18s ease;
  }
  #kc-primary > li:hover > a::after,
  #kc-primary > li.current-menu-item > a::after{
    background:var(--nav-accent);
    transform:translateY(2px);
  }
  
  /* caret icon (if you output one) */
  .kc-caret{font-size:.85em; color:var(--nav-dim)}
  
  /* ----- Dropdown / submenus (desktop) ----- */
  #kc-primary ul.sub-menu{
    position:absolute; inset-inline-start:0; top:100%;
    min-width:240px; background:var(--dd-bg);
    border:1px solid var(--dd-br); border-radius:12px;
    box-shadow:var(--dd-shadow);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    padding:8px;
  }
  #kc-primary li:hover > ul.sub-menu,
  #kc-primary li:focus-within > ul.sub-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  #kc-primary ul.sub-menu li{position:relative}
  #kc-primary ul.sub-menu a{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:8px;
    color:var(--nav-text); white-space:nowrap;
  }
  #kc-primary ul.sub-menu a:hover{background:#f8fafc; color:var(--nav-hover)}
  /* level 2+ flyouts */
  #kc-primary ul.sub-menu ul.sub-menu{
    inset-inline-start:100%; top:0; margin-inline-start:8px;
  }
  
  /* ----- Mega menu (if you use KC_Mega_Walker) ----- */
  .kc-mega{
    width:min(var(--mm-minw), 95vw);
    background:var(--dd-bg);
    border:1px solid var(--dd-br);
    border-radius:16px;
    box-shadow:var(--dd-shadow);
    padding:18px;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .18s, transform .18s, visibility .18s;
  }
  .kc-menu li:hover>.kc-mega,
  .kc-menu li:focus-within>.kc-mega{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .kc-mega-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--mm-col-gap);
  }
  .kc-mega__col > li > a{font-weight:700; padding:8px 0}
  
  /* ======= Tablet/Mobile: slide-in panel ======= */
  @media (max-width:1024px){
    .kc-burger{
      display:inline-flex; align-items:center; justify-content:center;
      width:40px;height:40px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;
    }
  
    #kc-primary.kc-menu{
      position:fixed; inset:0 0 0 auto; /* right drawer */
      width:min(86vw, 420px); height:100vh;
      background:#fff; box-shadow:var(--nav-shadow);
      padding:18px 14px 24px; overflow:auto;
      transform:translateX(100%); transition:transform .25s ease;
      flex-direction:column; gap:0; z-index:10001;
    }
    /* open state (your JS toggles .open) */
    #kc-primary.kc-menu.open{ transform:none; }
  
    /* full-screen backdrop */
    #kc-primary.kc-menu.open::before{
      content:""; position:fixed; inset:0; background:rgba(0,0,0,.45);
      z-index:-1;
    }
  
    /* root items as nice list */
    #kc-primary > li{ width:100%; }
    #kc-primary > li > a{
      width:100%; padding:12px 12px; border-radius:10px;
    }
    #kc-primary > li > a:hover{ background:#f3f4f6; }
  
    /* submenus become accordion-style blocks */
    #kc-primary ul.sub-menu{
      position:static; transform:none; opacity:1; visibility:visible;
      border:1px dashed #e5e7eb; border-radius:10px; box-shadow:none;
      margin:8px 0 12px; padding:8px;
    }
    #kc-primary ul.sub-menu a{ padding:10px 10px; border-radius:8px; }
    #kc-primary ul.sub-menu a:hover{ background:#f8fafc; }
  
    /* optional toggle button next to parent (if your walker prints .kc-sub-toggle) */
    .kc-sub-toggle{
      margin-left:auto; border:0; background:#f1f5f9; border-radius:8px; padding:6px 8px;
    }
    li.is-open > .kc-sub-toggle{ background:#e5efff }
  }
  
  /* ======= Small phones ======= */
  @media (max-width:480px){
    #kc-primary.kc-menu{ width:95vw; }
  }
  
  /* ----- Focus ring for a11y ----- */
  #kc-primary a:focus-visible,
  #kc-primary button:focus-visible,
  .kc-burger:focus-visible{
    outline:3px solid var(--nav-ring); outline-offset:2px;
    border-radius:10px;
  }