/* ============================================================
   Royal Phuket Marina — Global component & layout layer
   Bridges the design-system tokens to the Elementor build.
   Loaded after rpm-tokens.css. (2026.07 rebuild)
   ============================================================ */

/* ---- Design fonts applied to Elementor headings ---- */
.elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); }
.rpm-eyebrow .elementor-heading-title { font-family: var(--font-brand) !important; }

/* ---- Signature eyebrow (kicker) ---- */
.rpm-eyebrow, .rpm-eyebrow .elementor-heading-title {
  font-family: var(--font-brand); font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-accent); display: inline-block;
}
.rpm-eyebrow--ondark, .rpm-eyebrow--on-dark { color: var(--rpm-brass-300); }
.rpm-eyebrow--muted { color: var(--text-muted); }
.rpm-rule--accent { width: 56px; border: 0; border-top: 2px solid var(--accent); }

/* ============================================================
   Anchor / sub-nav navigation (fixes non-working in-page tabs)
   ============================================================ */
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
[id] { scroll-margin-top: 140px; }

.rpm-subnav { position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.rpm-subnav .elementor-heading-title { cursor: pointer; transition: color var(--dur) var(--ease); }
.rpm-subnav .elementor-heading-title:hover,
.rpm-subnav .elementor-heading-title a:hover { color: var(--accent-strong); }

/* ============================================================
   Flex-grid safety net — equal-width cards in a row
   ============================================================ */
@media (min-width: 768px) {
  .e-con > .e-con-inner > .rpm-hover-card,
  .e-con > .rpm-hover-card { min-width: 0; }
}

/* ============================================================
   Segment / product cards ("Explore the Marina" boxes)
   ============================================================ */
.rpm-segment { position: relative; min-height: 380px; overflow: hidden; display: block; border-radius: var(--radius-sm); }
.rpm-segment__img, .rpm-segment .elementor-widget-image img { transition: transform 700ms var(--ease-out); }
.rpm-segment:hover .rpm-segment__img,
.rpm-segment:hover .elementor-widget-image img { transform: scale(1.05); }
.rpm-segment__wash { position: absolute; inset: 0; background: var(--wash-navy); pointer-events: none; }

/* Generic image-zoom-on-hover for any card carrying .rpm-zoom */
.rpm-zoom, .rpm-zoom .elementor-widget-container, .rpm-zoom figure,
.rpm-zoom .elementor-widget-image { overflow: hidden; border-radius: var(--radius-sm); }
.rpm-zoom img { display: block; transition: transform 700ms var(--ease-out); }
.rpm-hover-card:hover .rpm-zoom img, .rpm-zoom:hover img { transform: scale(1.05); }

/* Hover lift for hairline cards */
.rpm-hover-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rpm-hover-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

/* ============================================================
   Spec / rate tables
   ============================================================ */
.rpm-spec table { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--border); font-family: var(--font-sans); font-size: 14.5px; }
.rpm-spec thead th { background: var(--brand); color: #fff; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; font-weight: 500; padding: 14px 18px; text-align: left; }
.rpm-spec tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text-body); }
.rpm-spec tbody tr:nth-child(even) { background: var(--color-bg); }
.rpm-spec tbody td:first-child { font-family: var(--font-display-italic); font-weight: 700; color: var(--text-heading); }

/* ============================================================
   Image wash overlay utilities (hero legibility)
   ============================================================ */
.rpm-wash-navy, .rpm-wash-side, .rpm-wash-navy-strong { position: relative; }
.rpm-wash-navy::after, .rpm-wash-side::after, .rpm-wash-navy-strong::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rpm-wash-navy::after { background: var(--wash-navy); }
.rpm-wash-navy-strong::after { background: var(--wash-navy-strong); }
.rpm-wash-side::after { background: var(--wash-side); }

/* Background-image photo cards — hover zoom (Explore the Marina segments) */
.rpm-bg-zoom { background-size: cover; background-position: center; overflow: hidden;
  transition: background-size 800ms var(--ease-out), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rpm-bg-zoom:hover { background-size: 107%; }

/* ================= Content pages (info / utility / contact) ================= */
.rpm-page-hero{position:relative;background:var(--brand-dark);color:#fff;padding:clamp(5rem,4rem+6vw,8rem) 0 clamp(3rem,2rem+4vw,5rem);overflow:hidden;background-size:cover;background-position:center;}
.rpm-page-hero.has-img::after{content:"";position:absolute;inset:0;background:var(--wash-navy-strong);}
.rpm-page-hero>.rpm-container{position:relative;z-index:2;}
.rpm-page-hero .rpm-eyebrow{color:var(--rpm-brass-300);}
.rpm-page-hero h1{color:#fff;font-size:var(--fs-display-2);line-height:var(--lh-display);letter-spacing:var(--tracking-tight);margin:.35em 0 .3em;}
.rpm-page-hero .lead{color:var(--text-on-dark);max-width:640px;font-size:var(--fs-lead);}
.rpm-crumb{font-family:var(--font-brand);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rpm-brass-300);margin-bottom:1rem;}
.rpm-crumb a{color:var(--text-on-dark-mut);}.rpm-crumb a:hover{color:#fff;}
/* .rpm-section-pad{padding:var(--section-y) 0;} */
/*JaCkie*/
.rpm-section-pad {
  /* Mobile First Default (375px and below) */
  padding: 33px 25px; 
}

/* Tablet Transition (From 376px up to 768px) */
@media (min-width: 376px) {
  .rpm-section-pad {
    /* Top/Bottom scales dynamically up to 66px. Left/Right scales down to 12px. */
    padding: clamp(2.0625rem, 0.094rem + 8.4vw, 4.125rem) clamp(1.25rem, 2.339rem - 4.62vw, 1.5625rem);
  }
}

/* Laptop Transition (From 769px and above) */
@media (min-width: 769px) {
  .rpm-section-pad {
    /* Top/Bottom stays locked at 66px. Left/Right scales back up to 25px. */
    padding: 66px clamp(0.75rem, -0.47rem + 2.54vw, 1.5625rem);
  }
}

.rpm-prose{max-width:var(--container-text);margin-inline:auto;}
.rpm-prose h2{font-size:var(--fs-h2);margin:1.4em 0 .5em;}
.rpm-prose h3{font-size:var(--fs-h3);margin:1.2em 0 .4em;}
.rpm-lead{font-size:var(--fs-lead);color:var(--text-heading);}
.rpm-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.rpm-info-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.75rem;}
.rpm-info-card h3{font-size:var(--fs-h4);margin:0 0 .5rem;color:var(--text-heading);}
.rpm-cta-band{background:var(--brand);color:#fff;padding:clamp(3rem,2rem+4vw,5rem) 0;text-align:center;}
.rpm-cta-band h2{color:#fff;}.rpm-cta-band p{color:var(--text-on-dark);max-width:560px;margin:.5rem auto 1.5rem;}
.rpm-btn{display:inline-block;font-family:var(--font-brand);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:14px 30px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;transition:background var(--dur) var(--ease);}
.rpm-btn:hover{background:var(--accent-strong);color:#fff;}
.rpm-btn--outline{background:transparent;border:1px solid rgba(255,255,255,.55);}
.rpm-btn--navy{background:var(--brand);}.rpm-btn--navy:hover{background:var(--brand-dark);}
.rpm-contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:start;}
.rpm-contact-item{margin-bottom:1.25rem;}
.rpm-contact-item .lbl{font-family:var(--font-brand);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:.2rem;}
.rpm-two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.rpm-figure{border-radius:var(--radius-sm);overflow:hidden;}.rpm-figure img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:820px){.rpm-contact-grid,.rpm-two-col{grid-template-columns:1fr;gap:2rem;}}

/* ---- Sub-nav item spacing (prevent overlap) ---- */
.rpm-subnav { flex-wrap:wrap; gap:6px 26px !important; }
.rpm-subnav .elementor-widget-heading { margin:0 !important; width:auto !important; }
.rpm-subnav .elementor-heading-title { white-space:nowrap; }

.rpm-contact-2col{flex-wrap:wrap;}
.rpm-contact-2col>.e-con{border-top:1px solid rgba(255,255,255,.16);padding-top:14px;}
@media(max-width:600px){.rpm-contact-2col>.e-con{width:100%!important;}}

/* Sub-nav: stop items shrinking below text width (overlap fix) */
.rpm-subnav .elementor-widget-heading{flex:0 0 auto !important;width:auto !important;}
.rpm-subnav .e-con-inner{flex-wrap:wrap;row-gap:6px;}

/* Contacts 2-col: force side-by-side within the narrow info column */
.rpm-contact-2col{flex-wrap:nowrap !important;gap:22px !important;}
.rpm-contact-2col>.e-con,.rpm-contact-2col>.elementor-element{flex:1 1 0 !important;width:auto !important;min-width:0 !important;}
@media(max-width:640px){.rpm-contact-2col{flex-wrap:wrap !important;}.rpm-contact-2col>.e-con,.rpm-contact-2col>.elementor-element{flex:1 1 100% !important;}}

/* ============================================================
   Sticky header (whole header overlays content on scroll)
   ============================================================ */
header.elementor-location-header{position:sticky;top:0;z-index:999;box-shadow:0 1px 0 rgba(12,31,56,.06),0 10px 30px -24px rgba(12,31,56,.45);}
body.admin-bar header.elementor-location-header{top:32px;}
@media(max-width:782px){body.admin-bar header.elementor-location-header{top:46px;}}

/* ============================================================
   Explore the Marina segment cards — wash + hover copy reveal
   ============================================================ */
.rpm-bg-zoom{position:relative;}
.rpm-bg-zoom::after{content:"";position:absolute;inset:0;background:var(--wash-navy);z-index:0;pointer-events:none;transition:opacity var(--dur) var(--ease);}
.rpm-bg-zoom>*{position:relative;z-index:1;}
.rpm-bg-zoom .elementor-widget-text-editor{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .45s var(--ease-out),margin .5s var(--ease-out);}
.rpm-bg-zoom:hover .elementor-widget-text-editor{max-height:180px;opacity:1;}

/* Photo gallery grid */
.rpm-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.rpm-gallery__item{position:relative;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:4/3;display:block;background:var(--rpm-navy-100);}
.rpm-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out);}
.rpm-gallery__item:hover img{transform:scale(1.06);}
@media(max-width:1024px){.rpm-gallery{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.rpm-gallery{grid-template-columns:repeat(2,1fr);gap:10px;}}

/* Neutralise wpautop <br> inside gallery/grids */
.rpm-gallery > br, .rpm-info-grid > br, .rpm-contact-2col > br{display:none !important;}
.rpm-gallery{grid-auto-flow:row dense;}
.rpm-gallery > .rpm-gallery__item{min-width:0;}

/* Photo gallery as native Elementor image widgets in a grid */
.rpm-gallery{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:14px !important;}
.rpm-gallery > .elementor-element{min-width:0;width:auto !important;}
.rpm-gallery .elementor-widget-image{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-sm);}
.rpm-gallery .elementor-widget-image .elementor-widget-container,.rpm-gallery .elementor-widget-image figure,.rpm-gallery .elementor-widget-image a{height:100%;margin:0;}
.rpm-gallery .elementor-widget-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out);}
.rpm-gallery .elementor-widget-image:hover img{transform:scale(1.06);}
@media(max-width:1024px){.rpm-gallery{grid-template-columns:repeat(3,1fr) !important;}}
@media(max-width:700px){.rpm-gallery{grid-template-columns:repeat(2,1fr) !important;}}

/* ============================================================
   Homepage: transparent header over hero -> solid on scroll
   ============================================================ */
body.home header.elementor-location-header{position:fixed;top:0;left:0;right:0;width:100%;background:transparent !important;box-shadow:none !important;transition:background .35s var(--ease),box-shadow .35s var(--ease);}
body.home.admin-bar header.elementor-location-header{top:32px;}
@media(max-width:782px){body.home.admin-bar header.elementor-location-header{top:46px;}}
/* inner bars transparent while at top */
body.home header.elementor-location-header > .e-con{background-color:transparent !important;transition:background-color .35s var(--ease);}
body.home header.elementor-location-header > .e-con:first-child{border-bottom:1px solid rgba(255,255,255,.18);}
/* text + icons white while transparent */
body.home header.elementor-location-header:not(.rpm-header-solid) .elementor-heading-title,
body.home header.elementor-location-header:not(.rpm-header-solid) .elementor-heading-title a,
body.home header.elementor-location-header:not(.rpm-header-solid) a,
body.home header.elementor-location-header:not(.rpm-header-solid) .e-n-menu-title-text,
body.home header.elementor-location-header:not(.rpm-header-solid) .gt_switcher_wrapper,
body.home header.elementor-location-header:not(.rpm-header-solid) .elementor-widget-text-editor{color:#fff !important;}
body.home header.elementor-location-header:not(.rpm-header-solid) svg{fill:#fff !important;color:#fff !important;}
/* logo -> white while transparent */
body.home header.elementor-location-header:not(.rpm-header-solid) .elementor-widget-image img{filter:brightness(0) invert(1);transition:filter .35s var(--ease);}
/* solid state */
body.home header.elementor-location-header.rpm-header-solid{background:#fff !important;box-shadow:0 1px 0 rgba(12,31,56,.06),0 10px 30px -24px rgba(12,31,56,.45) !important;}
body.home header.elementor-location-header.rpm-header-solid > .e-con:first-child{background-color:#0C1F38 !important;border-bottom:0;}
/* keep dropdown panels readable in both states */
body.home header.elementor-location-header .e-n-menu-content{background:#fff !important;}
body.home header.elementor-location-header .e-n-menu-content .elementor-heading-title,
body.home header.elementor-location-header .e-n-menu-content a{color:var(--text-heading) !important;}
body.home header.elementor-location-header .e-n-menu-content .elementor-widget-image img{filter:none !important;}

/* Home transparent header: subtle top scrim so white text stays legible on any hero */
body.home header.elementor-location-header:not(.rpm-header-solid){background:linear-gradient(180deg,rgba(12,31,56,.55) 0%,rgba(12,31,56,.28) 55%,rgba(12,31,56,0) 100%) !important;}
/* language switcher: transparent while header is transparent
body.home header.elementor-location-header:not(.rpm-header-solid) .gtranslate_wrapper,
body.home header.elementor-location-header:not(.rpm-header-solid) .gtranslate_wrapper *,
body.home header.elementor-location-header:not(.rpm-header-solid) .gt_switcher_wrapper,
body.home header.elementor-location-header:not(.rpm-header-solid) select{background:transparent; color:#fff !important; border:none; box-shadow:none !important; margin-right:4px;}
 

body.home header.elementor-location-header select{border:none;}
 */

/* FIX: keep mega-menu panel content dark even when home header is transparent */
body.home header.elementor-location-header:not(.rpm-header-solid) .e-n-menu-content .elementor-widget-text-editor,
body.home header.elementor-location-header:not(.rpm-header-solid) .e-n-menu-content .elementor-widget-text-editor *,
body.home header.elementor-location-header:not(.rpm-header-solid) .e-n-menu-content p{color:var(--text-body) !important;}
body.home header.elementor-location-header:not(.rpm-header-solid) .e-n-menu-content svg{fill:currentColor !important;color:inherit !important;}

/* ===== Mega-menu: grouped columns ===== */
.rpm-mm-group-title .elementor-heading-title{font-family:var(--font-brand);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);}
.rpm-mm-group{border-left:1px solid var(--border);padding-left:26px;}
@media(max-width:1024px){.rpm-mm-group{border-left:0;padding-left:0;}}
.rpm-mm-intro .elementor-widget-text-editor{max-width:340px;}

/* ===== Language switcher: borderless, nav-matching (appended below manual edits) ===== */
header.elementor-location-header .gtranslate_wrapper {
	margin-right:9px;
}
header.elementor-location-header .gtranslate_wrapper select.gt_selector,
header.elementor-location-header select{
	border:0 !important;
	outline:0; box-shadow:none !important;
  background-color:transparent;
  font-family:var(--font-brand); font-size:12.5px; font-weight:500; letter-spacing:.06em;
  color:var(--text-heading);
  padding:9px 20px 9px 2px; margin:0; cursor:pointer; line-height:1.4;
	text-align-last: right;
	text-align: right;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23122A4A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
}
header.elementor-location-header select:focus,
header.elementor-location-header select:focus-visible{outline:0; box-shadow:none !important;}
header.elementor-location-header select:hover{color:var(--accent-strong);}

/* Style the open list item elements*/
body.home header.elementor-location-header:not(.rpm-header-solid) select{color:#FFF; background-color:transparent;}
body.home header.elementor-location-header:not(.rpm-header-solid) .gtranslate_wrapper select.gt_selector option {
	color: #18355E !important;
	padding-right: 20px !important;
}



/* white chevron while the home header is transparent (text colour handled above) */
body.home header.elementor-location-header:not(.rpm-header-solid) select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 2px center !important;
}