/* 這份檔案是 app.css（Tailwind + daisyUI）載不到時的備援。
   它原本是 unlayered 的，而 app.css 的 utility 全在 `@layer utilities` 裡——
   依 CSS 層疊規則，unlayered 樣式一律勝過任何 @layer，不論特異性。
   結果它不是「備援」而是「覆蓋」：底下的 .grid-cols-1 壓過了
   app.css 的 lg:grid-cols-4，footer 因此在任何寬度都是單欄。

   包進具名 layer 後，它只在 app.css 缺席時生效（沒有東西跟它競爭），
   app.css 正常載入時則由 utilities layer 勝出——這才是原本的設計意圖。
   layer 的先後決定優先序：mida-fallback 宣告在前，故優先序最低。 */
/* 這行必須在最前面：它宣告 layer 的先後（= 優先序），且「先宣告者優先序低」。
   本檔的 <link> 排在 app.css 之後，若不先宣告，mida-fallback 會被排到
   utilities 之後而仍然勝出——實測過，只包 @layer 但不宣告順序修不好。
   重複宣告同名 layer 是安全的：後續出現只會沿用既有次序，不會重設。 */
@layer mida-fallback, properties, theme, base, components, utilities, daisyui;

@layer mida-fallback {
  .drawer {
    display: flex;
    min-height: 100vh;
  }

  .drawer-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .drawer-toggle {
    display: none;
  }

  .drawer-side {
    display: none;
    flex: 0 0 280px;
    width: 280px;
  }

  .drawer-toggle:checked ~ .drawer-side {
    display: block;
  }

  @media (max-width: 1024px) {
    .drawer {
      flex-direction: column;
    }

    .drawer-side {
      width: 100%;
    }
  }

  .carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .dropdown {
    position: relative;
  }

  /* 定位與隱藏刻意拆成兩條規則。
     定位要涵蓋 <details>——否則備援模式下 megamenu 面板留在文件流裡，
     會撐高 header（正是本檔所屬 PR 要修的症狀）。 */
  .dropdown .dropdown-content {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5rem;
  }

  /* 隱藏則要排除 <details>，對齊 daisyUI 的同名規則：<details> 的開合由
     open 屬性自己決定。少了 `:not(details)`，帶 `dropdown` class 的
     <details open> 在備援模式下會整個面板 display:none——選單打開卻空白。 */
  .dropdown:not(details) .dropdown-content {
    display: none;
  }

  .dropdown:focus-within .dropdown-content,
  .dropdown.dropdown-open .dropdown-content {
    display: block;
  }

  .menu-horizontal {
    flex-direction: row;
  }

  .menu-horizontal > li > ul,
  .menu-horizontal > li > details > ul {
    position: absolute;
  }

  .footer {
    display: grid;
    grid-auto-flow: row;
    row-gap: 2.5rem;
    column-gap: 1rem;
  }

  @media (min-width: 768px) {
    .footer {
      grid-auto-flow: column;
    }
  }

  .grid {
    display: grid;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gap-6 {
    gap: 1.5rem;
  }

  .gap-8 {
    gap: 2rem;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .flex {
    display: flex;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .gap-1 {
    gap: 0.25rem;
  }

  .mt-2 {
    margin-top: 0.5rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }

  .justify-between {
    justify-content: space-between;
  }

  .w-full {
    width: 100%;
  }

  @media (min-width: 768px) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}