/*
Theme Name:   CEP Uncon Child Theme
Theme URI:
Description:  Child theme for Conference Event Planner. Delivers comprehensive mobile responsiveness, accessible navigation, layout control, vaporwave color system, and UX improvements — all without modifying the parent theme.
Author:
Template:     conference-event-planner
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  cep-uncon-child
*/

/* =============================================================================
   VAPORWAVE BASELINE — CSS custom property defaults.
   These are overridden at runtime by the child customizer's inline CSS
   (which loads last on the child stylesheet handle).
   ============================================================================= */
:root {
  --cep-vw-cyan:   #01cdfe;
  --cep-vw-pink:   #ff71ce;
  --cep-vw-mint:   #05ffa1;
  --cep-vw-purple: #b967ff;
  
  /* Override WP generic blue/grey defaults */
  --wp-admin-theme-color:          var(--cep-vw-pink);
  --wp-admin-theme-color--rgb:     255, 113, 206;
}

/* =============================================================================
   LAYOUT SYSTEM — Body class-driven layout overrides.
   Classes injected by functions.php body_class filter, reading per-post meta
   and falling back to the Customizer global default.

   .cep-layout-single        — Full-width content, no sidebar
   .cep-layout-sidebar-right — Content left, sidebar right (parent default)
   .cep-layout-sidebar-left  — Sidebar left, content right
   ============================================================================= */

/* ── Single Column: full width content, hide sidebar ─────────────────────────*/
body.cep-layout-single #theme-sidebar {
  display: none !important;
}
body.cep-layout-single #primary .col-lg-8,
body.cep-layout-single #primary .col-md-8,
body.cep-layout-single #primary .col-lg-9,
body.cep-layout-single #primary .col-md-9,
body.cep-layout-single .col-lg-8.col-md-8,
body.cep-layout-single .col-lg-9.col-md-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* Full-width page-box gets more breathing room */
body.cep-layout-single .page-box {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Sidebar Left: swap order of content and sidebar columns ─────────────────*/
body.cep-layout-sidebar-left #primary .row {
  flex-direction: row-reverse;
}


/* =============================================================================
   ISSUE #3 FIX — Close the 768px–800px sidebar breakpoint gap.
   The parent resets the sidebar at 800px, but Bootstrap's md grid starts at
   768px. This leaves a broken 32px window where Bootstrap thinks there's no
   sidebar but the sidebar CSS still applies.
   ============================================================================= */
@media screen and (max-width: 768px) {
  .outside-area {
    padding-left: 0;
  }
  .headerbox {
    position: static;
    width: 100%;
    padding-top: 0;
    overflow: hidden;
    box-shadow: none;
  }
}

/* =============================================================================
   ISSUE #2 FIX — Ensure headerbox children lay out correctly when the
   header is full-width (768px–800px range where parent's reset now also applies).
   The col-12 overrides in site-branding.php handle desktop; this CSS ensures
   the flex row stacks cleanly in the full-width header state.
   ============================================================================= */
@media screen and (max-width: 800px) {
  .headerbox .sidebar-position {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .headerbox .sidebar-position > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Social icons in full-width header: display inline, not stacked */
  .social-media {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
}

/* =============================================================================
   ISSUE #7 FIX — Slider: ensure images are always fluid and aspect-ratio
   correct on mobile. Overrides the parent's hardcoded height: 400px at 560px.
   ============================================================================= */
@media screen and (max-width: 575px) {
  #slider img {
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
  }

  /* ISSUE #4 FIX — Show a 2-line clamp of slider text instead of hiding it.
     Gives mobile users a content preview rather than zero context. */
  #slider .inner_carousel p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    margin-bottom: 8px;
  }

  /* Ensure slider heading is readable on small screens */
  #slider .inner_carousel h1 a {
    font-size: 18px;
    line-height: 1.3;
  }

  /* Slider caption padding: tighter on mobile */
  #slider .carousel-caption {
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

/* =============================================================================
   ISSUE #9 FIX — Post images: force fluid sizing on mobile to prevent
   overflow/distortion from the customizer's fixed px width/height values.
   Uses !important to override the parent's own dynamically-injected inline CSS.
   ============================================================================= */
@media screen and (max-width: 768px) {
  .blog .box-image img,
  .box-image img,
  .box-image .wp-post-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }
  /* Image+content split columns: stack vertically on tablet */
  .box-image.col-lg-6,
  .box-content.col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =============================================================================
   ISSUE #6 FIX — Three/four-column sidebar layouts: prevent excessively
   narrow content area on tablet. The parent uses col-md-3 for sidebars in
   these layouts, leaving content with only 50% or less of the viewport.
   On tablet (768–991px), force sidebars to at most 33% so content stays usable.
   ============================================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Three-column layout: two col-md-3 sidebars flank col-md-6 content */
  #theme-sidebar[class*="col-md-3"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  /* Grid layout: col-md-9 content + col-md-3 sidebar */
  .col-lg-9.col-md-9 {
    flex: 0 0 66.666%;
    max-width: 66.666%;
  }
  .col-lg-3.col-md-3#theme-sidebar {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* =============================================================================
   MOBILE MENU UX IMPROVEMENTS
   - Minimum 44×44px touch targets (WCAG 2.5.5)
   - Smooth iOS scroll inside open sidenav
   - Visual focus indicator for keyboard/mobile users
   ============================================================================= */
.responsivetoggle,
#cep-menu-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Remove 300ms tap delay on mobile browsers */
  touch-action: manipulation;
}

#cep-menu-close {
  background: none;
  border: none;
  cursor: pointer;
}

@media screen and (max-width: 800px) {
  .sidenav {
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  /* Visible focus ring for keyboard nav within mobile menu */
  .sidenav a:focus,
  .sidenav button:focus,
  #cep-menu-close:focus,
  .responsivetoggle:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Sidenav open state: subtle slide-in animation */
  .sidenav {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    visibility: hidden;
  }
  .sidenav.open {
    transform: translateX(0);
    visibility: visible;
  }
}

/* =============================================================================
   TOP BAR — improve stacking on small screens
   ============================================================================= */
@media screen and (max-width: 575px) {
  .timebox {
    justify-content: center;
    text-align: center;
  }
  .top-header .col-sm-6 {
    text-align: center;
  }
}

/* =============================================================================
   CONTENT GRID — single column on extra-small screens
   The parent's content-grid.php uses col-lg-4 col-md-6 with no col-sm/xs,
   meaning grid items stay at 50% width (col-md-6) all the way down to ~375px.
   ============================================================================= */
@media screen and (max-width: 575px) {
  article.col-lg-4.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Related posts: same fix */
  .related-post-block .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =============================================================================
   WOOCOMMERCE — sidebar columns on tablet (same pattern as blog sidebar fix)
   ============================================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #theme-sidebar.col-md-4.col-lg-4 {
    flex: 0 0 40%;
    max-width: 40%;
  }
  .col-md-8.col-lg-8.singlepage-main,
  .col-md-8.col-lg-8 {
    flex: 0 0 60%;
    max-width: 60%;
  }
}

/* =============================================================================
   FOOTER — Child theme 3-column widgets + footer menu styles
   ============================================================================= */

.cep-footer-widgets {
  background: transparent;
  padding: 40px 0 20px;
  color: inherit;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cep-footer-widgets .widget-title {
  color: inherit;
  font-size: 18px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cep-vw-cyan, #01cdfe);
}
.cep-footer-widgets a {
  color: inherit;
  text-decoration: underline;
}
.cep-footer-widgets a:hover {
  color: var(--cep-vw-cyan, #01cdfe);
}

/* Footer navigation menu */
.cep-footer-nav {
  background: transparent;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cep-footer-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.cep-footer-menu-list li a {
  color: inherit;
  font-size: 13px;
  text-decoration: none;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s;
}
.cep-footer-menu-list li a:hover {
  color: var(--cep-vw-cyan, #01cdfe);
  opacity: 1;
  text-decoration: underline;
}

/* Footer tagline / copyright */
.cep-site-info {
  background: transparent;
  padding: 14px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cep-footer-tagline {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: inherit;
  opacity: 0.8;
}
.cep-footer-tagline a {
  color: inherit;
  text-decoration: underline;
}
.cep-footer-tagline a:hover {
  color: var(--cep-vw-cyan, #01cdfe);
}

/* Responsive: stack footer widget columns on mobile */
@media (max-width: 767px) {
  .cep-footer-widgets .col-md-4 {
    margin-bottom: 24px;
  }
  .cep-footer-menu-list {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
}