/* APEC EEE Alumni — Responsive Hot‑Fix Pack (v1)
   Drop this file in your theme and enqueue it after the main stylesheet,
   or paste it into “Additional CSS” in WordPress.
   Last updated: 2025-09-07
==================================================== */

/* 0) Baseline & safety */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; overflow-wrap: anywhere; word-wrap: break-word; }
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { width: 100%; border: 0; }

/* Preserve aspect ratio for YouTube/Vimeo embeds without changing markup */
.video-embed, .youtube, .vimeo, .ratio-16x9 {
  position: relative; width: 100%; padding-top: 56.25%;
}
.video-embed iframe, .youtube iframe, .vimeo iframe, .ratio-16x9 iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* 1) Containers & sections */
.container, .site-container, .wrap {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}
section, .section, .site-section { padding-block: clamp(20px, 4vw, 64px); }

/* 2) Typography that scales */
h1 { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.2; }
h2 { font-size: clamp(1.3rem, 2.2vw, 2.0rem); line-height: 1.25; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.3; }
p, li, label, input, select, textarea { font-size: clamp(.95rem, 1.3vw, 1rem); }

/* 3) Generic grid helpers (cards, galleries, event lists) */
.grid, .cards, .gallery-grid, .events-grid, .ads-grid, .news-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 480px) {
  .grid, .cards, .gallery-grid, .events-grid, .ads-grid, .news-grid {
    grid-template-columns: 1fr;
  }
}

/* 4) Tables overflow (financial/general reports) */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 720px; }

/* 5) Forms (registration, payments) */
.form-row, .form-grid {
  display: grid; gap: 16px; grid-template-columns: 1fr 1fr;
}
.form-row > *, .form-grid > * { min-width: 0; }
@media (max-width: 768px) {
  .form-row, .form-grid { grid-template-columns: 1fr; }
}
input, select, textarea { max-width: 100%; }
button, .btn { white-space: normal; }

/* 6) Header & Navigation (works even if theme classes differ) */
header, .site-header, nav { width: 100%; }
header .container, .site-header .container, nav .container {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
/* Primary menu */
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
nav ul li { position: relative; }
nav ul li a { display: block; padding: .6rem .8rem; text-decoration: none; }
@media (max-width: 992px) {
  /* Collapse to stacked list on mobile */
  nav ul { display: block; }
  nav ul li { border-top: 1px solid rgba(0,0,0,.07); }
  /* Make dropdowns flow in document so they don't overflow screen */
  nav ul li ul { position: static; display: none; padding-left: .75rem; }
  nav ul li.is-open > ul { display: block; }
  /* Optional: hide topbar on small */
  .topbar, .top-bar, .header-top { display: none; }
}

/* 6b) Hamburger toggle — pair with .nav-toggle button and .nav-collapsible wrapper */
.nav-toggle { display: none; background: none; border: 1px solid rgba(0,0,0,.15); padding: .5rem .75rem; border-radius: 8px; }
@media (max-width: 992px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; }
  .nav-collapsible { display: none; width: 100%; }
  .nav-collapsible.is-open { display: block; }
}

/* 7) Hero/banners that contain large images */
.hero, .banner, .hero-image, .banner-image { display: grid; align-items: center; }
.hero img, .banner img { width: 100%; height: auto; object-fit: cover; border-radius: 12px; }
@media (max-width: 768px) {
  .hero .content, .banner .content { text-align: center; }
}

/* 8) Cards (advertisements, events, testimonials) */
.card, .event, .advertisement, .testimonial {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.card img, .event img, .advertisement img, .testimonial img { border-radius: 8px; }

/* 9) Mini-cart / shopping bag overlay (if enabled in theme) */
@media (max-width: 576px) {
  .mini-cart, #cartSidebar, .shopping-bag, .offcanvas-cart {
    position: fixed; right: 8px; left: 8px; bottom: 8px; max-height: 70vh;
    background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 14px;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15); transform: translateY(110%);
    transition: transform .25s ease;
  }
  .mini-cart.open, #cartSidebar.open, .shopping-bag.open, .offcanvas-cart.open {
    transform: translateY(0);
  }
}

/* 10) Footer columns */
footer .columns, .footer-columns, .footer-widgets {
  display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 11) Utilities */
.hide-mobile { display: block; }
.show-mobile { display: none; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}
/* Prevent layout shift from long unbroken strings */
a, p, li, td, th { word-break: break-word; }

/* 12) Quick spacing fixes for stacked sections */
.stack > * + * { margin-top: clamp(10px, 2vw, 20px); }

/* 13) Optional: make big icon tiles wrap nicely */
.icon-tiles, .quick-actions {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* End of hot‑fix pack */