/*
 Theme Name: Kindergarten Child
 Theme URI: https://example.com/
 Description: Child theme for Kindergarten to add campus links bar.
 Author: ChatGPT & User
 Template: kindergarten
 Version: 1.0
 Text Domain: kindergarten-child
 */

/* ===============================
    全域變數（集中管理顏色/尺寸）
    =============================== */
:root {
  --wagor-blue: #3195CF;
  --wagor-blue-dark: #0F6FB9;
  --wagor-orange: #F07F00;
  --wrap-width: 1200px;
  --wrap-radius: 12px;
  --wrap-border: 2px;
  --wrap-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

/* 有背景圖的頁面仍維持白底 */
body.custom-background {
  background-color: #fff !important;
}

/* ===============================
    校區連結橫列（主選單上方）
    =============================== */
.school-links {
  background: var(--wagor-blue);
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

.school-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
}

.school-links a+a::before {
  content: "｜";
  margin-right: 8px;
  color: #fff;
}

.school-links a:hover {
  text-decoration: underline;
  color: #fff !important;
}

/* ===============================
    主選單 / 子選單配色
    =============================== */
#site-navigation,
.main-navigation {
  background: var(--wagor-blue-dark);
}

/* 主選單 hover */
.main-navigation li a:hover {
  background: var(--wagor-blue) !important;
}

/* 子選單底色 */
.main-navigation ul ul,
.main-navigation ul ul li {
  background: var(--wagor-blue) !important;
}

.main-navigation ul ul li>a {
  background: var(--wagor-blue) !important;
  color: #fff !important;
  display: block;
}

/* 子選單 hover */
.main-navigation ul ul li:hover>a,
.main-navigation ul ul li>a:hover,
.main-navigation ul ul li:focus-within>a {
  background: var(--wagor-blue-dark) !important;
  color: #fff !important;
}

/* 子選單 current */
.main-navigation ul ul li.current-menu-item>a,
.main-navigation ul ul li.current_page_item>a {
  background: var(--wagor-blue-dark) !important;
  color: #fff !important;
}

/* 主選單 current（橘條） */
#site-navigation .nav-menu>li.current-menu-item>a,
#site-navigation .nav-menu>li.current-menu-parent>a,
#site-navigation .nav-menu>li.current-menu-ancestor>a {
  background: var(--wagor-blue) !important;
  color: #fff !important;
  box-shadow: inset 0 4px 0 var(--wagor-orange) !important;
}

/* ===============================
    標題列下方藍條
    =============================== */
.nav-foot {
  width: 100%;
  height: 15px;
  background: var(--wagor-blue);
}

/* ===============================
    Header 版型：左 LOGO、右側搜尋
    =============================== */
.site-branding {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-logo-image {
  display: inline-flex;
  align-items: center;
}

.header-logo-image img {
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.header-search {
  margin-left: auto;
  text-align: right;
}

.campus-badge {
  background-color: var(--campus-slogan);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

/* ===============================
    首頁輪播固定高度
    =============================== */
.slider-wrap {
  height: 600px !important;
  max-height: 600px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.slider-wrap .slider-cycle {
  height: 600px !important;
  min-height: 600px !important;
  max-height: 600px !important;
  position: relative !important;
  overflow: hidden !important;
}

.slider-wrap .slider-cycle section.slides {
  height: 600px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block;
}

.slider-wrap .slider-cycle figure.slider-image-wrap {
  height: 600px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slider-wrap .slider-cycle img {
  width: 100% !important;
  height: 600px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

#controllers {
  position: absolute !important;
  bottom: 20px !important;
  left: 0;
  width: 100% !important;
  z-index: 999 !important;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ===============================
    最新公告 / 主題報導 / 列表排版
    =============================== */
.home-section-title {
  font-size: 22px;
  margin: 0 0 18px;
  color: #f37021;
  border-bottom: 3px solid #f37021;
  display: inline-block;
  padding-bottom: 4px;
}

.home-latest-news {
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

#project_section .home-block-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--wagor-orange);
  margin: 0 0 16px;
  border-left: 6px solid var(--wagor-orange);
  padding-left: 8px;
}

/* 2 欄排版 */
.container#project_section {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 24px;
}

.container#project_section::before,
.container#project_section::after {
  content: none !important;
}

.container#project_section .projects-main,
.container#project_section .projects-sidebar {
  float: none !important;
}

.container#project_section .projects-main {
  flex: 0 0 70%;
  max-width: 70%;
}

.container#project_section .projects-sidebar {
  flex: 0 0 30%;
  max-width: 30%;
}

/* 側邊欄可點 */
.projects-sidebar a,
.projects-sidebar a img {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 左邊文章列 */
.project-item {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.project-thumb {
  flex: 0 0 35%;
  max-width: 35%;
  display: block;
}

.project-thumb img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  display: block;
  border: 4px solid var(--wagor-blue) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.project-text {
  flex: 1 1 auto;
}

.project-title {
  font-size: 18px;
  margin: 0 0 8px;
}

.project-title a {
  text-decoration: none;
}

.project-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* 標題顏色 */
.entry-title,
.entry-title a {
  color: #090;
}

/* ===============================
    Footer 樣式
    =============================== */
.site-footer,
#colophon {
  background: var(--wagor-blue);
  border-bottom: var(--wrap-border) solid var(--wagor-blue-dark);
  border-radius: 0 0 var(--wrap-radius) var(--wrap-radius);
  overflow: hidden;
  padding: 0 !important;
  margin-top: 0 !important;
  box-shadow: var(--wrap-shadow);
}

.wagor-footer {
  background: transparent;
  color: #fff;
  padding: 18px 14px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.wagor-footer-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}

.wagor-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}

/* ===============================
    佈局、寬度、隱藏元素
    =============================== */

/* 全站最大寬度限制 */
.school-links,
#site-navigation,
.nav-foot,
.slider-wrap,
#content,
.site-footer,
#colophon {
  max-width: var(--wrap-width);
  margin-left: auto;
  margin-right: auto;
  border-left: var(--wrap-border) solid var(--wagor-blue);
  border-right: var(--wrap-border) solid var(--wagor-blue);
}

/* 文件框效果組 */
.school-links {
  border-top: var(--wrap-border) solid var(--wagor-blue);
  border-radius: var(--wrap-radius) var(--wrap-radius) 0 0;
}

#site-navigation,
.nav-foot,
#content {
  box-shadow: var(--wrap-shadow);
}

/* 隱藏搜尋/留言/側欄/Meta */
.header-search form.search-form,
.header-search .search-form,
form.search-form,
.post-navigation,
.nav-links,
.nav-previous,
.nav-next,
#comments,
.comments-area,
.comment-respond,
.logged-in-as,
.entry-meta,
.post-meta,
.single .posted-on,
.single .byline,
.single .edit-link {
  display: none !important;
}

/* 讓「文章」與「頁面」內容區佔滿 100% */
.single #primary,
.page #primary {
  width: 100% !important;
  float: none !important;
}

.single .site-content .inner,
.page .site-content .inner {
  width: 100% !important;
  max-width: var(--wrap-width) !important;
  margin: 0 auto !important;
}

.single #secondary,
.page #secondary {
  display: none !important;
}

/* =====================================================
   月份 + 週次 Tabs：文件夾分頁風格
   ===================================================== */

/* ---------- 1) 標籤列（容器） ---------- */
[id*="-tabs"] .e-n-tabs-heading,
[id*="-tabs"] .elementor-tabs-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #d6d6d6 !important;
  /* 這是整排的基準線 */
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 移除 Elementor 預設的 gap，消滅縫隙 */
.elementor-widget-n-tabs .e-n-tabs {
  gap: 0 !important;
}

/* 確保週次標籤在月份下方時也有底線 */
#daily-week-tabs .e-n-tabs-heading,
#meals-week-tabs .e-n-tabs-heading {
  margin-top: 15px !important;
}

/* ---------- 2) Tab 外觀（未選取） ---------- */
[id*="-tabs"] .e-n-tab-title,
[id*="-tabs"] .elementor-tab-title {
  background: #d4d4d4 !important;
  border: 1px solid #d6d6d6 !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  border-top: 4px solid transparent !important;
  padding: 10px 18px !important;
  margin: 0 4px 0 0 !important;
  min-width: 64px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #666 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s !important;
  top: 1px !important;
  /* 壓在容器線上面 1px */
}

/* hover */
[id*="-tabs"] .e-n-tab-title:hover,
[id*="-tabs"] .elementor-tab-title:hover {
  background: #eee !important;
}

/* ---------- 3) 彩色頂條：自動循環序列 ---------- */
[id*="-tabs"] .e-n-tab-title:nth-child(4n+1),
[id*="-tabs"] .elementor-tab-title:nth-child(4n+1) {
  border-top-color: #6ea6d6 !important;
}

[id*="-tabs"] .e-n-tab-title:nth-child(4n+2),
[id*="-tabs"] .elementor-tab-title:nth-child(4n+2) {
  border-top-color: #d87b7b !important;
}

[id*="-tabs"] .e-n-tab-title:nth-child(4n+3),
[id*="-tabs"] .elementor-tab-title:nth-child(4n+3) {
  border-top-color: #86b886 !important;
}

[id*="-tabs"] .e-n-tab-title:nth-child(4n+4),
[id*="-tabs"] .elementor-tab-title:nth-child(4n+4) {
  border-top-color: #f0b463 !important;
}

/* ---------- 4) 選取狀態：核心修正（確保蓋死灰線） ---------- */
[id*="-tabs"] .e-n-tab-title.e-active,
[id*="-tabs"] .elementor-tab-title.elementor-active,
[id*="-tabs"] .e-n-tab-title[aria-selected="true"],
[id*="-tabs"] .elementor-tab-title[aria-selected="true"] {
  background: #fff !important;
  color: #111 !important;
  font-weight: 800 !important;
  z-index: 5 !important;

  /* 往下壓死那條灰線 */
  border-bottom: 2px solid #fff !important;
}

/* ---------- 5) 內容區外框：消除接縫 ---------- */
[id*="-tabs"] .e-n-tabs-content,
[id*="-tabs"] .elementor-tabs-content-wrapper {
  border: 1px solid #d6d6d6 !important;
  border-top: none !important;
  padding: 20px !important;
  background: #fff !important;

  /* 關鍵：往上拉 1px 接住上方的線，消除縫隙 */
  margin-top: -1px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}


/* ===============================
    手機版響應式設計
    =============================== */
@media (max-width:768px) {

  /* 寬度重設 */
  .school-links,
  #site-navigation,
  .nav-foot,
  .slider-wrap,
  #content,
  .site-footer,
  #colophon {
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .school-links {
    border-top: 0;
  }

  .site-footer,
  #colophon {
    border-bottom: 0;
  }

  /* 首頁公告 */
  .container#project_section {
    flex-direction: column;
  }

  .container#project_section .projects-main,
  .container#project_section .projects-sidebar {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .project-item {
    flex-direction: column;
  }

  .project-thumb {
    max-width: 100%;
  }

  /* 標籤微微縮小 */
  .e-n-tab-title,
  .elementor-tab-title {
    padding: 7px 12px !important;
    min-width: 60px !important;
    font-size: 13px !important;
  }

  /* Footer */
  .wagor-footer-grid {
    grid-template-columns: 1fr;
  }
}