/*
Theme Name: Production Solutions Thailand
Theme URI: https://www.productionsolutions.co.th
Author: HostSavers / Insight Consult
Author URI: https://hostsavers.net
Description: Bespoke block theme for Production Solutions (Thailand) Ltd. — enhanced energy recovery services, Gulf of Thailand. Built from the approved 2026 redesign. Native posts + categories drive the news system and category colour-coding (Awards/gold, CSR/green, Employee/blue, QHSE/orange).
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.16.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pst
*/

/* ============================================================
   PST — Foundational custom CSS
   Tokens come from theme.json (var(--wp--preset--color--*) etc).
   This file holds the bespoke bits FSE can't express alone.
   Per-section CSS is appended as patterns are built (Stage 2+).
   ============================================================ */

:root {
  --pst-radius: 24px;
  --pst-radius-lg: 28px;
  --pst-pill: 30px;
  --pst-shadow: 0 10px 40px rgba(8, 17, 31, 0.08);
}

/* Honour print colours when rendering to PDF/PNG references */
body {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

img { max-width: 100%; height: auto; display: block; }

/* ---- Eyebrow / kicker label (used across sections) ---- */
.pst-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.pst-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--wp--preset--color--orange);
  flex-shrink: 0;
}
.pst-eyebrow.is-light { color: var(--wp--preset--color--orange); }

/* ---- Pill buttons (matching the mockup CTAs) ---- */
.pst-btn-outline {
  border: 2px solid rgba(237, 232, 223, 0.5);
  color: var(--wp--preset--color--cream);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--pst-pill);
  display: inline-block;
  text-decoration: none;
}

/* ============================================================
   HEADER — white nav, orange underline, top ticker bar
   ============================================================ */
.pst-nav {
  background: #fff;
  border-bottom: 4px solid var(--wp--preset--color--orange);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  min-height: 88px;
  gap: 24px;
  flex-wrap: wrap;
}
.pst-nav .wp-block-site-logo img { height: 56px; width: auto; }
.pst-nav .wp-block-navigation {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pst-nav .wp-block-navigation a { color: #333; text-decoration: none; }
.pst-nav .wp-block-navigation .current-menu-item a,
.pst-nav .wp-block-navigation a:hover { color: var(--wp--preset--color--orange); }

.pst-ticker {
  background: var(--wp--preset--gradient--ticker);
  overflow: hidden;
}
.pst-ticker-track {
  display: flex;
  gap: 56px;
  padding: 11px clamp(1.25rem, 4vw, 4rem);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.pst-ticker-track::-webkit-scrollbar { display: none; }
.pst-ticker-item {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pst-ticker-item::before { content: "\2605"; font-size: 9px; opacity: 0.85; }

/* ============================================================
   FOOTER
   ============================================================ */
.pst-footer {
  background: var(--wp--preset--color--navy-2);
  color: var(--wp--preset--color--mist);
  padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) clamp(1.25rem, 4vw, 4rem) 2.5rem;
}
.pst-footer a { color: var(--wp--preset--color--mist); text-decoration: none; }
.pst-footer a:hover { color: var(--wp--preset--color--orange-2); }
.pst-footer h4 {
  font-family: var(--wp--preset--font-family--display);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.pst-footer .pst-footer-logo { background: #fff; display: inline-block; padding: 12px 16px; border-radius: 10px; }
.pst-footer .pst-footer-logo img { height: 44px; }

/* ============================================================
   RESPONSIVE — the mockups are fixed 1440px; collapse gracefully
   ============================================================ */
@media (max-width: 1024px) {
  .pst-nav { justify-content: center; text-align: center; }
}

/* ============================================================
   v1.1.1 — width consistency + mobile overflow guard
   Cap header & footer to the same 1440 column as #pst-home so the
   bands line up with the page body (fixes "header wider than body").
   ============================================================ */
.pst-header,
.pst-footer { max-width: 1440px; margin-left: auto; margin-right: auto; }

/* Guard the bespoke homepage against any stray horizontal overflow on phones */
#pst-home { overflow-x: hidden; }

/* ============================================================
   v1.1.2 — header alignment fix + menu enhancement
   ============================================================ */

/* (a) WIDTH FIX — make the header/ticker/footer FULL-BLEED bands whose
   content sits in the same 1440 column as #pst-home. This supersedes the
   v1.1.1 max-width cap (which was making the header narrower than the body). */
.pst-header, .pst-ticker, .pst-nav, .pst-footer { max-width: none; margin-left: 0; margin-right: 0; }
.pst-nav,
.pst-ticker-track {
	padding-left:  max(1.25rem, calc((100% - 1440px) / 2));
	padding-right: max(1.25rem, calc((100% - 1440px) / 2));
}
.pst-footer {
	padding-left:  max(1.5rem, calc((100% - 1440px) / 2)) !important;
	padding-right: max(1.5rem, calc((100% - 1440px) / 2)) !important;
}

/* (b) MENU WOW — fix the white-on-white, add an animated orange underline,
   crisp uppercase tracking, clear active state, and a lift on the CTA. */
.pst-nav .wp-block-navigation,
.pst-nav .wp-block-navigation__container { gap: 36px; }

.pst-nav .wp-block-navigation-item__content,
.pst-nav .wp-block-navigation a {
	position: relative;
	color: #14233b !important;             /* dark on white — fixes the contrast */
	text-decoration: none !important;
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-bottom: 5px;
	transition: color 0.2s ease;
}

/* sliding underline */
.pst-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 2px; width: 0;
	background: var(--wp--preset--color--orange);
	transition: width 0.28s cubic-bezier(.4,0,.2,1);
}
.pst-nav .wp-block-navigation-item__content:hover,
.pst-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--orange) !important;
}
.pst-nav .wp-block-navigation-item__content:hover::after,
.pst-nav .current-menu-item .wp-block-navigation-item__content::after,
.pst-nav .current_page_item .wp-block-navigation-item__content::after { width: 100%; }

/* CTA button lift */
.pst-nav .wp-block-button__link {
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 18px rgba(232,90,26,0.25);
}
.pst-nav .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(232,90,26,0.4);
}

/* mobile hamburger / overlay menu links readable on the dark overlay */
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff !important;
	font-size: 1.1rem;
}
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* ============================================================
   v1.1.4 — full-width header/footer via native alignfull
   (set in the header & footer template parts). The homepage band is
   full-width too, so we only align the header/footer content gutter
   to the 64px section gutter (20px on mobile). No CSS breakout hacks,
   no body overflow guard — WordPress handles the edge-to-edge width.
   ============================================================ */
.pst-nav,
.pst-ticker-track,
.pst-footer {
	padding-left: 64px;
	padding-right: 64px;
}
@media (max-width: 820px) {
	.pst-nav,
	.pst-ticker-track,
	.pst-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ============================================================
   v1.3.1 — homepage/header width parity + mobile overlay fix
   ============================================================ */
/* Belt-and-suspenders: force header/footer to true full width
   using the same root-padding breakout WordPress uses for alignfull. */
.pst-header, .pst-footer {
	margin-left:  calc(var(--wp--style--root--padding-left, 0px) * -1);
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
	max-width: none;
}

/* Mobile hamburger overlay — navy panel, white readable links
   (fixes the white-on-white "no visible pages" issue). */
.pst-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy) !important;
	padding-top: 28px;
}
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff !important;
	font-size: 1.2rem;
	padding-bottom: 0;
}
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
/* hamburger (closed) dark on the white bar; close (X) white on navy */
.pst-nav .wp-block-navigation__responsive-container-open { color: #14233b; }
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }

/* ============================================================
   v1.3.2 — DETERMINISTIC width parity (supersedes earlier attempts)
   Root padding is now removed in theme.json, so every top-level block
   (header, #pst-home, footer, page mains) computes to full viewport
   width with NO breakout tricks. We re-add inner gutters explicitly.
   ============================================================ */
.pst-header,
.pst-footer {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}
/* page content gutters (homepage sections carry their own 64px) */
main.wp-block-group {
	padding-left: clamp(20px, 5vw, 64px);
	padding-right: clamp(20px, 5vw, 64px);
}

/* ============================================================
   v1.4.0 — bundled brand logo (header: dark logo on white bar;
   footer: white logo on navy). Paths are relative to this file
   (theme root), so they resolve regardless of site URL.
   ============================================================ */
.pst-head-logo {
	display: inline-block;
	width: 168px; height: 84px;
	background: url('assets/img/logo.png') left center / contain no-repeat;
	flex: none;
}
.pst-foot-logo {
	display: inline-block;
	width: 192px; height: 96px;
	background: url('assets/img/logo-white.png') left center / contain no-repeat;
	margin-bottom: 1rem;
	flex: none;
}
@media (max-width: 820px) {
	.pst-head-logo { width: 132px; height: 66px; }
}

/* ============================================================
   v1.7.1 — MOBILE MEGA-MENU with character
   Full-screen overlay: orange glow on navy gradient, oversized
   left-aligned numbered links (01–07), staggered entrance,
   tagline footer. Fixes the right-leaning / clipped alignment.
   ============================================================ */
.pst-nav .wp-block-navigation__responsive-container.is-menu-open {
	background:
		radial-gradient(125% 80% at 90% 6%, rgba(232,90,26,.22), transparent 46%),
		linear-gradient(165deg, #08111F 0%, #0D1C30 55%, #0a1a2e 100%) !important;
	padding: 0 !important;
}
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	padding: clamp(86px,15vh,150px) clamp(26px,8vw,72px) clamp(40px,8vh,80px);
}
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(12px,2.2vh,24px);
	width: 100%;
	counter-reset: pstm;
}
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(122,153,184,.14);
	padding-bottom: clamp(12px,2.2vh,22px);
	opacity: 0;
	transform: translateX(-16px);
	animation: pstMenuIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(1){ animation-delay:.04s }
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(2){ animation-delay:.09s }
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(3){ animation-delay:.14s }
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(4){ animation-delay:.19s }
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(5){ animation-delay:.24s }
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(6){ animation-delay:.29s }
.pst-nav .is-menu-open .wp-block-navigation-item:nth-child(7){ animation-delay:.34s }
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: baseline;
	gap: 16px;
	width: 100%;
	justify-content: flex-start;
	padding: 0;
	font-family: 'Archivo','Arial Black',Arial,sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.8rem,7.6vw,2.9rem);
	line-height: 1;
	letter-spacing: .005em;
	color: #EDE8DF;
	transition: color .2s ease, transform .2s ease;
}
.pst-nav .is-menu-open .wp-block-navigation-item__content::before {
	counter-increment: pstm;
	content: "0" counter(pstm);
	font-family: Inter, Arial, sans-serif;
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .2em;
	color: var(--wp--preset--color--orange);
	transform: translateY(-.55em);
	flex: none;
}
.pst-nav .is-menu-open .wp-block-navigation-item__content:hover,
.pst-nav .is-menu-open .wp-block-navigation-item__content:focus,
.pst-nav .is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: #fff;
	transform: translateX(6px);
}
.pst-nav .is-menu-open .current-menu-item .wp-block-navigation-item__content::before { color: #fff; }
.pst-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* tagline footer inside the overlay */
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::after {
	content: "Enhanced Energy Recovery · Gulf of Thailand";
	font-family: Inter, Arial, sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
	margin-top: clamp(30px,6vh,56px);
}

/* close (X) button */
.pst-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: clamp(20px,3vh,30px);
	right: clamp(22px,7vw,44px);
	width: 36px; height: 36px;
	color: #EDE8DF;
	transition: color .2s ease, transform .2s ease;
}
.pst-nav .is-menu-open .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--orange);
	transform: rotate(90deg);
}
@keyframes pstMenuIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.pst-nav .is-menu-open .wp-block-navigation-item { animation: none; opacity: 1; transform: none; }
	.pst-nav .is-menu-open .wp-block-navigation-item__content:hover { transform: none; }
}

/* ============================================================
   v1.9.1 — footer links (headings, lists, legal) — inherit
   colour, orange on hover, no underline.
   ============================================================ */
.pst-footer-list a,
.pst-footer h4 a,
.pst-footer-legal a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
.pst-footer-list a:hover,
.pst-footer-list a:focus-visible,
.pst-footer h4 a:hover,
.pst-footer h4 a:focus-visible,
.pst-footer-legal a:hover,
.pst-footer-legal a:focus-visible {
	color: #E85A1A;
}
.pst-footer-list li a { display: inline-block; }

/* ============================================================
   v1.10.0 — bundled hero rig photo. Path is relative to this
   file (theme root), so the homepage hero resolves it via the
   --hero-rig variable regardless of site URL or DB settings.
   ============================================================ */
#pst-home .hero-img {
	background: url('assets/img/hero-rig.webp') center center / cover no-repeat,
	            linear-gradient(135deg, #0a1a2a, #12304a 55%, #1d4a6b);
}