/* ==========================================================
   Cassiopeia_extended — user.css
   v5 (แก้แกลเลอรีไม่ให้ถูกจำกัดความกว้าง + Read more ตัวเล็กลง) — วางที่: /media/templates/site/cassiopeia_extended/css/user.css
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Noto+Serif+Thai:wght@500;600&display=swap");

:root {
  --ink: #0f2447;
  --ink-soft: #3b4a63;
  --paper: #f5f8fc;
  --surface: #ffffff;
  --sea: #1f5fae;
  --sea-dark: #164a8c;
  --amber: #e0a100;
  --line: #d9e2ee;
  --sky: #e6f0fb;
  --sky-strong: #5aa2e6;

  --radius-s: 6px;
  --radius-l: 18px;
  --shadow-lift: 0 14px 34px -18px rgba(15, 36, 71, 0.35);

  /* ผูกกับตัวแปรของ Cassiopeia */
  --cassiopeia-color-primary: var(--ink);
  --cassiopeia-color-hover: var(--sea-dark);
  --cassiopeia-color-link: var(--sea);
  --template-bg-light: var(--paper);
  --template-text-dark: var(--ink);
  --link-color: var(--sea);
  --link-hover-color: var(--sea-dark);
  --bs-link-color: var(--sea);
  --bs-link-color-rgb: 31, 95, 174;
  --bs-link-hover-color: var(--sea-dark);
  --bs-link-hover-color-rgb: 22, 74, 140;
  --template-link-color: var(--sea);
  --template-link-hover-color: var(--sea-dark);
  --body-font-family: "Figtree", "IBM Plex Sans Thai", system-ui, sans-serif;
  --headings-font-family: "Newsreader", "Noto Serif Thai", Georgia, serif;
}

/* ---------- พื้นฐาน ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font-family);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headings-font-family);
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: 0;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

a {
  color: var(--sea);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover, a:focus { color: var(--sea-dark); }

/* หัวข้อบทความ/ทรัพย์ในรายการ: กรมท่า ไม่ขีดเส้นใต้ ชี้แล้วเป็นน้ำเงิน */
.page-header h1 a, .page-header h2 a,
.item-title a, .blog-item h2 a, .blog-item h3 a {
  color: var(--ink);
  text-decoration: none;
}
.page-header h1 a:hover, .page-header h2 a:hover,
.item-title a:hover, .blog-item h2 a:hover, .blog-item h3 a:hover {
  color: var(--sea);
}

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* ---------- ส่วนหัวและเมนู ---------- */
.container-header {
  background: var(--ink);
  background-image: none;
  box-shadow: none;
  border-bottom: 4px solid var(--amber);
}
.container-header .navbar-brand,
.container-header .navbar-brand a {
  font-family: var(--headings-font-family);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
}
.container-header .container-nav { padding-block: 0.25rem; }

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: #e8eef4;
  font-weight: 500;
  padding: 0.9rem 1.1rem;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a {
  color: #fff;
  border-bottom-color: var(--amber);
}
.container-header .mod-menu .mod-menu__sub,
.container-header .metismenu.mod-menu .mm-collapse {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-lift);
}

/* ---------- แบนเนอร์ / ตำแหน่ง banner ---------- */
.container-banner .banner-overlay,
.container-banner {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: #fff;
}
.container-banner h1, .container-banner h2 { color: #fff; }

/* ---------- เนื้อหาหลัก ---------- */
.container-component {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  margin-block: 2rem;
}
.container-component .page-header h1,
.container-component .page-header h2 {
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--line);
}
/* หน้าบทความ: หัวข้อและเนื้อหากว้างเต็มกรอบ, รูปภาพเต็มความกว้าง */
.item-page { max-width: none; }
.com-content-article__body { max-width: none; }
.com-content-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
/* จำกัดความกว้างบรรทัดเฉพาะย่อหน้าและรายการจุดเด่นระดับบนสุดของบทความ (ไม่ใช่รายการรูปในแกลเลอรี) */
.com-content-article__body > p,
.com-content-article__body > ul { max-width: 80ch; }

/* ---------- โมดูลด้านข้าง ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
}
.card-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--headings-font-family);
  font-weight: 600;
}

/* ---------- ปุ่มและฟอร์ม ---------- */
.btn-primary, .btn-success, .btn-outline-success {
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 500;
  padding: 0.6rem 1.4rem;
  transition: background 0.2s, border-color 0.2s;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
  background: var(--sea-dark);
  border-color: var(--sea-dark);
  color: #fff;
}
.form-control, .form-select {
  border: 1px solid #c3ccd6;
  border-radius: var(--radius-s);
  padding: 0.65rem 0.9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(31, 95, 174, 0.28);
}

/* ---------- การแบ่งหน้า ---------- */
.pagination .page-link {
  color: var(--sea);
  border-color: var(--line);
  border-radius: var(--radius-s);
  margin-inline: 2px;
}
.pagination .active > .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- ส่วนท้าย ---------- */
.container-footer {
  background: var(--ink);
  color: #c9d4df;
  border-top: 4px solid var(--amber);
  margin-top: 2rem;
  padding: 1.1rem var(--page-gutter) !important;
  font-size: 0.9rem;
  line-height: 1.6;
}
.container-footer .grid-child { padding: 0; margin: 0; }
.container-footer a { color: #fff; }
.container-footer h3 { color: #fff; font-size: 1.15rem; }

/* ---------- ปุ่ม Contact ในเมนู (Menu Class = menu-cta) ---------- */
.container-header .mod-menu > li.menu-cta > a {
  background: var(--amber);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius-s);
  margin-inline-start: 0.75rem;
  border-bottom-color: transparent;
}
.container-header .mod-menu > li.menu-cta > a:hover {
  background: #fff;
  color: var(--ink);
}

/* ---------- หน้าแรก: hero + ค้นหา ---------- */
.home-hero {
  padding: clamp(2.5rem, 7vw, 5rem) 0;
  max-width: 46rem;
}
.container-banner .home-hero h1 { color: #fff; margin-bottom: 0.75rem; }
.home-hero__lead { font-size: 1.2rem; color: #d7e0ea; max-width: 38rem; }
.home-hero__browse { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem; }
.home-hero .btn-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-s);
}
.home-hero .btn-light:hover { background: #fff; color: var(--ink); }
.home-hero__search { display: flex; gap: 0.5rem; max-width: 36rem; }
.home-hero__search .form-control { flex: 1; min-width: 0; }
.home-hero__areas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 1.25rem 0 0;
}
.home-hero__areas a {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
}
.home-hero__areas a:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }

/* ---------- ทรัพย์เด่น (Module Class = featured-listings) ---------- */
.featured-listings ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.featured-listings li, .featured-listings .newsflash-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  padding: 0 0 1rem;
}
.featured-listings img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.featured-listings h3, .featured-listings a { font-family: var(--headings-font-family); }
.featured-listings li > *:not(img):not(a:has(img)) { padding-inline: 1rem; }

/* ---------- ท้ายเว็บ และปุ่ม Inquire ---------- */
.container-footer ul { list-style: none; padding: 0; margin: 0; }
.footer-company { margin: 0 0 0.4rem; }
.footer-company strong { color: #fff; font-weight: 600; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
.footer-legal {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.inquire { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- ห้ามใช้สีเขียว: เขียนทับสีสถานะ "success" ของ Bootstrap/Joomla เป็นฟ้า ---------- */
:root {
  --bs-success: var(--sea);
  --bs-success-rgb: 31, 95, 174;
  --bs-success-text-emphasis: var(--ink);
  --bs-success-bg-subtle: var(--sky);
  --bs-success-border-subtle: #b9d3f0;
  --bs-form-valid-color: var(--sea);
  --bs-form-valid-border-color: var(--sea);
  --template-success: var(--sea);
}
.alert-success, .alert.alert-success {
  background: var(--sky);
  border-color: #b9d3f0;
  color: var(--ink);
}
.text-success { color: var(--sea) !important; }
.bg-success, .badge.bg-success { background-color: var(--sea) !important; color: #fff; }
.border-success { border-color: var(--sea) !important; }
.form-control.valid, .form-control.is-valid, .was-validated .form-control:valid,
.form-select.valid, .form-select.is-valid, .was-validated .form-select:valid {
  border-color: var(--sea);
  background-image: none;
}
.valid-feedback { color: var(--sea); }
.btn-outline-success { background: transparent; color: var(--sea); }
.btn-outline-success:hover { background: var(--sea); color: #fff; }

/* ---------- หัวเว็บแถวเดียว: โลโก้ซ้าย เมนูขวา ---------- */
:root { --page-gutter: max(1rem, calc((100% - 1200px) / 2)); }

.container-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 !important;
  min-height: 0;
  border-bottom-width: 3px;
}
/* ติดบนเมื่อเลื่อน (เฉพาะหน้าที่ไม่มี banner อยู่ในหัวเว็บ) */
.container-header:not(:has(.container-banner)) {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.container-header .grid-child:has(.navbar-brand) {
  order: 1;
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0.5rem 1rem 0.5rem var(--page-gutter) !important;
}
.container-header .container-nav {
  order: 2;
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 1rem !important;
}
.container-header::after {
  content: "";
  order: 3;
  flex: 1 1 0;
  padding-right: var(--page-gutter);
}
.container-header .container-topbar { order: 0; flex: 0 0 100%; }
.container-header .container-below-top { order: 3; flex: 0 0 100%; }
.container-header .container-banner {
  order: 5;
  flex: 0 0 100% !important;
  width: 100% !important;
  padding-inline: var(--page-gutter);
}

.container-header .navbar-brand { margin: 0; padding: 0; }
.container-header .brand-logo {
  display: block;
  width: 116px;
  height: 92px;
  overflow: hidden;
}
.container-header .navbar-brand img {
  display: block;
  width: 205px;
  max-width: none;
  height: auto;
  margin: -18px 0 0 -44px;
  /* ทำให้พื้นดำของโลโก้กลืนกับสีกรมท่าของหัวเว็บ เหลือแต่สีทอง */
  mix-blend-mode: lighten;
}
.container-header .site-description { display: none; }

.container-header .mod-menu {
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  padding: 0.7rem 1rem;
  font-size: 1.05rem;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .container-header::after { display: none; }
  .container-header .grid-child:has(.navbar-brand) { flex: 1 1 auto !important; }
  .container-header .brand-logo { zoom: 0.8; }
  .container-header .container-nav {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 1rem 0.5rem !important;
    margin: 0 !important;
  }
  .container-header .mod-menu { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---------- กรอบเนื้อหาและหัวข้อหน้า ---------- */
.container-component {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  margin-block: 1.5rem 2.5rem;
}
.container-component .page-header h1,
.container-component .page-header h2,
.container-component h1.page-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
}

/* ---------- หน้ารายการและหน้าบทความ (แบบเบาและปลอดภัย: ไม่บังคับโครงสร้าง ไม่ตัดเนื้อหา) ---------- */
.blog-item .page-header h2,
.blog-item h2 { font-size: 1.2rem; line-height: 1.4; font-weight: 600; }
.blog-item h1, .blog-item h2:not(.page-header h2), .blog-item h3 { font-size: 1.05rem; line-height: 1.4; }
.com-content-article .page-header h1 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.35;
}
.com-content-article .item-image img { max-height: 32rem; width: 100%; object-fit: cover; }

/* ---------- v3: แกลเลอรี sigplus 3 รูปต่อแถว และ Read more สีน้ำตาล ---------- */
:root {
  --brown: #8b5a2b;
  --brown-dark: #5f3b17;
}

/* sigplus จัดแถวรูปตามความกว้างของกรอบ (รูปตัวอย่างกว้าง 360px) จึงจำกัดความกว้างกรอบแกลเลอรี
   ที่ประมาณ 1100px เพื่อให้ได้ 3 รูปต่อแถวพอดี ชิดซ้ายตรงกับแนวข้อความ */
.com-content-article__body .sigplus-gallery {
  max-width: 1100px;
  margin-left: 0;
  margin-right: auto;
}
.com-content-article__body .sigplus-gallery ul {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ปุ่ม Read more: ตัวอักษรสีน้ำตาลให้เด่นขึ้น (พื้นปุ่มคงเดิม) */
.readmore .btn,
.readmore a {
  --bs-btn-color: var(--brown);
  --bs-btn-hover-color: var(--brown-dark);
  --bs-btn-active-color: var(--brown-dark);
  color: var(--brown);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.readmore .btn { padding: 0.4rem 0.9rem; }
.readmore .btn:hover,
.readmore .btn:focus,
.readmore a:hover {
  color: var(--brown-dark);
}

/* ---------- v4: หน้ารายการ — รูป intro จัดกึ่งกลาง (รูปต้นฉบับกว้าง 950px) ----------
   ถ้าวันหลังใช้รูปที่กว้างกว่านี้ ให้เปลี่ยนเลข 950px ตัวเดียวด้านล่าง */
:root { --listing-width: 950px; }

.com-content-category-blog .blog-item {
  margin-bottom: 2.5rem;
}
.com-content-category-blog .blog-item .item-image {
  float: none;
  max-width: var(--listing-width);
  margin: 0 auto 1rem;
}
.com-content-category-blog .blog-item .item-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-s);
}
/* ข้อความใต้รูปอยู่กึ่งกลางและกว้างเท่ารูป ให้แนวขอบตรงกัน */
.com-content-category-blog .blog-item .item-content {
  max-width: var(--listing-width);
  margin: 0 auto;
}

/* ---------- มือถือ และการลดการเคลื่อนไหว ---------- */
@media (max-width: 767.98px) {
  body { font-size: 1rem; }
  .container-component { border-radius: var(--radius-s); padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}