/*
 * Theme Name:  Hokheng School
 * Theme URI:   https://www.hokheng.ac.th
 * Description: Child theme for Hokheng School — Thai-Chinese bilingual school website built on Elementor.
 * Author:      Hokheng School
 * Template:    hello-elementor
 * Version:     1.8.9
 * Text Domain: hokheng
 */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Colors */
  --color-green-dark:   #213B2D;
  --color-green-light:  #1A5E1A;
  --color-yellow-dark:  #F9A825;
  --color-yellow-light: #FAF8E4;
  --color-white:        #FFFFFF;

  /* Typography */
  --font-heading: 'Noto Serif Thai', serif;
  --font-menu:    'Noto Sans Thai', sans-serif;
  --font-body:    'Sarabun', sans-serif;
  --font-chinese: 'Noto Serif SC', serif;

  /* Border Radius */
  --radius-small:  8px;
  --radius-medium: 16px;
  --radius-large:  24px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.20);
}

/* =========================================================
   BASE
   ========================================================= */
body {
  font-family: var(--font-body);
  background-color: #e8f0e8;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* =========================================================
   SIDEBAR NAV — used in Elementor HFE Nav Menu widget
   ========================================================= */

/* Wrapper card */
.hk-sidebar-nav {
  background: var(--color-white);
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Dark green title bar */
.hk-sidebar-nav__header {
  background: var(--color-green-dark);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-family: var(--font-menu);
  font-weight: 600;
  font-size: 16px;
}

/* Nav menu list overrides */
.hk-sidebar-nav .hfe-nav-menu .menu-item a {
  font-family: var(--font-menu);
  font-size: 15px;
  color: var(--color-green-dark);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-small);
  transition: background 0.2s;
}

.hk-sidebar-nav .hfe-nav-menu .menu-item:hover > a {
  background: var(--color-yellow-light);
}

.hk-sidebar-nav .hfe-nav-menu .menu-item.current-menu-item > a,
.hk-sidebar-nav .hfe-nav-menu .menu-item.current_page_item > a {
  background: var(--color-yellow-dark);
  color: var(--color-green-dark);
  font-weight: 700;
}

/* Icon pill */
.hk-sidebar-nav .hfe-nav-menu .menu-item a .menu-icon-pill {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-small);
  background: rgba(26, 94, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hk-sidebar-nav .hfe-nav-menu .menu-item.current-menu-item > a .menu-icon-pill {
  background: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   SIDEBAR NAV — flyout submenu
   Appears to the right of the sidebar when a parent item
   has children (hk-side-nav__item--has-children).
   Shown on hover OR when .hk-sub-open is toggled by JS.
   ========================================================= */

/* Sidebar card needs overflow:visible so flyout can escape */
.hk-side-nav {
  overflow: visible !important;
}

.hk-side-nav__item--has-children {
  position: relative;
}

.hk-side-nav__sub {
  /* position/left/top set dynamically by JS (position:fixed) so the flyout
     escapes any parent stacking context created by Elementor containers */
  background: #FAF8E4;
  border: 1px solid rgba(249, 168, 37, 0.35);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: none;
  z-index: 99999;
  white-space: nowrap;
}

/* Show when JS adds .hk-sub-open (hover-with-delay or click toggle) */
.hk-side-nav__item--has-children.hk-sub-open > .hk-side-nav__sub {
  display: block;
}

.hk-side-nav__sub-link {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-menu);
  font-size: 14px;
  color: var(--color-green-dark);
  text-decoration: none;
  transition: background 0.15s;
  border-radius: var(--radius-small);
  margin: 2px 6px;
}

.hk-side-nav__sub-link:hover {
  background: rgba(249, 168, 37, 0.25);
  text-decoration: none;
}

.hk-side-nav__sub-item--active .hk-side-nav__sub-link {
  background: rgba(249, 168, 37, 0.35);
  font-weight: 700;
}

/* =========================================================
   SECTION ACCENT BAR (yellow bar above section titles)
   ========================================================= */
.hk-accent-bar {
  width: 56px;
  height: 4px;
  background: var(--color-yellow-dark);
  border-radius: 2px;
  margin-bottom: 12px;
}


/* =========================================================
   TAG PILLS
   ========================================================= */
.hk-tag {
  display: inline-block;
  background: var(--color-green-light);
  color: var(--color-white);
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-small);
}

/* =========================================================
   OUTLINE BUTTON
   ========================================================= */
.hk-btn-outline {
  border: 2px solid var(--color-green-light);
  color: var(--color-green-light);
  background: transparent;
  border-radius: var(--radius-small);
  padding: 8px 20px;
  font-family: var(--font-menu);
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.hk-btn-outline:hover {
  background: var(--color-green-light);
  color: var(--color-white);
}

/* =========================================================
   FOOTER — e-flexbox wrapper override
   Elementor's CSS generator skips e-flexbox outer elements,
   so background + padding must be set here via the CSS ID.
   ========================================================= */
#footer-outer {
  display: flex !important;
  flex-direction: column;
  background-color: #213b2c;
  padding: 40px 0;
  width: 100%;
}

/* Footer column widths — Elementor stores % widths in JSON but they don't reach the
   CSS for e-flexbox children, so set them here. Brand (left) + hours (right) are fixed
   20%, middle grows to fill. Class-based (columns carry hk-footer-brand/mid/hours). */
.hk-footer-brand,
.hk-footer-hours {
  flex: 0 0 20% !important;
  max-width: 20%;
  min-width: 0;
}
.hk-footer-mid {
  flex: 1 1 auto !important;
  min-width: 0;
}

/* Prevent long contact text (email) from overflowing its column */
.hk-footer-mid .elementor-widget-text-editor p {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* =========================================================
   ELEMENTOR OVERRIDES
   ========================================================= */

/* Remove default hello-elementor header/footer gaps */
.elementor-page header.site-header,
.elementor-page footer.site-footer {
  display: none;
}

/* Full-width page wrapper */
.page-content,
.elementor-section-wrap {
  width: 100%;
}

/* =========================================================
   BOARD PAGE — member photo object-fit cover
   Elementor image widget doesn't expose object-fit,
   so we enforce it here for fixed-size board photos.
   ========================================================= */
.hk-board-photo img,
.hk-teacher-photo img {
  object-fit: cover;
}

/* Management-team photos: cover, anchored to the top so heads aren't clipped
   when a non-5:7 portrait is shown in a 5:7 frame. */
.hk-mgmt-photo img {
  object-fit: cover;
  object-position: center top;
}

/* =========================================================
   YEAR CARD GRID  [hk_activity_year_cards] / [hk_newsletter_year_cards]
   ========================================================= */
.hk-year-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 1024px) { .hk-year-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hk-year-cards { grid-template-columns: 1fr; } }

/* Base card */
.hk-year-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-medium);
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.hk-year-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

/* ── Activity variant — cream bg ── */
.hk-year-card--activity {
  background: rgba(252, 248, 227, 0.8);
  border: 3px solid rgba(249, 168, 37, 0.2);
  gap: 20px;
}

.hk-year-card--activity .hk-year-card__label {
  color: #1a5e1a;
}

/* ── Newsletter variant — dark green bg ── */
.hk-year-card--newsletter {
  background: rgba(33, 59, 45, 0.95);
  border: 3px solid #2c4538;
  gap: 24px;
  padding: 16px;
}

.hk-year-card--newsletter .hk-year-card__label {
  color: #f9a825;
}

/* White photo frame — aspect ratios from Figma (activity 280×160, newsletter 231×320) */
.hk-year-card__frame {
  width: 100%;
  background: #ffffff;
  border-radius: calc(var(--radius-medium) - 4px);
  overflow: hidden;
  line-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Activity: landscape 7:4 */
.hk-year-card--activity .hk-year-card__frame {
  aspect-ratio: 7 / 4;
  padding: 2px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Newsletter: portrait 7:10 */
.hk-year-card--newsletter .hk-year-card__frame {
  aspect-ratio: 7 / 10;
  padding: 4px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.25);
}

.hk-year-card__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-medium) - 6px);
  object-fit: cover;
  object-position: center center;
}

.hk-year-card__img--placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: #e0e0e0;
  border-radius: calc(var(--radius-medium) - 6px);
}

/* Year label */
.hk-year-card__label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

/* =========================================================
   ACTIVITY TITLE LINK — strip underline, keep green color
   ========================================================= */
.hk-act-loop .elementor-heading-title a,
.elementor-widget-loop-grid .elementor-heading-title a {
  color: var(--color-green-dark);
  text-decoration: none;
}

.hk-act-loop .elementor-heading-title a:hover,
.elementor-widget-loop-grid .elementor-heading-title a:hover {
  text-decoration: underline;
}

/* Clamp activity card titles to 2 lines */
.hk-act-card .elementor-heading-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   YEAR NAV — activity + newsletter year index pages
   Three-button row: [← Prev]  [See All (pill)]  [Next →]
   space-between distributes them; padding sets outer insets.
   When an edge button is server-side hidden the remaining
   two spread to fill — still looks clean.
   ========================================================= */
.hk-yearnav,
.hk-nl-yearnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 0 40px;
}

/* =========================================================
   ACTIVITY READ — post content typography
   ========================================================= */
.hk-post-content {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: #4A5568;
}

.hk-post-content p { margin-bottom: 1.2em; }
.hk-post-content img { max-width: 100%; border-radius: var(--radius-medium); }

/* =========================================================
   NEWSLETTER SINGLE — main featured image
   Elementor sets width:80% on the <img> but the wrapping <a>
   is display:inline-block, so it shrinks to the image's
   natural width (720px), making 80% = 576px.
   Switching the <a> to block lets 80% resolve against the
   full column (≈1084px) giving ≈867px as the user intended.
   ========================================================= */
.hk-post-image .elementor-widget-image {
  width: 100%;       /* give the flex item a definite width so % on <img> resolves */
}
.hk-post-image .elementor-widget-image a {
  display: block !important;  /* block fills the widget width; img 80% then = 80% of column */
}
.hk-post-content h2, .hk-post-content h3 { font-family: var(--font-heading); color: var(--color-green-dark); }

/* =========================================================
   ACTIVITY GALLERY — 4-column responsive grid
   ========================================================= */
.hk-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.hk-gallery-item {
  display: block;
  border-radius: var(--radius-small);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.hk-gallery-item .hk-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.hk-gallery-item:hover .hk-gallery-img {
  transform: scale(1.04);
}

/* =========================================================
   ACTIVITY LIGHTBOX
   ========================================================= */

/* ── reset Hello Elementor's #c36 on all buttons inside the lightbox.
      Uses ID selector (1,0,1) so it beats HE's bare `button` (0,0,1).
      Specific rules below use #hk-lightbox .class (1,1,0) to beat this reset. ── */
#hk-lightbox button,
#hk-lightbox button:hover,
#hk-lightbox button:focus,
#hk-lightbox button:focus-visible,
#hk-lightbox button:active {
  border: none;
  background-color: transparent;
  color: #fff;
  outline: none;
  text-decoration: none;
  padding: 0;
}

/* ── shell ── */
.hk-lb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.92);
}
.hk-lb[hidden] { display: none; }

.hk-lb-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}

/* ── top bar ── */
.hk-lb-top {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.hk-lb-counter {
  color: #fff;
  font-size: 14px;
  font-family: var(--font-body, 'Prompt', sans-serif);
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.hk-lb-controls {
  display: flex;
  gap: 8px;
}

#hk-lightbox .hk-lb-zoom-btn,
#hk-lightbox .hk-lb-close {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}
#hk-lightbox .hk-lb-zoom-btn svg,
#hk-lightbox .hk-lb-close svg { width: 32px; height: 32px; }
#hk-lightbox .hk-lb-zoom-btn:hover,
#hk-lightbox .hk-lb-close:hover { background: rgba(255, 255, 255, 0.28); }

/* zoom-in icon → zoom-out icon when active */
.hk-lb-zoom-btn .icon-zoom-out { display: none; }
.hk-lb--zoomed .hk-lb-zoom-btn .icon-zoom-in  { display: none; }
.hk-lb--zoomed .hk-lb-zoom-btn .icon-zoom-out { display: block; }

/* ── stage: prev | photo | next in a row, flex-centred so arrows always align with image ── */
.hk-lb-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 0 16px;
  gap: 12px;
}

/* ── prev / next ── */
#hk-lightbox .hk-lb-prev,
#hk-lightbox .hk-lb-next {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, transform 0.18s;
}
#hk-lightbox .hk-lb-prev svg,
#hk-lightbox .hk-lb-next svg { width: 32px; height: 32px; }
#hk-lightbox .hk-lb-prev:hover,
#hk-lightbox .hk-lb-next:hover {
  background: rgba(255, 255, 255, 0.30);
  transform: scale(1.08);
}
#hk-lightbox .hk-lb-prev:disabled,
#hk-lightbox .hk-lb-next:disabled {
  opacity: 0.22;
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* ── image wrap ── */
.hk-lb-img-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.hk-lb--zoomed .hk-lb-img-wrap {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: zoom-out;
}

.hk-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  transition: opacity 0.2s ease;
}
.hk-lb--zoomed .hk-lb-img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  border-radius: 0;
}

/* ── spinner ── */
.hk-lb-spinner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.20);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hk-spin 0.7s linear infinite;
}
@keyframes hk-spin { to { transform: rotate(360deg); } }

/* ── thumbnail strip ── */
.hk-lb-thumbs {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  background: rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.30) transparent;
}
.hk-lb-thumbs::-webkit-scrollbar { height: 4px; }
.hk-lb-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.30);
  border-radius: 2px;
}

#hk-lightbox .hk-lb-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 54px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.50;
  background: none;
  transition: opacity 0.18s, border-color 0.18s;
}
#hk-lightbox .hk-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#hk-lightbox .hk-lb-thumb:hover,
#hk-lightbox .hk-lb-thumb:focus {
  opacity: 0.80;
  background-color: transparent;
  border-color: rgba(26, 94, 26, 0.55);
}
#hk-lightbox .hk-lb-thumb:active {
  opacity: 1;
  background-color: transparent;
  border-color: #1A5E1A;
}
#hk-lightbox .hk-lb-thumb.is-active {
  border-color: #1A5E1A;
  box-shadow: 0 0 0 1px #1A5E1A;
  background-color: transparent;
  opacity: 1;
}

/* =========================================================
   OTHER-ACTIVITIES SECTION — timeline line + dot
   ========================================================= */
.hk-other-activities {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px 10px;
}

/* =========================================================
   TEACHER-PERFORMANCE TABS  [hk-teacher-tabs]
   Elementor nested-tabs generates its own dynamic CSS that
   overrides widget colour settings, so we override here.
   ========================================================= */

/* Tab switcher row — centered with default Elementor padding */
.hk-teacher-tabs .e-n-tabs-heading {
  justify-content: center !important;
}

/* All tab pills — inactive state */
.hk-teacher-tabs .e-n-tab-title {
  background: var(--color-green-light) !important;
  color: var(--color-white) !important;
  border-radius: 999px !important;
}

/* Active tab pill */
.hk-teacher-tabs .e-n-tab-title.e-active,
.hk-teacher-tabs .e-n-tab-title[aria-selected="true"] {
  background: var(--color-yellow-dark) !important;
  color: var(--color-green-dark) !important;
}

/* =========================================================
   SIDEBAR COLUMN — fixed width on pages built via MCP where
   Elementor may skip width/flex CSS. Targets any container
   whose CSS-class is hk-sidebar-col.
   ========================================================= */
.elementor-element.hk-sidebar-col {
  width: 350px !important;
  flex: 0 0 350px !important;
  min-width: 350px !important;
  max-width: 350px !important;
  padding: 0 !important;
}

/* =========================================================
   HISTORY PAGE TIMELINE (page 496) — line + icon fixes
   ========================================================= */

/* Fix 1: Vertical gradient line — start at top of first photo, end at
   bottom of last photo.
   When top + height are both resolved, CSS ignores bottom.
   Setting height explicitly (containerH 1556 − top 56 = 1500) and
   bottom:auto prevents the element overrunning the container. */
.hk-timeline-line::before {
  top: 56px !important;     /* = heading(36) + gap(20) = top of first row     */
  height: 1500px !important; /* 1556px container − 56px top offset             */
  bottom: auto !important;  /* let height drive the end, not bottom            */
}

/* Fix 2: Timeline side columns — each column has different total horizontal
   padding (10+40=50px, 32+0=32px, 0+32=32px, 40+40=80px …) which causes
   flex to give unequal outer widths even with flex-grow:1.
   Force all 8 side columns to exactly 510px = (1140 − 80 icon − 40 gaps) / 2
   so the icon always sits on the vertical centre line. */
.history-timeline-description,
.history-timeline-picture {
  flex: 0 0 510px !important;
  width: 510px !important;
  min-width: 0 !important;
  max-width: 510px !important;
}

/* =========================================================
   INTERNAL PAGE HEADER (Template 55 — #hero-inner)
   ========================================================= */

/* Make the heading area fill all space above the title bar so
   the school-name text is vertically centred in the upper zone. */
.hk-inner-header-top > .e-con:first-child {
  flex: 1 1 auto !important;
}

/* History page background is now set via hk_header_bg_id post meta
   (hokheng-widgets plugin → wp_head injection). No static override needed. */

/* =========================================================
   MOBILE — stack the sidebar + content layout on phones.
   The inner-page chrome puts a fixed-width sidebar column
   (class hk-sidebar on the home page; hk-sidebar-col on the
   MCP-built inner templates) beside a flex-grow content
   column inside a row that already wraps on mobile
   (--flex-wrap-mobile:wrap). On a ~390px screen the locked
   350px sidebar leaves no usable width for the content, so
   below the 767px breakpoint we drop the sidebar to full
   width, un-stick it, and force the parent row to a column
   so the nav sits cleanly above the page content.
   One rule covers the home page and all inner templates.
   ========================================================= */

/* =========================================================
   VISITOR POPUP (Popup Maker) — widen on phones.
   Popup Maker sets `width: 50%` AND a pixel `left:` inline (JS-calculated to center the
   50% box), so overriding width alone would shove it off-centre. Widen to 95% and re-set
   left to 2.5% so it stays centred (2.5% + 95% + 2.5% = 100%). `!important` beats Popup
   Maker's inline styles (they're not !important), so it holds even after PM re-positions
   on resize. Desktop/tablet keep 50%. Verified on-device: 95% wide, 10px gaps each side.
   ========================================================= */
@media (max-width: 767px) {
  .pum-container {
    width: 95% !important;
    max-width: 95% !important;
    left: 2.5% !important;
    right: auto !important;
    margin: 0 !important;
  }

  /* On phones, hide the close (X) button — it's oversized relative to the small popup
     and crowds the image. Visitors dismiss by tapping the dark overlay outside the popup
     (requires "Click Overlay to Close" ON in the popup settings — it is).
     Then let the image fill the popup edge-to-edge: the image sits in a Gutenberg
     <figure class="wp-block-image"> that carries margin:0 40px, so zero the figure margin
     and force figure + img to 100%. (Image has width="1024" attr + inline width — the
     !important width:100% overrides both.) Scoped to this popup so other popups are unaffected. */
  #popmake-51389 .pum-close { display: none !important; }
  #popmake-51389 .pum-content { padding: 0 !important; }
  #popmake-51389 .pum-content figure,
  #popmake-51389 .pum-content .wp-block-image {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #popmake-51389 .pum-content img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  /* iOS/WebKit has a :has() layout bug: it applies the mobile sidebar-stacking styles
     but places some deeply-nested elements (e.g. the activity read-more button) at
     their desktop "beside-sidebar" x-position, off-screen to the right → horizontal
     page overflow. We can't cure the per-element layout (reflow + forcing the row
     static both fail on-device), and those elements are unreachable anyway, so clip the
     horizontal overflow. `overflow: clip` is basic layout (not :has()) so WebKit honors
     it; `hidden` is the fallback for older engines. No-op on Chrome (no overflow). */
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Force the row that holds the sidebar to stack vertically. */
  .elementor-element:has(> .hk-sidebar),
  .elementor-element:has(> .hk-sidebar-col) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Sidebar: full width, natural height, not sticky, above content. */
  .elementor-element.hk-sidebar,
  .elementor-element.hk-sidebar-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: static !important;
    top: auto !important;
  }

  /* Let the embedded nav card span the full mobile width. */
  .hk-sidebar .hk-side-nav,
  .hk-sidebar-col .hk-side-nav {
    max-width: 100% !important;
  }

  /* Archive / loop-item templates (departments, newsletter show-all) put the sidebar
     in a .hk-menu-container column; at ≤900 that row doesn't wrap, so the content
     column collapses to 0. Force the row to wrap and both columns to full width so
     the sidebar stacks above the content (mirrors the ≤767 behaviour). */
  .e-con-inner:has(> .elementor-element .hk-menu-container) {
    flex-wrap: wrap !important;
  }
  .e-con-inner:has(> .elementor-element .hk-menu-container) > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  /* The sidebar column may be nested as a fixed-width loop-item (.e-loop-item) and/or
     the .hk-menu-container nav card — force every level in that chain full-width so the
     stacked sidebar spans the screen (loop items aren't .elementor-element). */
  .e-loop-item:has(.hk-side-nav),
  .hk-menu-container {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  /* On some templates the sidebar nav is rendered inside a loop-grid whose column is a
     fixed 350px; collapse that grid to a single full-width column so the nav spans. */
  .elementor-grid:has(.hk-side-nav) {
    grid-template-columns: 1fr !important;
  }
  /* The embedded menu is a Template widget authored at a fixed 350px on the nav and every
     wrapper level. Force the whole chain full-width by walking DOWN from the nav via
     :has() — this is column-class-agnostic, so it fixes both .hk-sidebar pages and the
     loop-item sidebars (departments, board, single-dept, activity, newsletter, …). */
  .elementor-widget:has(.hk-side-nav),
  .elementor-widget-container:has(.hk-side-nav),
  .hk-side-nav {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Activity news card — stack everything on mobile with DIRECT flex-direction on the
     card's own classes (not Elementor's `--flex-direction` custom property, not :has()).
     iOS/WebKit mis-renders the var/:has()-driven column layout as a ROW, spreading the
     date, title and read-more horizontally off-screen. Setting flex-direction directly
     on each container — and forcing every child full-width so it can't sit side-by-side
     — lays the card out correctly. */
  .hk-act-card,
  .hk-act-row,
  .hk-act-content {
    display: block !important;   /* NOT flex — WebKit mis-lays-out these nested flex
                                    containers (spreads children horizontally). Block flow
                                    stacks children top-to-bottom by normal document rules,
                                    which WebKit renders reliably. */
    width: 100% !important;
    max-width: 100% !important;
  }
  .hk-act-row > *,
  .hk-act-content > * {
    display: block !important;   /* each child is a full-width block → stacks vertically */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* keep the date + tag on one line (it's the only bit that should stay horizontal) */
  .hk-act-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hk-act-img {
    max-width: 100% !important;
    margin-left: auto !important;   /* center the image block in the stacked card */
    margin-right: auto !important;
    text-align: center !important;
  }
  .hk-act-img img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Home page (post 12): consistent side gutter for the stacked
     column so the menu, mission, activities and newsletter blocks
     all line up with equal breathing room from the screen edge.
     Padding goes on the parent row (id 82913ff) so both the sidebar
     column and the content column inset together. */
  .hk-home-row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Item 8: the content column uses an 80px gap between the mission, activities
     and newsletter blocks — too airy on a phone. Tighten to 40px on mobile. */
  .hk-home-content {
    gap: 40px !important;
    --row-gap: 40px !important;
    --column-gap: 40px !important;
  }

  /* Activity news card: drop the desktop timeline. The card (.hk-act-card)
     carries a 96px left gutter holding a ::before dot and ::after vertical
     line. On phones that gutter wastes ~25% of the width, so hide the
     line/dot and reclaim the space; trim the loop wrapper padding too so
     the card is as wide as possible while staying inside the activities box. */
  .hk-act-card {
    padding-left: 0 !important;
  }
  .hk-act-card::before,
  .hk-act-card::after {
    display: none !important;
  }
  .hk-act-loop {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Footer (template 23): the main row is a BOXED container, so the columns live inside
     its .e-con-inner. Force that inner to a vertical, stretched stack so each column
     fills the full width. (Elementor's own flex_direction_mobile on a boxed row is
     unreliable, hence the CSS.) Columns carry hk-footer-brand/mid/hours classes. */
  .e-con-inner:has(> .hk-footer-brand) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }
  .e-con-inner:has(> .hk-footer-brand) > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    --content-width: 100% !important;
  }
  /* Normalise column padding so the blocks left-align with no extra indent. */
  .hk-footer-brand,
  .hk-footer-mid,
  .hk-footer-hours {
    padding: 0 !important;
  }
  /* Keep each icon/logo on the left with its text on the right — the inner rows wrap on
     mobile by default, which dropped the school name under the logo and the address
     under its pin icon. Force them to stay on one row. */
  .hk-footer-brand-row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  .hk-footer-mid > .e-con-inner > .e-con {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  /* Logo keeps its natural size on the left (no flex-grow) so the name sits beside it. */
  .hk-footer-brand .elementor-widget-image {
    flex: 0 0 auto !important;
  }
  /* Font sizes (widget classes don't render, so scope by container class + widget type;
     the two name headings are nth-child within the name container). */
  .hk-footer-name > .elementor-widget:nth-child(1) .elementor-heading-title { font-size: 20px !important; }
  .hk-footer-name > .elementor-widget:nth-child(2) .elementor-heading-title { font-size: 15px !important; }
  .hk-footer-hours .elementor-widget-heading .elementor-heading-title { font-size: 18px !important; }
  .hk-footer-mid .elementor-widget-text-editor,
  .hk-footer-hours .elementor-widget-text-editor { font-size: 16px !important; line-height: 1.7 !important; }
  .hk-footer-hours .elementor-widget-text-editor p { margin: 0 0 4px !important; }
  .hk-footer-copyright .elementor-widget-text-editor { font-size: 13px !important; }

  /* History page timeline: mobile redesign.
     Stack vertically [Icon -> Pic -> Desc] centered on the vertical line. */
  .history-timeline-row > .e-con-inner {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Override Elementor internal Custom CSS that forces horizontal layout */
  .history-timeline-row > .e-con-inner > .elementor-element {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .history-timeline-icon {
    order: 1 !important;
    text-align: center !important;
  }

  /* Fix timeline line: desktop has hardcoded 1500px height; on mobile the
     stacked layout is taller, so extend the line to fill the container. */
  .hk-timeline-line::before {
    height: calc(100% - 56px) !important;
  }

  .history-timeline-picture {
    order: 2 !important;
    text-align: center !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .history-timeline-picture > .e-con-inner {
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .history-timeline-row > .e-con-inner > .history-timeline-description {
    order: 3 !important;
    text-align: center !important;
    padding: 16px !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Department cards: reduce icon circle 80→48px on mobile, keep it circular */
  .hk-dept-icon-circle {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
  }

  /* Evaluation report pages: reduce container padding, title font size */
  .hk-eval-report {
    padding: 16px !important;
  }

  .hk-eval-report h1.elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.4 !important;
  }

  /* Inner page header: logo above title, centered. */
  .hk-inner-header-logo {
    order: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hk-inner-header-text {
    order: 2 !important;
    text-align: center !important;
  }

  /* History box (bottom section) spacing */
  .history-box {
    padding: 16px !important;
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Activity gallery: 3 columns on mobile (desktop: 4 columns) */
  .hk-gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Lightbox: smaller arrows, no circle background on mobile */
  #hk-lightbox .hk-lb-prev,
  #hk-lightbox .hk-lb-next {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }
  #hk-lightbox .hk-lb-prev svg,
  #hk-lightbox .hk-lb-next svg {
    width: 22px !important;
    height: 22px !important;
  }
  /* Give back horizontal space taken by smaller arrows */
  .hk-lb-stage {
    padding: 0 4px !important;
    gap: 4px !important;
  }
  /* Prevent thumbnail strip from overflowing viewport on mobile */
  .hk-lb-thumbs {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Newsletter year nav: Prev+Next on row 1, See All on row 2 */
  .hk-nl-yearnav {
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hk-nl-yearnav > .elementor-element:nth-child(1) {
    order: 1 !important;
  }
  .hk-nl-yearnav > .elementor-element:nth-child(3) {
    order: 2 !important;
  }
  .hk-nl-yearnav > .elementor-element:nth-child(2) {
    order: 3 !important;
    flex: 0 0 100% !important;
    text-align: center !important;
  }

  /* Teacher card image: border adjustments on mobile (card stacks via Elementor flex_direction_mobile:column) */
  .hk-teacher-photo img {
    border-radius: 8px !important;
    border-width: 2px !important;
  }

  /* Activity single: related box matches year-index style on mobile */
  .hk-other-activities {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }

  /* Newsletter single: related box matches year-index style on mobile */
  .hk-nl-related-box {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }
  .hk-nl-related-title .elementor-heading-title {
    color: #1b5e20 !important;
  }
}

/* ============================================================
   MEDIUM RESOLUTION — 1280px (1920px display @ 150% scaling)
   Targets 901px–1536px; desktop (≥1537px) unchanged; ≤900px uses the mobile
   (stacked) design. Floor is 901 to match Elementor's Mobile breakpoint (set to
   900 in Site Settings → Layout → Breakpoints) so theme + Elementor switch to the
   stacked layout together at ≤900 (the medium 2-col layout cramps below ~900).
   Upper bound is 1536 (not 1366) so browser zoom-out on a ~1280px display
   (90% zoom ≈ 1420px) stays within the medium design and icons remain centered.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1536px) {

  /* A. Breathing room: add horizontal padding so content
        doesn't sit flush at the ~62px auto-margin.
        Reset on named component containers so it doesn't cascade. */
  .e-con-boxed > .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .history-timeline-row > .e-con-inner,
  .history-timeline-description > .e-con-inner,
  .history-timeline-picture > .e-con-inner,
  .history-timeline-icon > .e-con-inner,
  .history-box > .e-con-inner,
  .hk-dept-card-inner > .e-con-inner,
  .hk-dept-text-col > .e-con-inner,
  .hk-sidebar-col > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: content-box !important;
  }
  /* A1. Fix double gutter: some pages (home, history, board…) wrap the sidebar+content
     row in a redundant extra boxed container, so the breathing-room 20px applies to
     BOTH nested boxed inners → 40px, vs single-nested pages (departments, newsletter
     read) at 20px. Zero the padding on that redundant wrapper (the boxed inner whose
     nested boxed child holds the sidebar) so content is inset 20px everywhere. */
  .e-con-boxed > .e-con-inner:has(> .e-con-boxed > .e-con-inner > .hk-sidebar),
  .e-con-boxed > .e-con-inner:has(> .e-con-boxed > .e-con-inner > .hk-sidebar-col) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Row: icon is absolute at center (48px wide → ±24px). gap:32px puts each box edge
     16px from center, so each box overlaps the icon by 8px. Items vertically centered. */
  .history-timeline-row > .e-con-inner {
    position: relative !important;
    gap: 32px !important;
    align-items: center !important;
  }

  /* A2. History timeline: smaller text, compact padding and gap */
  /* Fix asymmetric Elementor padding (10px left / 40px right) → symmetric */
  .history-timeline-description {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Desc & picture equal width: (0,7,0) beats Elementor's per-element (0,3,0) flex.
     Each = half the row minus half the 32px gap, so both overlap the 48px icon by 8px. */
  .elementor .history-timeline-row > .e-con-inner > .e-con.e-flex.e-con-boxed.history-timeline-description,
  .elementor .history-timeline-row > .e-con-inner > .e-con.e-flex.e-con-boxed.history-timeline-picture {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: calc((100% - 32px) / 2) !important;
    width: calc((100% - 32px) / 2) !important;
    max-width: calc((100% - 32px) / 2) !important;
    min-width: 0 !important;
  }
  .history-timeline-description .elementor-heading-title {
    font-size: 20px !important;
  }
  /* More specific selector beats the general D rule below */
  .history-timeline-description .elementor-widget-text-editor p {
    font-size: 14px !important;
  }
  .history-timeline-description > .e-con-inner {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 10px !important;
  }
  /* Smaller year capsule: reduce inner padding */
  .history-timeline-description .e-con-boxed > .e-con-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  /* Picture: equal flex width with desc (aspect-ratio lives on the img, not the
     flex container, so it doesn't skew the flex width). Vertically centered on the row. */
  .history-timeline-picture {
    overflow: hidden !important;
    height: auto !important;
    align-self: center !important;
  }
  .history-timeline-picture img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Icon: 48×48px circle; (0,7,0) beats Elementor's (0,6,0); absolutely centered on the row */
  .elementor .history-timeline-row > .e-con-inner > .e-con.e-flex.e-con-boxed.history-timeline-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    flex-basis: 48px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-width: 2px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
  }
  .history-timeline-icon .elementor-icon-wrapper,
  .history-timeline-icon .elementor-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
    line-height: 48px !important;
  }
  /* The center "icon" is actually an image widget (heart SVG). Elementor forces
     its img to 48px via (0,3,1); beat it with (0,4,1) and fit inside the 24px circle. */
  .elementor .history-timeline-icon > .e-con-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .elementor .history-timeline-icon .elementor-widget-image img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* B. Sidebar nav (medium): shrink so the whole menu fits one screen — label 19→17px,
     line-height 1.4→1.3, link min-height 50→40px. (font-size on __link sizes the icon
     pill/arrow; the visible text is __label.) */
  .hk-side-nav__link {
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 40px !important;
    padding: 6px 16px !important; /* was 8px 16px — tighten vertical rhythm */
  }
  .hk-side-nav__label {
    font-size: 17px !important;
    line-height: 1.3 !important;
    /* The label's default `word-break: break-word` breaks anywhere (incl. at the
       non-breaking space in "รอบที่ N"). Use normal word-break so Thai wraps at its
       dictionary word boundaries and the nbsp keeps "รอบที่ N" on one line; keep
       overflow-wrap as a fallback for any single overlong unit. */
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* C. Inner page header title: 48px → 40px */
  .hk-inner-page-title .elementor-heading-title {
    font-size: 40px !important;
  }

  /* D. Body / content paragraph text: 20px → 17px */
  .elementor-widget-text-editor p {
    font-size: 17px !important;
  }

  /* E. Footer: paragraph text 20px → 15px, headings scaled down */
  .elementor-location-footer p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .elementor-location-footer h3.elementor-heading-title {
    font-size: 18px !important;
  }
  .elementor-location-footer h4.elementor-heading-title {
    font-size: 16px !important;
  }

  /* F. Newsletter year index: 4 columns → 3 columns */
  .hk-nl-year-grid .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* G. Home page newsletter section: 4 columns → 3 columns, and show only 3 cards
     (the query returns 4; hide the 4th at medium so it's a clean single row of 3.
     Desktop keeps all 4 in its 4-col row). nth-of-type isolates the DIV loop items
     from the two <style> tags Elementor injects as siblings in the grid. */
  .hk-home-nl-grid .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .hk-home-nl-grid .elementor-loop-container.elementor-grid > .e-loop-item:nth-of-type(n+4) {
    display: none !important;
  }

  /* H. Department index cards: stack icon above name/description (like mobile) */
  .hk-dept-card-inner {
    flex-direction: column !important;
    align-items: center !important;
  }
  .hk-dept-text-col {
    width: 100% !important;
    text-align: center !important;
  }
  /* The widgets live in the col's inner flex container, which defaults to
     align-items:flex-start — so shrink-wrapped single-line titles pinned left
     (multi-line ones filled the width and only looked centered). Center the
     inner's items so every title/description is centered. */
  .hk-dept-text-col > .e-con-inner {
    align-items: center !important;
  }
  .hk-dept-text-col .elementor-widget-text-editor {
    text-align: center !important;
  }
  /* Dept card padding: outer left/right 32px→16px; inner top/bottom 32px→16px, left/right 20px→0 */
  .elementor .e-con-boxed:has(> .e-con-inner > .hk-dept-card-inner) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .elementor .e-con-boxed:has(> .e-con-inner > .hk-dept-card-inner) > .e-con-inner {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Dept card title: 22px → 20px */
  .elementor .hk-dept-text-col .elementor-heading-title {
    font-size: 20px !important;
    text-align: center !important;
  }

  /* I. History timeline line. Elementor draws one fixed-height (1500px) line that
     can't track the (unequal, zoom-dependent) row heights. Replace it with a
     per-row connector segment anchored to each row's own icon center (top:50%),
     so it stays aligned at any width/zoom. The 20px inter-row gap is bridged. */
  .elementor .e-con.e-con-boxed:has(> .e-con-inner > .history-timeline-row)::before {
    content: none !important;
  }
  .history-timeline-row > .e-con-inner::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    top: 0 !important;
    bottom: -20px !important; /* bridge the 20px gap down to the next row */
    background: linear-gradient(rgb(249, 168, 37) 0%, rgb(27, 94, 32) 100%) !important;
    z-index: 1 !important; /* behind the icon (z-index:2), in front of nothing else */
    pointer-events: none !important;
  }
  /* First row: start the line at its icon center, not the row top */
  .elementor-widget-heading + .history-timeline-row > .e-con-inner::after {
    top: 50% !important;
  }
  /* Last row: end the line at its icon center, and don't bridge past it */
  .history-timeline-row:last-child > .e-con-inner::after {
    bottom: 50% !important;
  }

  /* J0. Activity card internals (global — home, index, and single "related" so they
     all match): title 20→18, date/title/read-more row gap 20→10, tag pill 4/14→2/10. */
  .hk-act-content {
    gap: 10px !important;
  }
  /* Higher specificity (0,5,0) to beat the heading widget's per-element Custom CSS
     rule (.elementor-63 .elementor-element.elementor-element-{id} … = (0,3,1) !important). */
  .elementor .hk-act-card .hk-act-content .elementor-widget-heading .elementor-heading-title {
    font-size: 17px !important;
  }
  .hk-tag {
    padding: 2px 10px !important;
  }

  /* J. Activity card LIST inset (home + Activity Index): the card block is flush-left
     (0 — the timeline line/dot already offsets it) with 16px on the right. Target the
     activity loop grid directly via class (:has(.hk-act-card)) so ONLY the card list
     moves — never the page/sidebar layout. Zero the home wrapper layers (Elementor's
     24px loop padding + the breathing-room 20px inners) so nothing adds back; these
     selectors are class-only and match home exclusively (only home has .hk-act-loop). */
  .e-con-inner:has(> .hk-act-loop) {   /* home: section inner (heading + loop + button) */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hk-act-loop,
  .hk-act-loop > .e-con-inner {        /* home: loop container + its inner */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-widget-loop-grid:has(.hk-act-card) {   /* the activity card list, both pages */
    padding-left: 0 !important;
    padding-right: 16px !important;
  }

  /* Card timeline gutter (holds the ::before dot + ::after line): 96px → 64px.
     Global so the Activity-single "related" block matches home + index. */
  .hk-act-card {
    padding-left: 64px !important;
  }
  /* Nudge the timeline dot + line 8px left so the line isn't crowding the cards
     (dot was left:26px→18px, line was left:33px→25px; both stay concentric). */
  .hk-act-card::before { left: 18px !important; } /* dot */
  .hk-act-card::after  { left: 25px !important; } /* line */

  /* Activity single: the date/tag meta row sits in a boxed container whose inner
     picks up the breathing-room 20px, indenting the date past the title. Reset it. */
  .hk-act-single-meta > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* K. Departments "คุณลักษณะของครูฮกเฮง" 3 sub-boxes (.hk-teacher-trait): tighten padding.
     Horizontal 40→16/side (outer 20→16 + inner breathing-room 20→0);
     vertical 24→16 (inner top/bottom). */
  .hk-teacher-trait {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hk-teacher-trait > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* Widen the 3 sub-boxes by shrinking the padding of the box that holds them
     (outer 10 + inner breathing-room 20 = 30/side → 8/side). */
  .e-con-boxed:has(> .e-con-inner > .hk-teacher-trait) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .e-con-boxed:has(> .e-con-inner > .hk-teacher-trait) > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* L. Activity Read (single): smaller post title, and smaller lightbox/popup UI. */
  .single-activity h1.elementor-heading-title {
    font-size: 24px !important; /* was 32px */
  }
  /* Lightbox controls (zoom/close/prev/next): 56px circles → 32px, svg 32→18 to keep ratio. */
  #hk-lightbox .hk-lb-zoom-btn,
  #hk-lightbox .hk-lb-close,
  #hk-lightbox .hk-lb-prev,
  #hk-lightbox .hk-lb-next {
    width: 32px !important;
    height: 32px !important;
  }
  #hk-lightbox .hk-lb-zoom-btn svg,
  #hk-lightbox .hk-lb-close svg,
  #hk-lightbox .hk-lb-prev svg,
  #hk-lightbox .hk-lb-next svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* M. Newsletter Read (single): related "ดูจดหมายข่าวฉบับอื่นๆ" grid 4 → 3 columns
     so the 3 related cards fill the row evenly (no empty 4th slot). */
  .hk-nl-related-box .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* A dense academic year returns 4 related; in a 3-col grid that leaves a lonely
     4th on a second row. Show only 3 at medium (desktop still shows 4). nth-of-type
     counts the DIV loop items; the two <style> siblings are a different type. */
  .hk-nl-related-box .elementor-loop-container.elementor-grid > .e-loop-item:nth-of-type(n+4) {
    display: none !important;
  }
  /* N. Single Dept / Teachers list: headings are oversized for the scaled view.
     Teacher name/role live in loop items (widget css_classes don't render there),
     so target by tag scoped to .single-hk_department. Dept title is the page's only H1. */
  .single-hk_department h1.elementor-heading-title {
    font-size: 24px !important; /* dept title 32→24 */
  }
  .single-hk_department .e-loop-item h3.elementor-heading-title {
    font-size: 24px !important; /* teacher name 36→24 */
  }
  .single-hk_department .e-loop-item h4.elementor-heading-title {
    font-size: 16px !important; /* teacher role 24→16 */
  }

  /* O. Home hero banner (header template): the whole banner is one baked, full-width
     image that runs edge-to-edge and feels cramped at medium. Inset it with side
     margins (the section's green gradient shows at the sides) so it reads with some
     breathing room and shrinks slightly. */
  .hk-home-hero {
    padding-left: 6% !important;
    padding-right: 6% !important;
  }

  /* P. Footer brand column (school name): prioritise it — widen the first column (20%
     → 30%, the middle column shrinks to absorb) and keep each name on a single line
     (Thai one line, English one line; Thai otherwise auto-line-breaks). (0,2,0) beats
     the class-based 20% base rule; scoped to medium so desktop (≥1537) stays at 20%. */
  .hk-footer-brand.e-con {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }
  .hk-footer-brand .elementor-heading-title,
  .hk-footer-brand .elementor-widget-text-editor p,
  .hk-footer-brand p {
    white-space: nowrap !important;
  }

  /* Q. Inner-page header (tmpl 55): the 72px school name + tagline wrap to 3 lines at
     medium (the tagline needs ~849px but only ~660px is free at 1024). Scale them
     fluidly so the name and the tagline each stay on one line — 2 lines total, which
     also tightens the header vertically. Caps at the 72px desktop size. */
  .hk-inner-header-text .elementor-heading-title {
    font-size: clamp(40px, 5vw, 72px) !important;
    line-height: 1.15 !important;
  }

}

/* ============================================================
   GLOBAL (all breakpoints) — newsletter related cards
   ============================================================ */
/* Equal card height: the grid stretches the loop items to the tallest (2-line
   title), but the card box inside only fits its content — so 1-line cards look
   shorter. Make the card fill its item so all cards in a row are the same height.
   Global (not just medium) so the desktop 4-card row is even too. Only affects
   the newsletter related block. */
.hk-nl-related-box .e-loop-item > .e-con {
  height: 100% !important;
}