/*
 * DailyJagaran - RESPONSIVE LAYER (v2.0)
 * Loaded after style.css. Makes the desktop design fluid on tablets and phones.
 * Breakpoints: <=1199 small desktop | <=991 tablet | <=767 phone | <=480 small phone
 */

/* ---------- Base safety: nothing may overflow the screen ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; word-wrap: break-word; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
iframe, embed, object { max-width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
.details-main-news img, .entry-content img, .wp-caption, figure { max-width: 100% !important; height: auto; }
.wp-caption { width: auto !important; }
.details-main-news table { display: block; max-width: 100%; overflow-x: auto; }
.jag-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 10px 0; }
.jag-embed iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* Advertisement areas: never wider than the screen, images scale, JS/iframe ads centre */
.advertisement, .header-baner, .main-banner, .details-side-banner, .widget, .top-side-banner { max-width: 100%; }
.header-baner img, .main-banner img, .details-side-banner img, .widget img, .jag-ad-img { max-width: 100%; height: auto; }
.header-baner ins, .main-banner ins, .widget ins, .header-baner iframe, .main-banner iframe, .widget iframe { max-width: 100%; }
.header-baner { text-align: right; }
.main-banner { text-align: center; }
.main-banner:empty, .header-baner:empty { display: none; }

/* Header / menu mobile button is hidden on desktop */
.jag-menu-toggle { display: none; }
#cssmenu > ul > li > a .home-label { display: none; }
#cssmenu #home a .home-label { display: none; }

/* Breaking-news bar (moved out of the template so it is no longer duplicated on every page) */
.breakingNews{width:100%;height:40px;background:#fff;position:relative;border:solid 2px #19232d;overflow:hidden;}
.breakingNews>.bn-title{width:auto;height:40px;display:inline-block;background:#19232d;position:relative;}
.breakingNews>.bn-title>h2{display:inline-block;margin:0;padding:0 10px;line-height:40px;font-size:20px;color:#fff;height:40px;box-sizing:border-box;}
.breakingNews>.bn-title>span{width:0;position:absolute;right:-10px;top:10px;height:0;border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #19232d;}
.breakingNews>ul{padding:0;margin:0;list-style:none;position:absolute;left:210px;top:0;right:40px;height:40px;font-size:18px;}
.breakingNews>ul>li{position:absolute;height:40px;width:100%;line-height:40px;display:none;}
.breakingNews>ul>li>a{text-decoration:none;color:#333;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:20px;}
.breakingNews>ul>li>a:hover{color:#7a6b4a;}
.breakingNews>.bn-navi{width:40px;height:40px;position:absolute;right:0;top:0;}
.breakingNews>.bn-navi>span{width:20px;height:40px;position:absolute;top:0;cursor:pointer;opacity:.3;background-image:url(../img/bn-arrows.png);background-repeat:no-repeat;}
.breakingNews>.bn-navi>span:hover{opacity:1;}
.breakingNews>.bn-navi>span:first-child{background-position:left center;left:0;}
.breakingNews>.bn-navi>span:last-child{background-position:right center;right:0;}
.breakingNews:hover .bn-navi{opacity:1;}
.bn-red{border-color:#19232d;}
.bn-red>.bn-title{background:#19232d;}
.bn-red>.bn-title>span{border-left-color:#19232d;}
.bn-red>ul>li>a:hover{color:#7a6b4a;}
.bn-bordernone{border:1px solid #19232d;}
.breakingNews>.bn-navi,.breakingNews>ul>li>a,.breakingNews>.bn-navi>span{transition:.25s linear;-moz-transition:.25s linear;-webkit-transition:.25s linear;}
.headline-content{margin-top:22px;margin-bottom:10px;}
.breakingNews>ul>li>a { font-size: 18px; }

/* =========================================================
   <= 1199px  small desktop / big tablet landscape
   ========================================================= */
@media only screen and (max-width: 1199px) {
  #cssmenu > ul > li > a { font-size: 16px; padding-left: 7px; padding-right: 7px; }
  #cssmenu > ul > li.has-sub > a { padding-right: 22px; }
  .lead-news-heading h1 { font-size: 24px; line-height: 30px; }
  .category-lead-news-heading h3 { font-size: 21px; line-height: 26px; }
}

/* =========================================================
   <= 991px  TABLET + PHONE : stack the fixed-percentage columns
   ========================================================= */
@media only screen and (max-width: 991px) {

  /* ---- all floated % columns become full width ---- */
  .top-news-left, .top-news-middle, .top-news-right,
  .news-international-left, .news-international-right,
  .lifestyle-left, .lifestyle-right,
  .top-category-left, .top-category-right,
  .details-left, .details-middle, .details-right,
  .details-left-video, .details-right-video,
  .opinion-right, .opinion-left {
    width: 100% !important;
    float: none !important;
    max-width: 100%;
  }
  .top-news-left, .top-news-right { margin-bottom: 15px; }

  /* Bootstrap col-md-* are already stacked below 992px; make sure they keep gutters */
  .jagaran-row { margin-left: -8px; margin-right: -8px; }
  .jagaran-padding, .jagaran-container { padding-left: 8px; padding-right: 8px; }


  /* Bootstrap keeps col-md-* side by side from 768px; the header is cleaner stacked up to 991px */
  .container { max-width: 100% !important; width: 100%; }
  .header-top-area .col-md-5, .header-top-area .col-md-7,
  .logo-area .col-md-4, .logo-area .col-md-8 { flex: 0 0 100%; max-width: 100%; }

  /* min-width on images broke narrow screens */
  .news-international-lead img { min-width: 0 !important; width: 100%; }

  /* ---- top bar ---- */
  .header-top-area .date-area { text-align: center; }
  .current-date li { font-size: 14px; }
  .header-top-area .social-helper { float: none; display: block; text-align: center; }
  .social-icon-wrapper.float-right { float: none !important; }
  .social-top-icon { display: inline-block; }
  .social-top-icon li a span { display: none; }

  /* ---- logo + banner ---- */
  .logo-area .main-logo { text-align: center; padding: 10px 0 0; }
  .logo-area .main-logo img { max-height: 70px; width: auto; max-width: 80%; }
  .header-baner { float: none !important; text-align: center; padding: 10px 0; }

  /* ---- MENU: collapsible ---- */
  .main-menu-wrapper .jag-menu-row { position: relative; margin-left: 0; margin-right: 0; align-items: center; }
  .main-menu-wrapper .jag-menu-col { position: static; padding-left: 0; padding-right: 0; flex: 0 0 80%; max-width: 80%; }
  .main-menu-wrapper .jag-search-col { flex: 0 0 20%; max-width: 20%; text-align: right; padding-left: 0; padding-right: 8px; }

  .jag-menu-toggle {
    display: inline-flex; align-items: center;
    background: transparent; border: 0; padding: 0 14px; height: 48px;
    color: #000; font-size: 18px; cursor: pointer; font-family: inherit;
  }
  .jag-menu-toggle:focus { outline: 0; }
  .jag-menu-toggle:focus-visible { outline: 2px solid #D80B15; outline-offset: -2px; }
  .jag-burger { display: inline-block; width: 24px; margin-right: 10px; }
  .jag-burger i { display: block; height: 3px; margin: 4px 0; background: #19232d; border-radius: 2px; transition: transform .25s, opacity .25s; }
  .jag-menu-open .jag-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .jag-menu-open .jag-burger i:nth-child(2) { opacity: 0; }
  .jag-menu-open .jag-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-menu-wrapper #cssmenu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    width: 100%; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff; box-shadow: 0 8px 14px rgba(0,0,0,.25); z-index: 10000;
  }
  .main-menu-wrapper.jag-menu-open #cssmenu { display: block; }
  #cssmenu ul { display: block !important; width: 100%; }
  #cssmenu > ul > li, #cssmenu.align-center > ul > li, #cssmenu.align-right > ul > li { float: none; display: block; width: 100%; height: auto; border-top: 1px solid rgba(120,120,120,.18); }
  #cssmenu > ul > li:first-child { border-top: 0; }
  #cssmenu > ul > li > a { display: block; width: 100%; padding: 14px 18px; font-size: 18px; line-height: 1.3; }
  #cssmenu > ul > li:before, #cssmenu > ul > li:after { display: none; }
  #cssmenu > ul > li:hover > a { color: #000; background: #f3f3f0; }
  #cssmenu > ul > li.current-menu-item > a, #cssmenu > ul > li.current-item > a { color: #D80B15; }
  #cssmenu > ul > li.has-sub > a::after { display: none; }
  #cssmenu #home a .home-label { display: inline; }
  #cssmenu ul ul { position: static; left: auto; width: 100%; }
  #cssmenu ul ul li { height: auto; }
  #cssmenu ul ul li a { width: 100%; padding: 12px 18px 12px 34px; font-size: 16px; }

  /* ---- search ---- */
  .search-icon { margin: 0; padding: 0; list-style: none; }
  .search-icon li a { margin-top: 0; padding: 0 12px; line-height: 48px; font-size: 20px; }
  .main-menu-wrapper .search-box {
    position: absolute; left: 8px; right: 8px; top: 100%; width: auto; height: auto; line-height: normal;
    padding: 10px; display: none; z-index: 10001; border-top: 4px solid #D80B15;
  }
  .search-box:before { display: none; }
  .search-box form { display: flex; }
  .search-box input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; height: 38px; font-size: 16px; }
  .search-box input[type="submit"], .search-box input[type="button"] { flex: 0 0 auto; width: auto; margin: 0 0 0 6px; height: 38px; padding: 0 14px; background: #D80B15; color: #fff; border: 1px solid #D80B15; }

  /* ---- breaking news bar ---- */
  .breakingNews { height: 36px; }
  .breakingNews>.bn-title, .breakingNews>.bn-title>h2 { height: 36px; line-height: 36px; }
  .breakingNews>.bn-title>h2 { font-size: 17px; padding: 0 8px; }
  .breakingNews>.bn-title>span { top: 8px; }
  .breakingNews>ul { left: 96px; height: 36px; }
  .breakingNews>ul>li { height: 36px; line-height: 36px; }
  .breakingNews>ul>li>a { font-size: 16px; }
  .breakingNews>.bn-navi { height: 36px; }
  .breakingNews>.bn-navi>span { height: 36px; }
  .headline-content { margin-top: 12px; }

  /* ---- home top section ---- */
  .top-news-section { margin-top: 12px; margin-bottom: 20px; }
  .top-lead-news img, .second-lead-news-wrapper img { width: 100%; }
  .top-news-middle .col-md-6 { flex: 0 0 50%; max-width: 50%; }   /* keep the 2x2 small stories side by side */

  /* ---- sections that hold 3/4 columns ---- */
  .international-section .col-md-4, .international-section-2 .col-md-3 { margin-bottom: 15px; }
  .col-3-lead-heading-container h3, .col-4-lead-heading-container h3 { font-size: 20px; line-height: 26px; }

  /* ---- category page ---- */
  .category-lead-news-small { height: auto; }
  .category-lead-news-small img { height: auto; }
  .category-lead-news-small-wrapper .col-md-6 { flex: 0 0 50%; max-width: 50%; }

  /* ---- article page ---- */
  .details-left .details-left-top { margin-bottom: 8px; }
  .details-middle .details-main-news h2 { font-size: 26px; line-height: 1.35; }
  .details-main-news { font-size: 18px; line-height: 1.75; }
  .details-page .details-tag .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .details-page .details-tag .text-right { text-align: left !important; margin-top: 8px; }
  .details-right { margin-top: 20px; }
  .details-photo-gallery-heading h1 { font-size: 24px; line-height: 28px; }

  /* footer */
  .footer-top .footer-top-left, .footer-top .footer-top-right { text-align: center; margin: 8px 0; }
  .footer-top .social-helper { float: none; }
  .footer-top .ul-play-store { text-align: center; padding: 0; }
  .footer-top .ul-play-store li { display: inline-block; margin: 0 6px; }
  .footer-top .ul-play-store img { max-height: 44px; width: auto; }
  .footer-bottom .col-md-8, .footer-bottom .col-md-4 { text-align: center; }
}

/* =========================================================
   <= 767px  PHONE
   ========================================================= */
@media only screen and (max-width: 767px) {
  body { font-size: 16px; }

  /* home lead: full-width photo with title on it, other stories below */
  .lead-news-heading { padding: 24px 10px 8px; }
  .lead-news-heading h1 { font-size: 20px; line-height: 26px; margin: 0; }
  .top-left-side-bar-left, .top-left-side-bar-right { float: left; }
  .top-left-side-bar-left { width: 34%; }
  .top-left-side-bar-right { width: 66%; }
  .top-left-side-bar li a { display: block; overflow: hidden; }
  .top-left-side-bar h3, .latest-news-ul h3, .news-international-ul h3, .usa-election-ul h2 { font-size: 17px; line-height: 23px; }
  .text-heading h2 { font-size: 16px; line-height: 22px; }

  /* photo / text pairs keep their thumbnail-left layout, just with a larger text ratio */
  .news-international-lead-heading h2 { font-size: 20px; line-height: 26px; }
  .news-international-lead-heading p { display: none; }
  .category-lead-news-heading h3 { font-size: 19px; line-height: 24px; }
  .category-lead-news-heading-small h3 { font-size: 16px; line-height: 21px; }

  /* headings */
  .text-headline-style-3 h3, .text-headline-style-3-category h3, .international-news-heading h3, .lifestyle-heading-three h3 { font-size: 20px; }

  /* article */
  .details-middle .details-main-news h2 { font-size: 22px; }
  .details-main-news { font-size: 17px; }
  .details-page-breadcrumb, .breadcrumb { font-size: 14px; flex-wrap: wrap; }
  .facebook-comment { max-width: 100%; overflow: hidden; }
  .fb-comments, .fb-comments span, .fb-comments iframe { max-width: 100% !important; }
  .single-block-details .col-md-5, .single-block-details .col-md-7 { flex: 0 0 100%; max-width: 100%; }
  .single-block-details .img-single-block-details { margin-bottom: 6px; }

  /* gallery / videos */
  .slider-wrapper { max-width: 100%; }
  .theme-default .nivoSlider img { max-width: 100%; }
  .video-ul-left { width: 40%; }
  .video-ul-right { width: 60%; }

  /* misc fixed widths from style.css */
  .ent-two-big-news-img-text, .ent-two-small-news-img-text { width: 100%; }
  .footer-logo img { width: 60%; max-width: 220px; }
  .scrollup { right: 12px; bottom: 70px; }

  /* wp-pagenavi buttons wrap instead of overflowing */
  .wp-pagenavi { display: flex; flex-wrap: wrap; justify-content: center; }
  .wp-pagenavi a, .wp-pagenavi span { margin: 0 4px 6px 0 !important; }
}

/* =========================================================
   <= 480px  SMALL PHONE
   ========================================================= */
@media only screen and (max-width: 480px) {
  .top-news-middle .col-md-6, .category-lead-news-small-wrapper .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .current-date li:first-child { display: none; }
  .jag-menu-toggle-text { font-size: 17px; }
  .breakingNews>.bn-title>h2 { font-size: 15px; }
  .breakingNews>ul { left: 82px; }
  .lead-news-heading h1 { font-size: 18px; line-height: 24px; }
}

/* Sticky "bottom ad" helper: only on phones */
@media only screen and (min-width: 768px) { .sticky_ad_beta, .close_sticky_ad_beta { display: none !important; } }

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

/* Print */
@media print { .main-menu-wrapper, .scrollup, .header-baner, .main-banner, .breakingBar, footer { display: none !important; } }