/**
 * Cassiopeia HTSprout - 非首頁的頁面專屬樣式
 *
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_htsprout
 * @copyright   Copyright (C) 2026 HTSprout. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ============================================
   共通 — 手機/平板版 main-area 全寬（< 992px）
   ============================================ */

@media (max-width: 991.98px) {
  .container-main-area {
    display: block;
  }
}

/* ============================================
   聯絡我們頁面 — 手機版卡片佈局（< 768px）
   ============================================ */

/* 卡片容器 */
body.page-contact-us .com-content-article {
  position: relative;
  z-index: 3;
  background: var(--htsprout-text-50);
  box-shadow: 0px -6px 34px rgba(9, 121, 122, 0.05);
  padding: 46px 40px;
  margin: 0 auto 128px;
}

/* Logo 段落：下方 28px 到文字 */
body.page-contact-us .com-content-article__body > p {
  margin: 0 0 28px;
}

/* 第二組 logo：上方 40px + 分隔線 + 下方 40px 到 logo */
body.page-contact-us .com-content-article__body > p:nth-of-type(2) {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--htsprout-text-200);
}

/* 文字樣式 */
body.page-contact-us .com-content-article__body > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--htsprout-fs-18);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-800);
}

body.page-contact-us .com-content-article__body > ul > li {
  margin: 0;
}

/* ============================================
   聯絡我們頁面 — 手機版 page-header 佈局
   ============================================ */

/* 容器 z-index：讓插圖可覆蓋下方卡片 */
body.page-contact-us .container-page-header {
  position: relative;
  z-index: 1;
}

/* 標題↔插圖 gap 歸零（base gap 為 24px） */
body.page-contact-us .page-header-columns {
  gap: 0;
  padding: 20px 20px 0;
}

/* 插圖容器：負邊距產生 53px 溢出到卡片上方 */
body.page-contact-us .page-header__right {
  position: relative;
  z-index: 2;
  margin-bottom: -53px;
}

/* 插圖尺寸與水平定位（偏右對齊） */
body.page-contact-us .page-header__right .item-image {
  width: 328px;
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

/* ============================================
   聯絡我們頁面 — 平板/桌面版卡片佈局
   ============================================ */

@media (min-width: 768px) {
  /* page-header 寬度對齊卡片 */
  body.page-contact-us .page-header-columns {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 99px;
    position: relative;
  }

  body.page-contact-us .page-header-columns::before {
    content: '';
    position: absolute;
    top: 0;
    right: 97px;
    width: 310px;
    height: 244px;
    aspect-ratio: 155/122;
    background: url('/images/template/banner-deco-contact-us.png') no-repeat center center / contain;
    z-index: 1;
  }

  body.page-contact-us .page-header-columns .page-header__left {
    position: relative;
    z-index: 2;
  }

  body.page-contact-us .page-header-columns .page-header__right {
    position: absolute;
    top: 26px;
    right: 77px;
    z-index: 2;
  }

  body.page-contact-us .page-header__right .item-image {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* 卡片容器：覆寫手機版 padding，新增 max-width */
  body.page-contact-us .com-content-article {
    padding: 46px 66px;
    max-width: 1100px;
  }

  /* Grid 佈局：2 欄（logo 100px + 文字 1fr），3 列（第 1 組 / 分隔線 / 第 2 組） */
  body.page-contact-us .com-content-article__body {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    row-gap: 40px;
    align-items: center;
    max-width: 947px;
  }

  /* 第一組：logo + 文字 */
  body.page-contact-us .com-content-article__body > p:first-child {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
  }
  body.page-contact-us .com-content-article__body > ul:first-of-type {
    grid-row: 1;
    grid-column: 2;
  }

  /* 分隔線（偽元素） */
  body.page-contact-us .com-content-article__body::before {
    content: '';
    grid-row: 2;
    grid-column: 1 / -1;
    border-top: 1px solid var(--htsprout-text-200);
  }

  /* 第二組：logo + 文字（含 reset 手機版分隔線） */
  body.page-contact-us .com-content-article__body > p:nth-of-type(2) {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
    border-top: none;
    padding-top: 0;
  }
  body.page-contact-us .com-content-article__body > ul:nth-of-type(2) {
    grid-row: 3;
    grid-column: 2;
  }
}

/* ============================================
   聯絡我們頁面 — 平板版 page-header 佈局（768px–991px）
   ============================================ */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* 左內邊距：讓 breadcrumb 從 60px 起始 */
  body.page-contact-us .page-header-columns {
    padding: 36px 60px 156px;
  }

  /* 左欄：限制寬度 + 調整 gap（breadcrumb ↔ h1 間距 31px） */
  body.page-contact-us .page-header-columns .page-header__left {
    max-width: 407px;
    gap: 31px;
  }

  /* 插圖重新定位：與標題頂部齊平（top=83px）、右側 58px */
  body.page-contact-us .page-header-columns .page-header__right {
    top: 83px;
    right: 58px;
    width: 448px;
    height: 313px;
    overflow: hidden;
  }

  /* 隱藏桌面版裝飾背景（Figma 平板版設計中無此元素） */
  body.page-contact-us .page-header-columns::before {
    display: none;
  }
}

/* ============================================
   活動頁面（列表/紀錄）— 手機版 page-header 佈局
   ============================================ */

body.page-event-list .page-header-columns,
body.page-event-records .page-header-columns {
  gap: 36px;
  padding: 20px 20px 0;
}

body.page-event-list .page-header__left,
body.page-event-records .page-header__left {
  gap: 40px;
}

body.page-event-list .page-header__left .page-header h1,
body.page-event-records .page-header__left .page-header h1 {
  text-align: center;
}

body.page-event-list .page-header__right,
body.page-event-records .page-header__right {
  margin: 0 -20px;
}

/* ============================================
   活動頁面（列表/紀錄）— 平板版 page-header 佈局（768px–991px）
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 定位基準 + 底部留白給插圖溢出空間 */
  body.page-event-list .page-header-columns.grid-child,
  body.page-event-records .page-header-columns.grid-child {
    position: relative;
    padding: 36px 60px 173px;
  }

  /* breadcrumb ↔ title 間距 31px */
  body.page-event-list .page-header__left,
  body.page-event-records .page-header__left {
    gap: 31px;
  }

  /* 標題左對齊（覆蓋手機版 center） */
  body.page-event-list .page-header__left .page-header h1,
  body.page-event-records .page-header__left .page-header h1 {
    text-align: left;
  }

  /* 插圖：絕對定位右上 */
  body.page-event-list .page-header__right,
  body.page-event-records .page-header__right {
    position: absolute;
    top: -16px;
    right: -50px;
    width: 480px;
    overflow: visible;
    margin: 0;
  }
}

/* ============================================
   活動頁面（列表/紀錄）— 電腦版 page-header 佈局（≥992px）
   ============================================ */
@media (min-width: 992px) {
  /* 容器：移除手機版 padding */
  body.page-event-list .container-page-header,
  body.page-event-records .container-page-header {
    padding: 0;
  }

  /* 欄位容器：定位基準 + padding 控制內容定位與高度 */
  body.page-event-list .page-header-columns,
  body.page-event-records .page-header-columns {
    position: relative;
    max-width: 1144px;
    padding: 48px 20px 161px;
  }

  /* 左欄：gap 31px + 限制寬度 */
  body.page-event-list .page-header__left,
  body.page-event-records .page-header__left {
    gap: 31px;
    max-width: 407px;
  }

  /* 標題：左對齊（覆蓋手機版 center） */
  body.page-event-list .page-header__left .page-header h1,
  body.page-event-records .page-header__left .page-header h1 {
    text-align: left;
  }

  /* 插圖：絕對定位至右邊緣 */
  body.page-event-list .page-header__right,
  body.page-event-records .page-header__right {
    position: absolute;
    top: -28px;
    right: min(-164px, -14.67%);
    width: min(782px, 62.79%);
    overflow: visible;
    margin: 0;
  }
}

@media (min-width: 1440px) {
  body.page-event-list .page-header-columns,
  body.page-event-records .page-header-columns {
    max-width: 1312px;
  }

  body.page-event-list .page-header__right,
  body.page-event-records .page-header__right {
    right: -48px;
  }
}

/* ============================================
   活動紀錄頁面 — 手機版 container-main-area 佈局
   ============================================ */

/* --- 卡片網格間距 --- */
body.page-event-records .news-layout-grid {
  gap: 28px;
  margin: 0 0 28px;
  padding: 0 20px;
}

/* --- 卡片容器 --- */
body.page-event-records .news-item {
  padding: 20px var(--htsprout-spacing-sm);
  border: none;
  border-radius: 0;
  box-shadow: 0 20px 20px rgba(62, 112, 115, 0.1);
}

body.page-event-records .news-item:hover {
  border-color: transparent;
}

/* --- 卡片內容排版 --- */
body.page-event-records .news-item__content {
  gap: 20px;
  justify-content: flex-start;
}

/* --- 圖片 --- */
body.page-event-records .news-item__image {
  margin-bottom: 0;
}

body.page-event-records .news-layout-grid .news-item__image a img {
  height: 171px;
}

/* --- Meta 列（標籤 + 日期） --- */
body.page-event-records .news-item__meta {
  margin-bottom: 0;
}

/* --- 日期文字 --- */
body.page-event-records .news-item__date--text {
  color: var(--htsprout-text-600);
  line-height: var(--htsprout-lh-150);
}

/* --- 標籤 --- */
body.page-event-records .news-item__tag {
  background: var(--htsprout-blue-100);
  color: var(--htsprout-text-800);
  font-size: var(--htsprout-fs-14);
  font-weight: 400;
  line-height: var(--htsprout-lh-150);
  padding: 0 9px;
  border-radius: 90px;
}

body.page-event-records a.news-item__tag:hover {
  color: var(--htsprout-text-800);
  background: var(--htsprout-blue-200);
}

/* --- 標題 --- */
body.page-event-records .news-item__title {
  margin-bottom: 0;
  font-size: var(--htsprout-fs-20);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
}

body.page-event-records .news-item__title a {
  color: var(--htsprout-green-500);
}

body.page-event-records .news-item__title a:hover {
  color: var(--htsprout-green-700);
}

/* --- 列表區塊底部間距 --- */
body.page-event-records .com-content-category-news {
  margin-bottom: 128px;
  max-width: 1020px;;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.page-event-records .news-layout-grid {
    padding: 0 40px;
  }

  body.page-event-records .eb-category-filter,
  body.page-event-records .subcategory-filter {
    padding: 5px 40px 0;
  }
}

/* ============================================
   常見問題頁面 — 手機版 page-header 佈局
   ============================================ */

body.page-faq-list .page-header-columns{
  gap: 80px;
  padding: 20px 20px 0;
}

body.page-faq-list .page-header__left {
  gap: 40px;
}

body.page-faq-list .page-header__left .page-header h1 {
  text-align: center;
}

body.page-faq-list .page-header__right {
  margin: 0 -20px;
}

/* ============================================
   分類檢視頁面（共通）— 手機/平板版 main-area 波浪裝飾
   ============================================ */

body.page-faq-list .com-content-category-news {
  margin: 0 auto 128px;
}

body.view-category .container-main-area {
  position: relative;
  background: var(--htsprout-text-50);
}

body.view-category .container-main-area:before {
  position: absolute;
  z-index: 1;
  content: "";
  width: 100%;
  height: 137px;
  background: url(/images/template/container-top-b-shape-tablet.svg) no-repeat;
  background-size: 1440px auto;
  background-position: 50% 0%;
  transform: translateY(-100%);
}

body.view-category .container-component {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.view-category .container-main-area:before {
    background-position: 32% 0%;
  }
}

/* ============================================
   常見問題頁面 — 平板版 page-header 佈局（768px–991px）
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 定位基準 + 底部留白給插圖溢出空間 */
  body.page-faq-list .page-header-columns.grid-child {
    position: relative;
    padding: 20px 60px 173px;
  }

  /* breadcrumb ↔ title 間距 31px（Figma gap-[31px]） */
  body.page-faq-list .page-header__left {
    gap: 31px;
  }

  /* 標題左對齊（覆蓋手機版 center） */
  body.page-faq-list .page-header__left .page-header h1 {
    text-align: left;
  }

  /* 插圖：絕對定位右上（參照 contact-us 同模式） */
  body.page-faq-list .page-header__right {
    position: absolute;
    top: 20px     ;
    right: -28px;
    width: 480px;
    overflow: visible;
    margin: 0;
  }
}

/* ============================================
   常見問題頁面 — 電腦版 page-header 佈局（≥992px）
   ============================================ */
@media (min-width: 992px) {
  /* 容器：允許插圖溢出、移除手機版 padding */
  body.page-faq-list .container-page-header {
    /*overflow: visible;*/
    padding: 0;
  }

  /* 欄位容器：定位基準 + 左側 padding 對齊內容區 + 頂部 padding 給插圖偏移 */
  body.page-faq-list .page-header-columns {
    position: relative;
    max-width: 1118px;
    padding: 48px 20px 161px;
  }

  /* 左欄：gap 31px + 限制寬度 */
  body.page-faq-list .page-header__left {
    gap: 31px;
    max-width: 407px;
  }

  /* 標題：左對齊（覆蓋手機版 center） */
  body.page-faq-list .page-header__left .page-header h1 {
    text-align: left;
  }

  /* 插圖：絕對定位至右邊緣 */
  body.page-faq-list .page-header__right {
    position: absolute;
    top: 0;
    /*right: min(-258px, -23.07%);*/
    right: min(-164px, -14.67%);
    width: min(782px, 62.79%);
    overflow: visible;
  }
}

@media (min-width: 1440px) {
  body.page-faq-list .page-header-columns {
    max-width: 1272px;
  }

  body.page-faq-list .page-header__right {
    right: -81px;
  }
}

/* ============================================
   下載專區頁面 — 手機版 page-header 佈局
   ============================================ */

body.page-downloads .page-header-columns {
  gap: 76px;
  padding: 20px 20px 0;
}

body.page-downloads .page-header__left {
  gap: 40px;
}

body.page-downloads .page-header__left .page-header h1 {
  text-align: center;
}

body.page-downloads .page-header__right .item-image {
  width: 460px;
}

/* 波浪裝飾高度修正 */
body.page-downloads .container-main-area:before {
  height: 117px;
}

/* ============================================
   下載專區頁面 — 平板版 page-header 佈局（768px–991px）
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 定位基準 + padding 控制內容定位與高度 */
  body.page-downloads .page-header-columns.grid-child {
    position: relative;
    padding: 36px 60px 213px;
  }

  /* breadcrumb ↔ title 間距 31px */
  body.page-downloads .page-header__left {
    gap: 31px;
  }

  /* 標題左對齊（覆蓋手機版 center） */
  body.page-downloads .page-header__left .page-header h1 {
    text-align: left;
  }

  /* 插圖：絕對定位右上，600px 寬，溢出 140px 由 overflow:hidden 裁切 */
  body.page-downloads .page-header__right {
    position: absolute;
    top: 1px;
    right: -140px;
    width: 600px;
    overflow: visible;
    margin: 0;
  }

  /* 覆蓋手機版固定寬度 460px，改為填滿絕對定位容器 */
  body.page-downloads .page-header__right .item-image {
    width: 100%;
  }

  /* 波浪裝飾高度修正 */
  body.page-downloads .container-main-area:before {
    height: 166px;
  }
}

/* ============================================
   下載專區頁面 — 電腦版 page-header 佈局（≥992px）
   ============================================ */
@media (min-width: 992px) {
  /* 容器：移除手機版 padding */
  body.page-downloads .container-page-header {
    padding: 0;
  }

  /* 欄位容器：定位基準 + 置中對齊內容區 */
  body.page-downloads .page-header-columns {
    position: relative;
    max-width: 1104px;
    padding: 48px 0 161px;
  }

  /* 左欄：gap 31px */
  body.page-downloads .page-header__left {
    gap: 31px;
  }

  /* 標題：左對齊（覆蓋手機版 center） */
  body.page-downloads .page-header__left .page-header h1 {
    text-align: left;
  }

  /* 插圖：絕對定位右上，702px 寬，齊平 1440px 視口右緣 */
  body.page-downloads .page-header__right {
    position: absolute;
    top: -20px;
    right: -168px;
    width: 702px;
    overflow: visible;
    margin: 0;
  }

  /* 圖片填滿容器 */
  body.page-downloads .page-header__right .item-image {
    width: 1002px;
  }

  /* 波浪裝飾高度修正 */
  body.page-downloads .container-main-area:before {
    height: 127px;
  }
}

/* ============================================
   分類檢視頁面（共通）— 電腦版 main-area 波浪裝飾
   ============================================ */
@media (min-width: 992px) {
  body.page-faq-list .com-content-category-news {
    max-width: 1118px;
  }

  body.view-category .container-main-area:before {
    background: url(/images/template/container-top-b-shape.svg) no-repeat;
    background-size: cover;
    height: 127px;
  }
}

/* ============================================
   我要提問頁面 — 手機版 page-header 佈局
   ============================================ */

/* 欄位容器：水平 20px padding 給麵包屑 */
body.page-asking-question .page-header-columns {
  padding: 20px 20px 0;
  gap: 0;
}

/* 左欄：breadcrumb ↔ 白色卡片間距 40px */
body.page-asking-question .page-header__left {
  gap: 40px;
}

/* 白色卡片起始：.page-header 包裹 h1 */
body.page-asking-question .page-header__left .page-header {
  background: var(--htsprout-text-50);
  border-radius: var(--htsprout-radius-xl) var(--htsprout-radius-xl) 0 0;
  padding: 40px 40px 0;
  margin: 0 -20px;
}

/* 標題：置中 */
body.page-asking-question .page-header__left .page-header h1 {
  text-align: center;
}

/* ============================================
   我要提問頁面 — 手機版 main-area 佈局
   ============================================ */

/* 白色卡片延續 + 底部圓角 */
body.page-asking-question .container-main-area {
  position: relative;
  border-radius: 0 0 var(--htsprout-radius-xl) var(--htsprout-radius-xl);
  margin-bottom: 240px;
}

/* 內容容器：水平 40px + 頂部 51px（h1↔表單間距）+ 底部 100px */
body.page-asking-question .container-component {
  position: relative;
}
body.page-asking-question .container-component #main-content{
  position: relative;
  z-index: 2;
  padding: 51px 40px 100px;
  background: var(--htsprout-text-50);
}

/* 裝飾插圖：卡片底部延伸 */
body.page-asking-question .container-component::after {
  content: '';
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(calc(-690px / 2 - 66.5%));
  width: 326px;
  height: 298px;
  background: url('/images/template/banner-deco-asking-question.png') no-repeat;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}

/* 裝飾插圖（文章內 <img>）：absolute 定位於卡片底部 */
body.page-asking-question .com-content-article__body > div:last-child {
  position: static;
}

body.page-asking-question .com-content-article__body > div:last-child img {
  position: absolute;
  bottom: -240px;
  right: -35px;
  width: 326px;
  height: 298px;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

body.page-asking-question .com-content-article__body {
  overflow: hidden;
}

/* ============================================
   我要提問頁面 — 平板版以上：名字/姓氏並排（≥768px）
   ============================================ */

@media (min-width: 768px) {

  /* --- 表單：名字/姓氏並排 --- */

  body.page-asking-question .formContainer .col-md-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  /* 預設所有欄位佔滿兩欄 */
  body.page-asking-question .formContainer .col-md-12 > .mb-3 {
    grid-column: 1 / -1;
  }

  /* 名字、姓氏各佔一欄 */
  body.page-asking-question .formContainer .col-md-12 > .mb-3.rsform-block-firstname {
    grid-column: 1;
  }
  body.page-asking-question .formContainer .col-md-12 > .mb-3.rsform-block-lastname {
    grid-column: 2;
  }
}

/* ============================================
   我要提問頁面 — 平板版佈局（768px–991px）
   ============================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

  /* --- page-header 區域 --- */

  /* 欄位容器：移除手機版水平 padding，改為頂部 36px */
  body.page-asking-question .page-header-columns {
    padding: 36px 0 0;
  }

  /* 麵包屑：60px 左內距（Figma left:60） */
  body.page-asking-question .page-header__left > nav {
    padding-left: 60px;
  }

  /* 白色卡片頂部：690px 置中，覆寫手機版的 margin: 0 -20px */
  body.page-asking-question .page-header__left .page-header {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
  }

  /* --- main-area 區域 --- */

  /* 白色卡片底部：裝飾圖外溢空間（max-width 改設於 #main-content） */
  body.page-asking-question .container-main-area {
    margin-bottom: 265px;
  }

  /* 白色卡片實際約束 690px 置中 */
  body.page-asking-question .container-component #main-content {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
  }

  /* --- 裝飾插圖 --- */

  /* <img> 插圖：平板版尺寸與定位 */
  body.page-asking-question .com-content-article__body > div:last-child img {
    bottom: -265px;
    right: -72px;
    width: 349px;
    height: 319px;
  }
}

/* ============================================
   我要提問頁面 — 電腦版佈局（≥992px）
   ============================================ */

@media (min-width: 992px) {

  /* --- page-header 區域 --- */

  /* 欄位容器：對齊麵包屑至 1118px 置中容器，padding 參考 FAQ list 電腦版 */
  body.page-asking-question .page-header-columns {
    max-width: 1118px;
    padding: 48px 20px 0;
  }

  /* 左欄：breadcrumb ↔ 白色卡片間距 50px（Figma 實測） */
  body.page-asking-question .page-header__left {
    gap: 50px;
  }

  /* 白色卡片頂部：690px 置中，覆寫手機版 margin: 0 -20px */
  body.page-asking-question .page-header__left .page-header {
    max-width: 690px;
    margin: 0 auto;
    width: 100%;
  }

  /* --- main-area 區域 --- */

  /* 白色卡片底部：底部留白給裝飾圖（max-width 改設於 #main-content） */
  body.page-asking-question .container-main-area {
    border-radius: 0;
    margin-bottom: 184px;
  }

  /* 白色卡片實際約束 690px 置中 + 下方圓角 */
  body.page-asking-question .container-component #main-content {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    border-radius: 0 0 var(--htsprout-radius-xl) var(--htsprout-radius-xl);
  }

  /* 移除 overflow:hidden，讓裝飾圖可溢出卡片邊界 */
  body.page-asking-question .com-content-article__body {
    overflow: visible;
  }

  /* --- 裝飾插圖 --- */

  /* 左側裝飾（::after 偽元素）：調整至卡片左側外部（Figma left:108px - 卡片起始約 375px ≈ -267px） */
  body.page-asking-question .container-component::after {
    width: 313px;
    height: 314px;
  }

  /* 右側裝飾（img）：定位至卡片右下方（Figma 349×319px，右溢 257px） */
  body.page-asking-question .com-content-article__body > div:last-child img {
    bottom: -184px;
    right: -257px;
    width: 349px;
    height: 319px;
  }
}

/* ============================================
   我要提問頁面 — 手機版表單樣式
   ============================================ */

/* 表單區塊間距 */
body.page-asking-question .formContainer .mb-3:not(:last-child) {
  margin-bottom: 20px !important;
}

body.page-asking-question .formContainer .mb-3:last-child {
  margin-bottom: 0 !important;
}

/* 表單 label */
body.page-asking-question .formContainer .formControlLabel {
  display: block;
  margin-bottom: var(--htsprout-spacing-xs);
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-800);
}

/* 必填標記 */
body.page-asking-question .formContainer .formRequired {
  color: inherit;
  font-weight: inherit;
}

/* 表單 input / select / textarea */
body.page-asking-question .formContainer .form-control,
body.page-asking-question .formContainer .form-select {
  border: 1px solid var(--htsprout-green-200);
  border-radius: var(--htsprout-radius-lg);
  padding: 12px;
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-1000);
}

body.page-asking-question .formContainer .form-control::placeholder {
  color: var(--htsprout-text-500);
}

/* textarea 高度 */
body.page-asking-question .formContainer textarea.form-control {
  min-height: 160px;
  resize: vertical;
}

/* 隱藏驗證訊息（初始狀態） */
body.page-asking-question .formContainer .formNoError {
  display: none;
}

/* 送出按鈕 */
body.page-asking-question .formContainer .rsform-submit-button {
  display: block;
  margin: 4px auto 0;
  width: 140px;
  padding: 12px 16px;
  background-color: var(--htsprout-blue-800);
  border: none;
  border-radius: var(--htsprout-radius-btn);
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-50);
}