/* Phuket Charter — Home review page.
 * Everything layout/typography/colour related lives in the Elementor settings
 * of each element. This file only covers what Elementor cannot express:
 * backdrop blur, decorative pseudo-elements, the mobile menu toggle state,
 * an aspect-ratio lock for the route posters, admin-bar offset in previews
 * and reduced-motion safety. Scoped to the page root class ".pc-home" (class
 * specificity, so any Elementor setting wins over these rules). */

.pc-home { -webkit-font-smoothing: antialiased; }

/* Fixed header glass effect (not available as an Elementor setting). */
.pc-home .pc-header { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
@media (max-width: 1024px) {
  .pc-home .pc-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(2, 19, 31, 0.95); }
}
body.admin-bar .pc-home .pc-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .pc-home .pc-header { top: 46px; } }

/* Mobile/tablet menu: Elementor hides #pc-home-menu below 1025px; home.js adds .pc-menu-open. */
@media (max-width: 1024px) {
  /* The header is position:fixed; make it the containing block so the open menu can hang
   * below it as a full-width, solid dropdown instead of wrapping over the hero copy. */
  .pc-home .pc-header > .e-con { position: static; }
  .pc-home #pc-home-menu.pc-menu-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; width: auto; flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 24px 26px; background: #02131f; border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35); max-height: calc(100vh - 100%); overflow-y: auto; }
  .pc-home #pc-home-menu.pc-menu-open > .elementor-element { width: auto; }
}

/* Decorative ambient glow behind the manifesto (desktop only, pointer-safe). */
@media (min-width: 1025px) {
  .pc-home .pc-manifesto::before,
  .pc-home .pc-manifesto::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: 0.18; }
  .pc-home .pc-manifesto::before { width: 420px; height: 420px; background: #fff; right: -180px; top: 90px; }
  .pc-home .pc-manifesto::after { width: 300px; height: 300px; background: #2a78a6; left: -180px; bottom: 100px; }
}

/* Thin highlight on top of the experience panel and the circle motif in pillars. */
.pc-home .pc-panel::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); opacity: 0.55; pointer-events: none; }
.pc-home .pc-pillar::after { content: ""; position: absolute; width: 135px; height: 135px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50%; right: -52px; bottom: -55px; pointer-events: none; }

/* Route posters keep the approved 4:5 crop at every width. */
.pc-home .pc-route-img img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; }

/* Gradient layers must never intercept hover/click on the photos beneath them. */
.pc-home .pc-shade,
.pc-home .pc-overlay { pointer-events: none; }

/* Keyboard focus. */
.pc-home a:focus-visible,
.pc-home button:focus-visible,
.pc-home input:focus-visible,
.pc-home select:focus-visible,
.pc-home textarea:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Enquiry form (custom widget). Colours are exposed as widget style controls. */
.pc-home .pc-enquiry-widget { width: 100%; }
.pc-home .pchr-enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; font-size: 13px; font-family: inherit; }
.pc-home .pchr-enquiry .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pc-home .pchr-enquiry .field.full { grid-column: 1 / -1; }
.pc-home .pchr-enquiry label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.54); }
.pc-home .pchr-enquiry input,
.pc-home .pchr-enquiry select,
.pc-home .pchr-enquiry textarea { width: 100%; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 13px; background: rgba(255, 255, 255, 0.03); color: #fff; padding: 14px 15px; font: inherit; outline: none; }
.pc-home .pchr-enquiry input::placeholder,
.pc-home .pchr-enquiry textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.pc-home .pchr-enquiry select option { background: #031a2b; color: #fff; }
.pc-home .pchr-enquiry textarea { height: 112px; resize: vertical; }
.pc-home .pchr-enquiry input:focus,
.pc-home .pchr-enquiry select:focus,
.pc-home .pchr-enquiry textarea:focus { border-color: rgba(255, 255, 255, 0.54); }
.pc-home .pchr-enquiry button { grid-column: 1 / -1; width: 100%; margin-top: 4px; min-height: 50px; padding: 14px 24px; border-radius: 999px; border: 1px solid #fff; background: #fff; color: #02131f; font: 600 10px/1.2 inherit; font-family: inherit; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pc-home .pchr-enquiry button:hover { transform: translateY(-2px); box-shadow: 0 15px 55px rgba(255, 255, 255, 0.13); }
.pc-home .pchr-form-feedback { grid-column: 1 / -1; margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.72); min-height: 1em; }
@media (max-width: 767px) {
  .pc-home .pchr-enquiry { grid-template-columns: 1fr; }
  .pc-home .pchr-enquiry .field.full,
  .pc-home .pchr-enquiry button,
  .pc-home .pchr-form-feedback { grid-column: auto; }
}

/* Scroll reveal (approved HTML: .reveal → .in). Elements carry the class pc-reveal in their
 * Elementor "CSS Classes" field; home.js adds pc-in when they enter the viewport. */
html.pc-js body:not(.elementor-editor-active) .pc-home .pc-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s ease, transform 0.85s ease; will-change: opacity, transform; }
html.pc-js body:not(.elementor-editor-active) .pc-home .pc-reveal.pc-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .pc-home *, .pc-home *::before, .pc-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pc-home .pc-reveal { opacity: 1 !important; transform: none !important; }
}