/*
這邊屬於全域css最末段設定，會覆寫先前(包含template or module)的樣式設定，修改的時候請注意。
css 來源均使用 Google AI 或 Microsoft Copilot 產生後微調。
*/

.container-header {
  background-color:#0B132B;
}

.container-header .navbar-brand {
    display: flex;
    align-items: center; /* Aligns logo and text vertically centered */
    gap: 15px; /* Adds spacing between the logo and the description */
}

.container-header .navbar-brand .site-description {
    margin: 0;
    font-size:2rem;
}

.container-header .navbar-brand .brand-logo img {
  max-width:150px;
}

/* --- 1. The Main Menu Container --- */
.nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 2. Individual Menu Items --- */
.nav-item {
    margin: 0 10px; /* Space between menu items */
}

/* --- 3. The Links --- */
.nav-link {
    color: #0055a5; /* Joomla blue */
    font-weight: 600;
    font-size: 1.1rem;
    padding: 8px 15px;
    text-decoration: none;
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* --- 4. Hover and Active States --- */
.nav-item .nav-link:hover,
.nav-item .nav-link.active {
    color: #ffffff;
    background-color: #0055a5;
    border-radius: 4px;
}

li.nav-item:not(.parent, .default) {
  padding-top: 10px;
  padding-bottom: 10px;
  margin:0;
}

/*
處理表格樣式
*/
/* Responsive scroll container for smaller screens */
.cnu-table-responsive {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Base Table Styling */
.cnu-table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--cassiopeia-color-text, #333);
    border-collapse: collapse;
}

/* Header styling */
.cnu-table th {
    padding: 0.75rem;
    vertical-align: bottom;
    border-bottom: 2px solid var(--cassiopeia-color-primary, #005082);
    background-color: var(--cassiopeia-color-primary, #005082);
    color: #ffffff;
    text-align: left;
}

.cnu-table .cnu-text-center {
    text-align: center;
}

/* Cell padding and borders */
.cnu-table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

/* Alternating row colors */
.cnu-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
    background-color: rgba(0, 80, 130, 0.05); /* 5% 透明度的品牌藍 */
}

/* Row hover effect */
.cnu-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
    background-color: rgba(0, 80, 130, 0.12); /* 12% 透明度的品牌藍 */
}

/*
處理表格與圖並列
*/
.cnu-data-block{
  display: flex;              /* Put children in a row */
  align-items: stretch;       /* Make them equal height */
  gap: 20px;                  /* Space between image and table */
}
.cnu-data-block img {
  width: 50%;               /* Fixed width for the image */
  object-fit: cover;          /* Scale image nicely */
}

.cnu-data-block table {
  flex: 1;                    /* Table takes remaining space */
  border-collapse: collapse;
  width: 100%;
}

/* Responsive behavior. value of 'max-width' is reference to original layout. */
@media(max-width:991.98px){
.cnu-data-block {
    flex-direction: column;   /* Stack vertically */
  }
  .cnu-data-block img, 
  .cnu-data-block table {
    width: 100%;              /* Full width on small screens */
  }
}


/* 
選擇 id:cnu-menu 內所有的 .nav-header，但必須不為 button 子元素。
由於子選單結構相同，因此做下列區分。
menu 第一層如果有子選單，會以 button 包含 span.nav-header，這些排除。
menu 第二層起如果有子選單，會單獨以 span.nav-header 存在。下面的 css 的結果為這些。
*/
#cnu-menu :not(button)>.nav-header {
  font-weight:bold;
  color:black;
  background-color:#ccc;
  display:block;
}

#cnu-menu ul>li:not(.parent)+li:not(.parent) {
  border-top:1px solid #000;
}

section {
  margin-bottom:3em;
}

section:last-child{
  margin-bottom:0;
}