/* ============================================================
   CapeTownMagazine.com — Responsive Stylesheet v2
   
   USAGE: Include this file AFTER all_v48.css in layout.phtml
   <link rel="stylesheet" href="/css/responsive_v2.css" />
   
   This file overrides all desktop and any legacy mobile/Marfeel
   styling for screens 1024px and below. No JavaScript required.
   All breakpoints are pure CSS media queries.
   
   Breakpoints:
     1024px — Tablet landscape
      768px — Tablet portrait
      480px — Large mobile
      375px — Small mobile
   ============================================================ */

/* ============================================================
   VIEWPORT & BOX MODEL FOUNDATION
   Must be outside media queries — applies universally
   ============================================================ */

/* ============================================================
   1024px AND BELOW — TABLET LANDSCAPE
   ============================================================ */
@media screen and (max-width: 1024px) {
  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .nav-box .nav-box-bg ul li a.active .text, .nav-box .nav-box-bg ul li a:hover .text {
  height: 28px;
}

  img {
    max-width: 100%;
    height: auto;
  }

  /* ── Reset fixed min-width on body ── */
  body {
    min-width: 0 !important;
    width: 100%;
    overflow-x: hidden;
    background: #f0f0f0;
  }

  /* ── Main wrapper — remove fixed 929px width ── */
  #wrapper,
  #top-leader-wrapper,
  #bottom-leader-wrapper,
  .logos-box,
  .banner,
  .cc_banner,
  #footer .box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ============================================================
     HEADER — fixed dark bar: hamburger | logo | bell
     ============================================================ */
  #header {
    width: 100% !important;
    height: 48px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 800;
    padding: 0 12px;
    background: #1a1a1a !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Push page below fixed header + nav (48px header + 44px nav) */
  #wrapper {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Hide all legacy header content */
  #header .box,
  #header .molo,
  #header .phone-box,
  #header strong,
  #header .lang,
  #header .login-box,
  #header .block {
    display: none !important;
  }

  /* Hamburger — left side */
  #header::before {
    content: "☰";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
  }

  /* Bell — right side */
  #header::after {
    /* content: "🔔"; */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  /* Logo — centred */
  #header .logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    overflow: visible;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #header .logo img {
    width: auto !important;
    height: 28px !important;
    display: block;
  }

  /* ============================================================
     NAV — fixed white strip scrollable below header
     ============================================================ */
  .nav-holder {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 799 !important;
    width: 100% !important;
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid #e8e8e8;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    height: auto !important;
  }

  .nav-holder::-webkit-scrollbar {
    display: none;
  }

  #nav {
    display: inline-flex !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 100%;
    background: #1a1a1a !important;
    background-image: none !important;
    flex-wrap: nowrap !important;
  }

  #nav li {
    float: none !important;
    display: inline-block !important;
    flex-shrink: 0;
    background: none !important;
    background-color: #1a1a1a !important;
    border-right: #3a3a3a 3px solid !important;
  }

  #nav li a {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px;
    padding: 0 12px !important;
    line-height: 44px !important;
    color: #222 !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important;
    background: none !important;
    background-image: none !important;
    border-bottom: 3px solid transparent !important;
    box-sizing: border-box;
  }

  #nav li a span {
    padding-right: 0 !important;
    color: white !important;
    background: none !important;
    background-image: none !important;
  }

  /* Active nav item — red underline */
  #nav li.current a,
  #nav li a.active,
  #nav li.ctm-active a {
    color: #c0392b !important;
    border-bottom: 3px solid #c0392b !important;
  }

  /* Hide dropdown menus on tablet */
  #nav .drop,
  #nav .dropleft,
  .drop2 {
    display: none !important;
  }

  /* ── Plus menu ── */
  .plusmenu {
    display: none;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    padding: 4px 8px;
    font-size: 10px;
    overflow-x: auto;
    white-space: nowrap;
    background-color: #f4f4f4;
    border-bottom: 1px solid #ddd;
  }

  .plusmenu span {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
  }

  /* ── Main layout — stack content and sidebar ── */
  #main {
    padding-top: 10px;
    background: none !important;
  }

  #main:after {
    clear: both;
    content: "";
    display: block;
  }

  .content {
    width: 100% !important;
    float: none !important;
    clear: both;
  }

  .right-col {
    display: none;
    width: 100% !important;
    float: none !important;
    clear: both;
    margin-top: 16px;
  }

  /* ── Content nav box (blue tab bar) ── */
  .nav-box {
    width: 100% !important;
    margin: 10px 0;
  }

  .nav-box .nav-box-bg {
    background-color: black !important;
  }

  .box-bg h4,
  .box-bg h4 a {
    background-color: black !important;
    color: white !important;
  }

  .box-bg a {
    font-size: 14px !important;
    color: black !important;
  }

  .nav-box .nav-box-bg ul {
    padding-left: 0 !important;
    display: flex;
    flex-wrap: wrap;
  }

  .nav-box .nav-box-bg ul li {
    flex: 1 1 auto;
  }

  .nav-box .nav-box-bg ul li a {
    font-size: 10px !important;
    padding: 0 8px !important;
    text-align: center;
    height: 28px !important;
    line-height: 28px !important;
    display: block;
    margin: 0 !important;
  }

  p:has(.st_fblike_vcount) {
    display: none !important;
  }

  .st_facebook_vcount,
  .st_email_vcount,
  .st_twitter_vcount,
  .st_linkedin_vcount,
  .st_pinterest_vcount {
    display: none !important;
  }

  /* ── Tab area (Featured / Latest / Most Read / Events Today) ── */
  .tab-area {
    display: none;
    width: 100% !important;
    float: none !important;
    margin-top: 10px;
  }

  .tab-area .tabset ul li a {
    width: auto !important;
    padding: 0 10px;
    font-size: 11px;
    line-height: 28px;
  }

  .tab-area div.tab .tab-bg {
    width: 100% !important;
  }

  /* ── Left box (Talking To You) ── */
  .left-box {
    width: 100% !important;
    float: none !important;
    clear: both;
    text-align: left;
    margin: 10px 0;
    padding: 12px;
  }

  .left-box img {
    float: left;
    margin-right: 12px;
    max-width: 100px;
  }

  /* ── Slider ── */
  #slider,
  #slider_fp,
  #slider_sf,
  #slider_sfpe1,
  #slider_sfpe2 {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .nivoSlider,
  #slider img,
  #slider_fp img,
  #slider_sf img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px;
    object-fit: cover;
  }

  /* ── Gallery ── */
  .gallery-box {
    width: 100% !important;
    visibility: visible !important;
  }

  .gallery-box .btm-bg {
    display: none;
    padding: 8px 10px 16px 10px !important;
  }

  .gallery-box ul li {
    width: 50% !important;
    padding-left: 8px !important;
  }

  /* ============================================================
     SECTION TITLE BLOCKS — "FEATURED ——" style
     Targets .top-bg wrappers inside .block / .hold / .hold3
     ============================================================ */
  .block .top-bg,
  .hold .top-bg,
  .hold3 .top-bg {
    display: flex !important;
    align-items: center;
    padding: 14px 12px 10px !important;
    background: #f0f0f0 !important;
    background-image: none !important;
    background-color: #f0f0f0 !important;
    border: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .block .top-bg h2,
  .block .top-bg h3,
  .hold .top-bg h2,
  .hold .top-bg h3,
  .hold3 .top-bg h2,
  .hold3 .top-bg h3 {
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #111 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    height: auto !important;
    line-height: 1 !important;
  }

  /* Red rule after title text */
  .block .top-bg h2::after,
  .block .top-bg h3::after,
  .hold .top-bg h2::after,
  .hold .top-bg h3::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 3px;
    background: #c0392b;
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 2px;
  }

  /* ============================================================
     POST BOXES
     ============================================================ */

  /* Card shell — large (full-width image top) */
  .post-box {
    position: relative;
    background: #fff;
    overflow: hidden;
    display: block !important;
    margin: 0 0 3px 0;
  }

  /* Large card image */
  .post-box img {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain;
    display: block;
    float: none !important;
    margin: 0 !important;
  }

  .post-box div {
    padding: 10px 12px 12px !important;
  }

  .post-box h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #000 !important;
    margin: 0 0 5px 0 !important;
    padding-right: 24px; /* room for ⋮ */
  }

  .post-box p {
    font-size: 20px !important;
    line-height: 1.45 !important;
    color: #000 !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }

  .post-box span {
    font-size: 16px !important;
    color: #000;
  }

  .post-box .text a {
    color: #000 !important;
  }

  .post-box .text div {
    padding-left: 0 !important;
  }
  /* ── Hold containers ── */
  .hold,
  .hold2,
  .hold3 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .hold .block,
  .hold3 .block {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px;
  }

  .block-holder {
    width: 100% !important;
    float: none !important;
    margin-top: 0 !important;
  }

  /* ── Right col blocks ── */
  .right-col .block {
    width: 100% !important;
    float: none !important;
  }

  .right-col .block .btm-bg {
    display: none;
    padding: 10px 14px !important;
  }

  /* ── Search box ── */
  .search-box {
    display: none;
    width: 100% !important;
    float: none !important;
    padding: 10px 0 !important;
    clear: both;
  }

  .search-box input.text {
    width: calc(100% - 80px) !important;
  }

  /* ── Newsletter box ── */
  .right-col .newsletter-box {
    display: none;
    width: 100% !important;
    float: none !important;
    margin: 10px 0 !important;
    padding: 12px !important;
    background-size: cover;
    height: auto !important;
  }

  .right-col .newsletter-box fieldset {
    width: 100%;
    padding-top: 8px;
  }

  .right-col .newsletter-box input.text {
    width: 55% !important;
    margin-right: 6px;
  }

  /* ── Calendar ── */
  .calendar {
    padding: 12px 0 16px !important;
    height: auto !important;
  }

  .calendar .month {
    width: 100% !important;
  }

  .calendar table {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
  }

  /* ── List block (Most Read etc.) ── */
  .list-block {
    width: 100% !important;
    float: none !important;
    margin-top: 16px !important;
  }

  /* ── Events module ── */
  .events .day-selector {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    height: auto !important;
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 12px !important;
  }

  .events .day-selector li {
    display: inline-block !important;
    float: none !important;
    flex-shrink: 0;
    width: 60px !important;
    height: auto !important;
    padding: 8px 4px !important;
    margin: 0 2px !important;
  }

  .events ul {
    width: 50% !important;
  }

  /* ── Banner ── */
  .banner,
  .cc_banner {
    width: 100% !important;
    height: auto !important;
  }

  .banner .text,
  .cc_banner .text {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    float: none !important;
    padding: 10px !important;
    height: auto !important;
  }

  .banner img,
  .cc_banner img {
    float: none !important;
    display: block;
    max-width: 100%;
  }

  /* ── Player / Jukebox ── */
  .player-box {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 12px !important;
  }

  .track-list {
    width: 100% !important;
    float: none !important;
  }

  .track-list ul li {
    width: 100% !important;
  }

  /* ── Box holder (section boxes) ── */
  .box-holder {
    margin-left: 0 !important;
  }

  .box-holder.big {
    width: 100% !important;
  }

  #main .box {
    width: calc(50% - 14px) !important;
    background: none !important;
  }

  #main .box .box-bg {
    display: flex !important;
   /* justify-content: center !important;
    align-items: center !important;*/
    background: none !important;
    height: 145px !important; 
  }

  #main .box img{
    magin: 0 !important;
    display: flex !important;
    max-width: 150px !important;
  }

  #main .box .box-bg div {
    align-self: baseline !important;
    text-align: left;
    min-width: 150px;
  }

  #main .box h4 {
    display: none !important;
  }

  .w2w-home-2026 .box-bg a {
    font-size: 20px !important;
    font-weight: 600;
  }

  /* ── Logos box ── */
  .logos-box {
    width: 100% !important;
  }

  .logos-box ul li {
    width: 50% !important;
    height: auto !important;
    padding: 8px;
  }

  /* ── Footer ── */
  #footer {
    padding: 12px 10px 0 !important;
    background: #1a1a1a !important;
    margin-top: 15px !important;
  }

  #footer h4 {
    width: 100% !important;
    text-indent: 0 !important;
    background: none !important;
    height: auto !important;
    font-size: 16px;
    color: #fff;
  }

  #footer .box {
    width: 100% !important;
  }

  #footer .box .top-bg {
    background-color: #1a1a1a;
    padding-bottom: 16px;
  }

  #footer .box .man {
    display: none !important;
  }

  #footer .list-area ul {
    border-top: 1px solid #3a3a3a !important;
  }

  #footer .list-area ul li {
    border-bottom: 1px solid #3a3a3a !important;
    background: none !important;
    padding-left: 0 !important; 
    padding: 4px 0;
  }

  #footer .newsletter-box {
    display: none;
    width: 100% !important;
    float: none !important;
    padding: 12px !important;
    clear: both;
  }

  #footer .newsletter-box fieldset {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #footer .newsletter-box input.text {
    width: 55% !important;
  }

  #footer .list-area {
    font-size: 14px;
    width: 100% !important;
    float: none !important;
    clear: both;
    /* padding-top: 12px !important; */
    padding: 4px;
    background: none !important;
  }

  #footer .list-area .list-box {
    width: 45% !important;
    margin-right: 4% !important;
  }

  #footer .icon-list li {
    /*display: none !important;*/
    width: 45px !important;
    padding: 5px 5px;
  }

  /* ── Top leader ad ── */
  #top-leader-wrapper {
    width: 100% !important;
    overflow: hidden;
  }

  #top-leader-left {
    width: 100% !important;
    float: none !important;
  }

  #top-leader-right {
    display: none !important;
  }

  /* ── Breadcrumbs ── */
  .breadcrumbs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 6px 10px;
    display: block;
    clear: both;
  }

  /* ── Tab box ── */
  .tab-box .tabset,
  .sub-nav {
    padding-right: 0 !important;
  }

  .tab-box .tabset ul li a,
  .sub-nav ul li a {
    width: auto !important;
    padding: 0 10px;
    font-size: 12px;
  }

  /* ── Pagination ── */
  .page-list .next-page,
  .page-list .prev-page {
    font-size: 12px;
  }

  /* ── Contact box ── */
  .contact-box {
    display: none;
    width: 100% !important;
    float: none !important;
    clear: both;
  }

  /* ── Stick footer ad ── */
  #sticky-footer {
    left: 50% !important;
    margin-left: -160px !important;
  }
} /* end 1024px */

/* ============================================================
   768px AND BELOW — TABLET PORTRAIT
   ============================================================ */
@media screen and (max-width: 768px) {
  /* ── Nav strip — smaller text ── */
  #nav li a {
    font-size: 11px !important;
    /* padding-left: 6px !important; */
    line-height: 36px !important;
  }

  #nav li a span {
    padding-right: 6px !important;
  }

  /* ── Tab area tabs ── */
  .tab-area .tabset ul {
    display: flex;
    width: 100% !important;
  }

  .tab-area .tabset ul li {
    flex: 1;
    padding-left: 0 !important;
  }

  .tab-area .tabset ul li a {
    width: 100% !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    text-align: center;
    line-height: 26px !important;
  }

  /* ── Section boxes — 1 per row ── */
  #main .box {
    width: calc(100% - 14px) !important;
    margin-bottom: 10px;
  }

  /* ── Events — full width lists ── */
  .events ul {
    width: 100% !important;
  }

  .events .day-selector li {
    width: 50px !important;
    font-size: 10px !important;
  }

  /* ── Gallery — 2 per row ── */
  .gallery-box ul li {
    width: 50% !important;
  }

  /* ── Logo box items — 3 per row ── */
  .logos-box ul li {
    width: 33.333% !important;
  }

  /* ── Footer list boxes — full width ── */
  #footer .list-area .list-box {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px;
  }

  /* ── Hold blocks — full width ── */
  .hold .block,
  .hold3 .block {
    background: none !important;
  }

  /* ── Share buttons ── */
  .btn-hold {
    padding: 16px 0 30px !important;
  }

  .btn-list {
    position: static !important;
    display: flex !important;
    gap: 6px;
    margin-top: 8px;
  }

  .btn-list li {
    padding-left: 0 !important;
  }
} /* end 768px */

/* ============================================================
   480px AND BELOW — LARGE MOBILE
   ============================================================ */
@media screen and (max-width: 480px) {
  body {
    font-size: 13px;
  }

  /* ── Header ── */
  #header {
    padding: 0 10px !important;
  }

  #header .logo img {
    height: 24px !important;
  }

  /* ── Nav — even more compact ── */
  #nav li a {
    /* font-size: 10px !important; */
    padding-left: 5px !important;
    padding-right: 5px !important;
    line-height: 38px !important;
  }

  /* ── Slider ── */
  #slider_fp img,
  #slider img {
    max-height: 200px !important;
  }

  /* ── Tab labels ── */
  .tab-area .tabset ul li a {
    font-size: 9px !important;
    padding: 0 3px !important;
  }

  /* ── Post box — thumbnail layout on small screens ── */
  .post-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }

  .post-box img {
    width: 100px !important;
    height: 78px !important;
    object-fit: cover;
    flex-shrink: 0;
    float: none !important;
    margin: 0 !important;
  }

  .post-box div {
    padding: 0 !important;
    flex: 1;
  }

  .post-box h3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding-right: 20px;
  }

  .post-box p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding-bottom: 10px !important;
  }

  .post-box span {
    font-size: 10px !important;
  }

  /* ── Tab post items ── */
  .tab-area div.tab .post {
    padding: 6px 8px !important;
  }

  .tab-area div.tab .post img {
    width: 50px !important;
    height: 50px !important;
    margin-right: 6px !important;
  }

  /* ── Newsletter inputs ── */
  .right-col .newsletter-box input.text,
  #footer .newsletter-box input.text {
    width: 60% !important;
  }

  /* ── Calendar ── */
  .calendar table {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .calendar thead td,
  .calendar tbody td {
    padding: 2px 1px !important;
    font-size: 10px !important;
  }

  .calendar tbody td span {
    width: 20px !important;
    font-size: 10px !important;
  }

  /* ── Logos ── */
  .logos-box ul li {
    width: 50% !important;
  }

  /* ── Footer ── */
  #footer .newsletter-box input.text {
    width: 58% !important;
  }

  /* ── Typography ── */
  h1 {
    font-size: 20px !important;
  }
  h2 {
    font-size: 17px !important;
  }
  h3 {
    font-size: 15px !important;
  }

  .big-text-box h3,
  .big-text-box p {
    font-size: 13px !important;
  }

  /* ── Stick footer ── */
  #sticky-footer {
    width: 100% !important;
    max-width: 320px;
    left: 50% !important;
    transform: translateX(-50%);
    margin-left: 0 !important;
  }

  /* ── Hide decorative spacer images ── */
  .banner img,
  .cc_banner img {
    display: none !important;
  }

  .banner .text,
  .cc_banner .text {
    padding: 12px !important;
  }

  .banner .text h3,
  .cc_banner .text h3 {
    font-size: 16px !important;
  }

  .w2w-home-2026 .box-bg a {
    font-size: 13px !important;
    font-weight: 600;
  }
} /* end 480px */

/* ============================================================
   375px AND BELOW — SMALL MOBILE
   ============================================================ */
@media screen and (max-width: 375px) {

.w2w-home-2026 .box-bg a {
    font-size: 12px !important;
    font-weight: 600;
  }

  #header .logo img {
    height: 22px !important;
  }

  #nav li a {
    /* font-size: 9px !important; */
    line-height: 30px !important;
  }

  .nav-box .nav-box-bg ul li a {
    font-size: 14px !important;
    padding: 0 5px !important;
    height: 24px !important;
    line-height: 24px !important;
  }

  .tab-area .tabset ul li a {
    font-size: 8px !important;
  }

  .post-box img {
    width: 80px !important;
    height: 65px !important;
  }

  .post-box h3 {
    font-size: 12px !important;
  }

  .calendar tbody td span {
    width: 18px !important;
    font-size: 9px !important;
    line-height: 18px !important;
  }

  .logos-box ul li {
    width: 50% !important;
  }

  body {
    font-size: 12px;
  }
} /* end 375px */

/* ============================================================
   PRINT — strip nav/ads for clean print
   ============================================================ */
@media print {
  .nav-holder,
  #nav,
  .plusmenu,
  .right-col .newsletter-box,
  #footer .newsletter-box,
  .banner,
  .cc_banner,
  #top-leader-wrapper,
  #bottom-leader-wrapper,
  #sticky-footer,
  .logos-box,
  .search-box,
  .btn-hold,
  .btn-list {
    display: none !important;
  }

  body {
    min-width: 0 !important;
    font-size: 12pt;
  }

  #wrapper {
    width: 100% !important;
    padding: 0 !important;
  }

  .content,
  .right-col {
    width: 100% !important;
    float: none !important;
  }
}

/* ============================================================
   SECTION 21 — MARFEEL REPLACEMENT STYLES
   
   These replace all mrf-* classes with equivalent CTM classes.
   Marfeel is no longer used. These styles apply the same UX
   patterns (article cards, sliders, share buttons, pagers,
   read-more buttons, offline states) to CTM's own markup.
   ============================================================ */

/* ── 21.1  ARTICLE CARDS (mrf-article → .post-box, .tab-area .post) ── */

@media screen and (max-width: 1024px) {
  /* Card shell */
  .post-box,
  .tab-area div.tab .post,
  .small-tab div.tab .post,
  .list-block ul li {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff !important;
  }

  /* Article image — fixed height, full width, cover crop */
  .post-box img,
  .tab-area div.tab .post img {
    width: 100%;
    height: 115px;
    object-fit: cover;
    display: block;
    margin-bottom: 8px;
    float: none;
    margin-right: 0;
  }

  /* Article title */
  .post-box .text h3,
  .post-box h3,
  .tab-area div.tab .text h2 {
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 0;
  }

  /* Article excerpt / blurb */
  .post-box p,
  .tab-area div.tab .text p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Author / date meta line */
  .post-box span,
  .tab-area div.tab .post p,
  .post-box .text em {
    font-size: 11px;
    color: #777;
    display: block;
    margin: 4px 0;
  }

  /* Share button on card — top-right absolute */
  .post-box .btn-list,
  .btn-list {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: auto;
    margin: 0;
    display: flex;
    gap: 4px;
  }

  .post-box .btn-list li,
  .btn-list li {
    padding-left: 0;
    float: none;
  }
} /* end 1024px article cards */

/* ── 21.2  HORIZONTAL PILL/CARD SLIDER
          (mrf-composedLayout--pillSlider → .tab-area .tabset scrollable) ── */

@media screen and (max-width: 1024px) {
  /* Scrollable card row — like Marfeel's pill slider */
  .tab-area div.tab .tab-bg,
  .small-tab div.tab .tab-bg,
  .post-holder {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    padding-bottom: 12px;
    height: auto !important;
    scrollbar-width: none; /* Firefox */
  }

  .tab-area div.tab .tab-bg::-webkit-scrollbar,
  .post-holder::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Each card in the slider row */
  .tab-area div.tab .post,
  .small-tab div.tab .post {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    width: 60%;
    flex: none;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 0;
  }

  /* First card — flush with left edge */
  .tab-area div.tab .post:first-child,
  .small-tab div.tab .post:first-child {
    margin-inline-start: 0;
  }

  /* Card image — full width, fixed height */
  .tab-area div.tab .post img,
  .small-tab div.tab .post img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    float: none;
    margin: 0 0 8px 0;
  }

  /* Card text area padding */
  .tab-area div.tab .post strong,
  .tab-area div.tab .post a,
  .tab-area div.tab .post p,
  .small-tab div.tab .post a,
  .small-tab div.tab .post p {
    display: block;
    padding: 0 10px;
    margin-bottom: 6px;
    white-space: normal;
  }

  .tab-area div.tab .post p:last-child,
  .small-tab div.tab .post p:last-child {
    padding-bottom: 10px;
  }

  /* Section divider between slider groups */
  .tab-area div.tab + .tab-area div.tab,
  .nav-box + .tab-area {
    padding-top: 15px;
    border-top: 1px solid #e4e4e4;
    margin-bottom: 15px;
  }
} /* end 1024px pill slider */

/* ── 21.3  SHOW MORE BUTTON
          (mrf-showMoreContainer / mrf-showMoreBtn → .more, .red-button) ── */

@media screen and (max-width: 1024px) {
  .more,
  .red-button,
  a.more {
    display: inline-block;
    color: rgba(35, 35, 35, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    padding: 10px 24px;
    margin: 8px auto;
    border: 1px solid rgba(35, 35, 35, 0.4);
    border-radius: 30px;
    background: transparent;
    text-decoration: none;
    text-indent: 0;
    width: auto;
    height: auto;
    line-height: 1.4;
    text-align: center;
  }

  .more:hover,
  .red-button:hover {
    background: #ba0202;
    border-color: #ba0202;
    color: #fff;
  }

  /* Centred show-more container */
  .hold .show,
  .block-holder .block .show,
  .right-col .list-block .accordion {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    padding: 0;
    margin: 8px 0;
  }
} /* end 1024px show more */

/* ── 21.4  PAGINATION / PAGER
          (mrf-detailsNumericPagerContainer → .page-list, .paginate) ── */

@media screen and (max-width: 1024px) {

  #event_footer_block_container{
    padding-bottom: 20px !important;
  }

  .page-list {
    padding-top: 15px;
    height: auto;
    box-sizing: border-box;
    text-align: center;
  }

  .paginate table{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Pager pill wrapper */
  .page-list .page,
  .paginate tbody {
    display: inline-block;
    margin: 0 auto;
    padding: 7px 15px;
    border-radius: 30px;
    line-height: 1;
    font-size: 14px;
    background: #0c74b7;
    color: #fff;
    left: auto;
    float: none;
    position: relative;
  }

  .page-list .page span,
  .paginate tbody td span {
    color: #fff;
    display: inline-block;
    padding: 0 2px;
    background: none !important;
    width: auto;
    line-height: 1;
  }

  .page-list .page ul li a,
  .paginate tbody td a {
    color: #fff;
    font-size: 14px;
  }

  .page-list .page ul li a.active,
  .paginate tbody td.active span,
  .paginate tbody td.active a {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    background: none;
  }

  /* Prev / Next arrows */
  .page-list .prev-page,
  .page-list .next-page {
    display: inline-block;
    float: none;
    padding: 6px 14px;
    color: #0c74b7;
    font-size: 13px;
    background: none;
  }
} /* end 1024px pager */

/* ── 21.5  BULLET / DOT PAGER
          (bullet-pager, mrf-viewNavigatorPager → .nivo-controlNav) ── */

@media screen and (max-width: 1024px) {
  .nivo-controlNav {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    text-align: center;
    padding: 8px 0 4px;
    margin: 0;
    white-space: nowrap;
  }

  .nivo-controlNav a {
    display: inline-block !important;
    float: none !important;
    margin: 0 2px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3) !important;
    background-image: none !important;
    text-indent: -9999px;
    opacity: 1;
    transition: background 0.2s ease;
  }

  .nivo-controlNav a.active {
    background: #0c74b7 !important;
    background-image: none !important;
  }
} /* end 1024px bullet pager */

/* ── 21.6  SLIDER DIRECTION ARROWS
          (mrf-nextArticle / mrf-previousArticle → .nivo-directionNav) ── */

@media screen and (max-width: 1024px) {
  .nivo-directionNav a {
    top: 50% !important;
    transform: translateY(-50%);
    opacity: 0.85;
    width: 28px !important;
    height: 28px !important;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    background-size: 14px 14px;
    background-position: center center;
  }

  a.nivo-prevNav {
    left: 8px !important;
  }

  a.nivo-nextNav {
    right: 8px !important;
    left: auto !important;
    background-position: center center;
  }
} /* end 1024px direction nav */

/* ── 21.7  SHARE OPTIONS ROW
          (mrf-shareOptions, mrf-shareAggregated → .btn-hold, .btn-list) ── */

@media screen and (max-width: 1024px) {
  /* Share row container */
  .btn-hold {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 20px !important;
    width: 100%;
  }

  /* Share label */
  .btn-hold span {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #333;
    float: none !important;
    flex-shrink: 0;
  }

  /* Button list row */
  .btn-list,
  .btn-hold .btn-list {
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    align-items: center;
  }

  .btn-list li {
    float: none !important;
    padding: 0 !important;
  }

  /* Individual share icon button — rounded */
  .btn-list li a,
  #share_button_1,
  #share_button_2,
  #share_button_3,
  #share_button_4 {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-size: 30px 30px !important;
    background-position: center !important;
    margin: 3px;
    transition: opacity 0.2s ease;
  }

  .btn-list li a:active,
  #share_button_1:active,
  #share_button_2:active,
  #share_button_3:active,
  #share_button_4:active {
    opacity: 0.6;
  }

  /* Brand colours for share buttons */
  #share_button_1 {
    background-color: #1877f2;
  } /* Facebook */
  #share_button_2 {
    background-color: #0f1419;
  } /* Twitter/X */
  #share_button_3 {
    background-color: #ff4500;
  } /* Digg/Reddit */
  #share_button_4 {
    background-color: #0066dc;
  } /* Delicious */
} /* end 1024px share */

/* ── 21.8  READ MORE / LAZY LOAD BUTTON
          (mrf-lazyDetails__readMore → .more link at bottom of article) ── */

@media screen and (max-width: 1024px) {
  /* "Read more" CTA at bottom of truncated content */
  .big-text-box .more,
  .big-text-box a.more,
  .read-box ul li a,
  .post-box .more {
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #fff;
    display: inline-block;
    border-radius: 50px;
    padding: 8px 20px;
    background-color: #0c74b7;
    text-decoration: none;
    text-indent: 0;
    width: auto;
    height: auto;
    line-height: 1.4;
    position: static;
    margin: 10px 0;
  }

  .big-text-box .btm-bg {
    padding-top: 92px !important;
  }

  .big-text-box h2 {
    color: black !important;
  }

  .post-box .more {
    display: none !important;
  }

  .big-text-box .more:active,
  .big-text-box a.more:active {
    opacity: 0.7;
  }

  /* Loading state for lazy sections */
  .post-holder.loading,
  .section-holder.loading {
    min-height: 200px;
    padding-top: 60px;
    box-sizing: border-box;
    text-align: center;
  }
} /* end 1024px read more */

/* ── 21.9  SECTION HINT / NEXT-PREV NAVIGATION
          (mrf-sectionsHint → .page-list, .bottomnav prev/next) ── */

@media screen and (max-width: 1024px) {
  /* Next/prev section strip */
  .bottomnav,
  .page-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 10px;
    border-top: 1px solid #e4e4e4;
    margin: 16px 0;
  }

  /* Each section hint element */
  .page-list .prev-page,
  .page-list .next-page {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #0c74b7;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    box-sizing: border-box;
    background-image: none;
  }

  .page-list .next-page {
    justify-content: flex-end;
    text-align: right;
  }
} /* end 1024px section hints */

/* ── 21.10  SCROLL INDICATOR / SWIPE HINT
           (mrf-scrollIndicator → custom CSS scrollbar hint) ── */

@media screen and (max-width: 1024px) {
  /* Thin scroll indicator on horizontally scrollable areas */
  .tab-area div.tab .tab-bg::after,
  .post-holder::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    border-radius: 99px;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
  }
} /* end 1024px scroll indicator */

/* ── 21.11  OFFLINE / ERROR STATE
           (mrf-offlinePage → generic error page styling) ── */

@media screen and (max-width: 1024px) {
  /* Full-page error / offline message */
  .error-page,
  .offline-page,
  #error-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    background-color: #fafafa;
    box-sizing: border-box;
  }

  .error-page h2,
  .offline-page h2 {
    font-size: 24px;
    line-height: 1.25;
    text-align: center;
    color: #5c5b5b;
    margin: 26px 0;
  }

  .error-page p,
  .offline-page p {
    font-size: 16px;
    line-height: 1.4;
    color: #363636;
    text-align: center;
  }

  /* Retry button */
  .error-page a.btn,
  .offline-page a.btn,
  .error-page input[type="submit"] {
    display: block;
    margin: 16px auto;
    padding: 10px 32px;
    font-size: 16px;
    color: #fff;
    border-radius: 50px;
    border: 0;
    background: #0c74b7;
    text-decoration: none;
    text-align: center;
  }
} /* end 1024px offline */

/* ── 21.12  MODAL / BOTTOM SHEET
           (mrf-modal → generic modal overlay) ── */

@media screen and (max-width: 1024px) {
  /* Backdrop */
  .modal-overlay,
  .ctm-modal-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(43, 43, 43, 0.55);
    z-index: 1000;
    display: none;
  }

  .modal-overlay.is-open,
  .ctm-modal-overlay.is-open {
    display: block;
  }

  /* Bottom sheet panel */
  .modal-panel,
  .ctm-modal-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 12px 12px 0 0;
    z-index: 1001;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.3s ease-out;
  }

  .modal-panel.is-open,
  .ctm-modal-panel.is-open {
    transform: translate3d(0, 0, 0);
  }

  /* Modal header */
  .modal-panel .modal-header,
  .ctm-modal-panel .modal-header {
    height: 60px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    font-weight: bold;
  }

  /* Modal content scroll area */
  .modal-panel .modal-content,
  .ctm-modal-panel .modal-content {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
  }

  /* Close button */
  .modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #9b9b9b;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
  }
} /* end 1024px modal */

/* ── 21.13  GO TO TOP BUTTON
           (mrf-goToTopBtn → generic back-to-top) ── */

@media screen and (max-width: 1024px) {
  .go-to-top,
  #go-to-top {
    position: fixed;
    bottom: 70px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 500;
    transition: transform 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .go-to-top:active,
  #go-to-top:active {
    opacity: 0.6;
  }

  .go-to-top.is-hidden,
  #go-to-top.is-hidden {
    transform: translate3d(0, 80px, 0);
  }
} /* end 1024px go to top */

/* ── 21.14  TOUCH INTERACTION STATES
           (mrf-buttonOpacity, mrf-buttonToWhite → active states) ── */

@media screen and (max-width: 1024px) {
  /* Standard tap feedback — all tappable elements */
  a:active,
  button:active,
  .tab-area .tabset ul li a:active,
  .nav-box .nav-box-bg ul li a:active,
  #nav li a:active {
    opacity: 0.75;
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }

  /* White flash on dark backgrounds */
  .nav-box .nav-box-bg ul li a:active,
  #nav li a:active {
    background-color: rgba(255, 255, 255, 0.3) !important;
    opacity: 1;
  }

  /* Dark flash on white backgrounds */
  .post-box:active,
  .tab-area div.tab .post:active {
    background-color: rgba(0, 0, 0, 0.04);
  }

  /* Remove 300ms tap delay on all interactive elements */
  a,
  button,
  input,
  select,
  textarea,
  .tab-area .tabset ul li a,
  .nav-box .nav-box-bg ul li a,
  .post-box,
  .tab-area div.tab .post {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
} /* end 1024px touch states */

/* ── 21.15  IMAGE GALLERY GRID
           (mrf-galleryGrid → .gallery-box, .gallery-holder) ── */

@media screen and (max-width: 1024px) {
  /* Gallery grid container */
  .gallery-box ul,
  .gallery-holder {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    clear: both;
  }

  /* Each gallery item — 2 per row */
  .gallery-box ul li {
    width: calc(50% - 2px) !important;
    padding-left: 0 !important;
    text-align: center;
    flex: 0 0 calc(50% - 2px);
  }

  .gallery-box ul li img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
    margin: 0 auto 6px;
  }

  /* Caption text under gallery image */
  .gallery-box ul li a,
  .gallery-box ul li em {
    font-size: 11px;
    line-height: 1.3;
    display: block;
    padding: 0 4px;
  }
} /* end 1024px gallery grid */

@media screen and (max-width: 480px) {
  /* Gallery — 1 per row on small screens */
  .gallery-box ul li {
    width: 100% !important;
    flex: 0 0 100%;
  }

  .gallery-box ul li img {
    height: 200px;
  }
} /* end 480px gallery */

/* ── 21.16  SECTION PREVIEW STRIP
           (mrf-sectionPreview → .nav-box, .drop2 section) ── */

@media screen and (max-width: 1024px) {
  /* Section strip with preview cards */
  .drop2,
  .drop2 .section {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .drop2 .btm-bg {
    padding: 10px !important;
  }

  .drop2 .section ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    width: auto !important;
    float: none !important;
    border: none !important;
  }

  .drop2 .section ul li {
    flex: 0 0 160px;
    height: auto !important;
    background: #333;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    white-space: normal;
    border-radius: 3px;
    overflow: hidden;
  }

  .drop2 .section ul li a {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: #fff !important;
    padding: 8px !important;
    font-weight: normal !important;
  }
} /* end 1024px section preview */

/* ── 21.17  APP INSTALL HINT / PROMO BAR
           (mrf-appInstallHint → .banner, notification bar) ── */

@media screen and (max-width: 1024px) {
  /* Top promo / app hint bar */
  .app-hint,
  .promo-bar {
    background-color: #fff;
    box-sizing: border-box;
    border-top: 1px solid #e4e4e4;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .app-hint__icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    border: 1px solid #e4e4e4;
    flex-shrink: 0;
    overflow: hidden;
  }

  .app-hint__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .app-hint__title {
    font-size: 12px;
    letter-spacing: 1px;
    color: #5c5b5b;
    text-transform: uppercase;
    flex: 1;
  }

  .app-hint .btn,
  .promo-bar .btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #0c74b7;
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
  }
} /* end 1024px app hint */

/* ── 21.18  STICKY FOOTER AD / BOTTOM BAR
           (mrf-sticky-wrapper, stickyPage → #sticky-footer) ── */

@media screen and (max-width: 1024px) {
  #sticky-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    width: 320px;
    height: 50px;
    z-index: 900;
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.4s ease-out;
  }

  /* Hide sticky footer when scrolling down (add .is-hidden via JS if desired) */
  #sticky-footer.is-hidden {
    transform: translateX(-50%) translateY(60px);
  }

  /* Close button for sticky ad */
  #sticky-footer .close-sticky {
    position: absolute;
    top: -20px;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    border-top-left-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    color: #828282;
    cursor: pointer;
    line-height: 1.4;
  }
} /* end 1024px sticky footer */

@media screen and (max-width: 630px) {
  .big-text-box {
    width: 100% !important;
  }
}

/* ============================================================
/* ============================================================
   SECTION 22 — HAMBURGER DRAWER MENU
   Dark theme matching the reference design
   ============================================================ */

/* Hide CSS pseudo-element burger — real button used instead */
@media screen and (max-width: 1024px) {
  #header::before {
    display: none !important;
  }
}

/* ── Burger button ── */
@media screen and (max-width: 1024px) {
  #ctm-burger {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    z-index: 810;
    flex-shrink: 0;
  }

  #ctm-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
    transform-origin: center;
  }

  #ctm-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #ctm-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  #ctm-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ── Overlay ── */
@media screen and (max-width: 1024px) {
  #ctm-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 820;
  }
  #ctm-nav-overlay.is-open {
    display: block;
  }
}

/* ── Drawer — dark background matching reference ── */
@media screen and (max-width: 1024px) {
  #ctm-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 82%;
    max-width: 310px;
    height: 100%;
    background: #1e1e1e;
    z-index: 830;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  #ctm-nav-drawer.is-open {
    transform: translateX(0);
  }

  body.ctm-menu-open {
    overflow: hidden;
  }
}

/* ── Drawer inner ── */
@media screen and (max-width: 1024px) {
  .ctm-drawer-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
}

/* ── Drawer header bar ── */
@media screen and (max-width: 1024px) {
  .ctm-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111;
    padding: 0 14px;
    height: 50px;
    flex-shrink: 0;
    border-bottom: 1px solid #333;
  }

  .ctm-drawer-logo {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2px;
  }

  .ctm-drawer-logo strong {
    color: #c0392b;
    font-weight: 700;
  }

  .ctm-drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    opacity: 0.7;
  }

  .ctm-drawer-close:active {
    opacity: 1;
  }
}

/* ── Nav list — dark rows ── */
@media screen and (max-width: 1024px) {
  #ctm-drawer-nav {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: none !important;
    background-image: none !important;
    white-space: normal !important;
  }

  #ctm-drawer-nav > li {
    display: block !important;
    float: none !important;
    position: relative;
    border-bottom: 1px solid #2e2e2e !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
  }

  #ctm-drawer-nav > li > a {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px;
    color: #f0f0f0 !important;
    padding: 16px 52px 16px 18px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    white-space: normal !important;
    height: auto !important;
  }

  #ctm-drawer-nav > li > a:active {
    background: #2a2a2a !important;
  }
}

/* ── Chevron toggle ── */
@media screen and (max-width: 1024px) {
  .hold .nav-box,
  .hold2 .nav-box,
  .hold {
    display: none !important;
  }

  .hold2 iframe {
    width: 100% !important;
  }

  .page-list .page,
  .paginate tbody {
    background: #2a2a2a !important;
  }

  .ctm-sub-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    min-height: 50px;
    width: 50px;
    background: none;
    border: none;
    border-left: 1px solid #2e2e2e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
  }

  /* Pure CSS chevron — down arrow */
  .ctm-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    margin-top: -3px;
    transition:
      transform 0.2s ease,
      margin-top 0.2s ease;
  }

  li.sub-open > .ctm-sub-toggle .ctm-chevron {
    transform: rotate(-135deg);
    margin-top: 3px;
  }
}

/* ── Sub-menus ── */
@media screen and (max-width: 1024px) {
  .ctm-sub-menu {
    display: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #161616 !important;
  }

  li.sub-open > .ctm-sub-menu {
    display: block !important;
  }

  .ctm-sub-menu li {
    display: block !important;
    border-bottom: 1px solid #272727 !important;
  }

  .ctm-sub-menu li a {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #bbb !important;
    padding: 13px 18px 13px 30px !important;
    text-decoration: none !important;
    background: none !important;
  }

  .ctm-sub-menu li a:active {
    background: #1e1e1e !important;
    color: #fff !important;
  }
}