@charset "utf-8";
/* ==========================================================================
   responsive.css — adaptive layer for 鹿秀社區大學
   Loaded last. Desktop (>=1024px) rendering is intentionally left untouched;
   every rule below is scoped to a breakpoint or is a safe global baseline.
   ========================================================================== */

/* ---------- Safe global baseline ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Menu sprites keep their intrinsic size on desktop */
.menu_top ul li img { max-width: none; }

/* Media should never force horizontal scroll */
iframe, embed, object, video { max-width: 100%; }

/* Wide data tables scroll instead of blowing out the layout */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Visible keyboard focus (the original CSS actively removed it) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid #0291d4; outline-offset: 2px; }

/* Hamburger — hidden until the mobile breakpoint */
.nav-toggle {
  display: none;
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 200;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: #333;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after  { top:  7px; left: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: none; }
}

/* ==========================================================================
   Tablet and below — containers go fluid
   ========================================================================== */
@media (max-width: 1023px) {
  #top, #main, #content, #idex, #foot, #banner_area { width: 100%; max-width: 1000px; }
  #main, #content, #idex, #foot { padding-left: 12px; padding-right: 12px; }

  /* Header stops being an absolutely-positioned 1000px canvas */
  #top { position: relative; height: auto; padding: 8px 0 0; overflow: visible; }
  .logo { position: static; float: none; padding: 6px 0 6px 12px; }
  .logo img { max-width: 210px; }

  .nav-toggle { display: block; }

  .menu_top {
    position: static;
    float: none;
    width: 100%;
    height: auto;
    padding: 0 12px 10px;
    margin: 0;
    background: none;
    text-align: left;
  }

  .language { padding: 4px 0 8px; text-align: left; }
  .language a { margin: 0 12px 0 0; }

  /* Collapsed by default; .is-open is set by js/nav.js */
  .menu_top ul {
    display: none;
    width: 100%;
    border-top: 1px solid #e3e3e3;
    padding-top: 8px;
  }
  .menu_top ul.is-open { display: flex; flex-wrap: wrap; gap: 4px; }
  .menu_top ul li { float: none; }
  .menu_top ul a { display: block; }

  /* Two-column body stacks */
  #left, #rightbox {
    float: none;
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  #rightbox { padding-bottom: 15px; }
  #left { margin-bottom: 18px; }

  /* Homepage columns stack */
  .idex_n, .idex_c, .right {
    float: none;
    width: 100%;
    height: auto;
    padding: 0 0 18px;
  }
  .idex_n table { width: 100%; margin-left: 0; }
  img.idex_p-banner { margin-left: 0; }

  /* Fixed-width content blocks */
  #news_d_tit, #down, #ctt_form { width: 100%; }
  .album_description, .contact_form, .contact_add { float: none; width: 100%; }

  /* Form controls go fluid */
  #ctt_form tr td input,
  #ctt_form tr td select,
  #ctt_form tr td textarea { width: 100%; max-width: 100%; }
  .pro_search_input { width: 60%; }
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 14px; line-height: 1.6; }

  .logo img { max-width: 175px; }

  /* Image-sprite nav becomes a 2-up grid that actually fits */
  .menu_top ul.is-open { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .menu_top ul li { width: 100%; }
  .menu_top ul li a,
  .menu_top ul li a img { display: block; width: 100%; height: auto; max-width: none; }
  .menu_top ul a:active,
  .menu_top ul a:hover { background: none; }

  /* Albums / product grids: one card per row, no fixed heights */
  .album, .albumimgfix, .new_pro, .new_pro_pic, .video01 a {
    float: none;
    width: 100%;
    height: auto;
    margin-right: 0;
    background-size: cover;
  }
  .album { margin-bottom: 16px; }

  /* Legacy layout tables reflow */
  table { max-width: 100%; }
  #ctt_form table, #ctt_form tbody, #ctt_form tr, #ctt_form td { display: block; width: 100%; }
  #ctt_form td { padding: 4px 0; }

  /* Comfortable tap targets */
  a, button, input[type="submit"], input[type="button"] { min-height: 40px; }
  .language a { display: inline-block; padding: 6px 0; min-height: 0; }

  #footer { height: auto; padding-bottom: 16px; }
  #foot { height: auto; }
  .copy { padding: 12px 8px; line-height: 1.7; }
  .design { text-align: center; margin: 0; }

  /* Back-to-top bubble stays out of the thumb zone */
  #webcall { right: 10px; bottom: 10px; }
}

@media (max-width: 420px) {
  .menu_top ul.is-open { grid-template-columns: 1fr; }
  .logo img { max-width: 150px; }
}