/* ==========================================================================
   Enjoy theme — mirrors the live enjoymassageliverpoolst.com (WordPress
   "Cinderella" theme): white header with a pink menu bar, heart-photo title
   band, Playfair Display headings over Arimo text, pink patterned bands.
   Loaded after theme-light.css; body has both .theme-light and .theme-enjoy.
   ========================================================================== */

.theme-enjoy {
  --em-pink: #c41d54;
  --em-pink-dark: #bc1c51;
  --em-band: #b2315a;
  --em-navy: #0a2045;
  --em-text: #555;
  --em-heading: #333;
  --em-cell: #e6a0b7;
  --em-shade: rgba(0, 0, 0, .22);
  --em-pattern: url('/uploads/floral-pattern.webp');
  --em-serif: 'Playfair Display', Georgia, serif;
  --em-sans: Arimo, Arial, Helvetica, sans-serif;
  --em-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='14' viewBox='0 0 66 14'%3E%3Cpath d='M1 9.5c14 2 30 2 44-1' fill='none' stroke='%23b9bfc8' stroke-width='1'/%3E%3Cpath d='M46 8.5c2-3 5-3 6-1M52 7.5l3-3.5 2 2.5 2.5-2 1 4-3 3h-4z' fill='none' stroke='%23b9bfc8' stroke-width='1'/%3E%3C/svg%3E");
  --em-flourish-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='14' viewBox='0 0 66 14'%3E%3Cpath d='M1 9.5c14 2 30 2 44-1' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M46 8.5c2-3 5-3 6-1M52 7.5l3-3.5 2 2.5 2.5-2 1 4-3 3h-4z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background: #fff;
  color: var(--em-text);
  font-family: var(--em-sans);
  font-size: 14px;
  line-height: 24px;
}

.theme-enjoy .container { max-width: 1200px; padding: 0 15px; }
.theme-enjoy main { padding: 0; background: #fff; }
.theme-enjoy a { color: #d26659; transition: color .2s ease; }
.theme-enjoy a:hover { color: var(--em-navy); }
.theme-enjoy h1, .theme-enjoy h2, .theme-enjoy h3, .theme-enjoy h4 {
  font-family: var(--em-serif); font-weight: 400; color: var(--em-heading); letter-spacing: 0; text-transform: none;
}
.theme-enjoy p { color: inherit; margin: 0 0 1.45em; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.em-header { position: relative; z-index: 20; background: #fff; }
.em-header-top { display: flex; align-items: center; justify-content: space-between; height: 120px; }
.em-logo img { display: block; height: 52px; width: auto; }
.em-header-info { display: flex; gap: 0; align-items: center; }
.em-header-info > * + * { margin-left: 75px; }
.em-header-info > .em-header-icons { margin-left: 40px; }
.em-icon-text { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 20px; color: var(--em-text); }
.em-icon-text svg { width: 30px; height: 30px; color: var(--em-pink); flex-shrink: 0; }
.em-menu-toggle { display: none; background: #efefef; border: 0; border-radius: 3px; width: 44px; height: 40px; padding: 9px; color: #333; cursor: pointer; }

.em-nav-wrap { position: absolute; left: 0; right: 0; top: 120px; }
.em-nav { display: flex; justify-content: space-between; align-items: stretch; background: var(--em-pink); min-height: 64px; }
.em-nav > ul { display: flex; list-style: none; margin: 0; padding: 0 18px; }
.em-nav li { position: relative; display: flex; align-items: center; }
.em-nav > ul > li + li::before { content: ''; width: 1px; height: 10px; background: rgba(255, 255, 255, .35); }
.em-nav ul a { display: block; padding: 22px 10px; margin: 0 15px; color: #fff; font-size: 13px; font-weight: 900; line-height: 20px; text-transform: uppercase; text-decoration: none; }
.em-nav li ul a { margin: 0; }
.em-nav > ul > li:first-child > a { margin-left: 0; }

.em-nav li ul { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: 0; background: var(--em-pink); }
.em-nav li:hover > ul { display: block; }
.em-nav li ul a { padding: 12px 20px; }
.em-nav-phone { display: flex; align-items: center; gap: 14px; width: 250px; padding: 0 20px 0 60px; box-sizing: border-box; background: rgba(255, 255, 255, .15); color: #fff !important; text-decoration: none; }
.em-nav-phone svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.em-nav-phone span { display: block; text-align: left; }
.em-nav-phone strong { display: block; font-size: 14px; font-weight: 400; line-height: 20px; }
.em-nav-phone small { display: block; font-size: 10px; opacity: .9; text-transform: none; }

/* Home: the menu bar sits above the banner instead of over it. */
.em-home .em-header { height: 184px; }

/* ── Title band (inner pages; also the shared .page-hero) ─────────────── */
.em-title,
.theme-enjoy .page-hero,
.theme-enjoy .page-hero.has-bg {
  background: var(--em-band) url('/uploads/hyuhghjy.webp') no-repeat 50% 0 / contain;
  min-height: 480px; padding: 213px 0 60px; margin: -15px 0 0; text-align: left; border: 0;
}
.em-title h1, .theme-enjoy .page-hero h1 { color: #fff; font-size: 36px; line-height: 1.3; margin: 0 0 22px; }
.theme-enjoy .page-hero p { color: #fff; max-width: 560px; }
.em-breadcrumbs { color: #fff; font-size: 15px; }
.em-breadcrumbs a, .em-breadcrumbs span { color: #fff; text-decoration: none; }
.em-breadcrumbs .em-sep { margin: 0 6px; }

/* ── Home banner ──────────────────────────────────────────────────────── */
.em-banner { background: #b1315b no-repeat 50% 0 / contain; height: 614px; display: flex; align-items: center; }
.em-banner-inner { width: 100%; }
.em-banner-logo { display: block; width: 440px; max-width: 45%; height: auto; margin: -40px 0 20px; }
.em-banner-title { color: #fff !important; font-family: var(--em-sans) !important; font-size: 22px; margin: 0; max-width: 45%; }

/* ── Sections (home page content blocks) ─────────────────────────────── */
.em-section { padding: 50px 0 63px; text-align: center; }
.theme-enjoy .em-section > * { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
.em-section > h2 { color: var(--em-navy); font-size: 30px; line-height: 1.4; margin-bottom: 37px; }
.em-section > h2::after { content: ''; display: block; width: 66px; height: 14px; margin: 18px auto 0; background: var(--em-flourish) no-repeat center; }
.em-section .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; align-items: start; }
.em-section .cols img { width: 100%; height: auto; display: block; }

.em-pink { background: var(--em-pink) var(--em-pattern) repeat 0 0 / 275px 275px; color: #fff; }
.em-pink > h2 { color: #fff; }
.em-pink > h2::after { background-image: var(--em-flourish-light); }
.em-pink p, .em-pink strong { color: #fff; }
.em-pattern-large { background-size: 900px 900px; }

/* Service icons: pink star with a pale circle behind. */
.em-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 54px 20px; margin-top: 50px; }
.em-icon p { margin: 0; }
.em-icon a { display: block; color: var(--em-heading); font-weight: 700; font-size: 18px; text-decoration: none; }
.em-icon a::before {
  content: ''; display: block; width: 60px; height: 54px; margin: 0 auto 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c41d54' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5L7 14.3l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") no-repeat 4px 0 / 46px 46px,
    radial-gradient(circle at 38px 32px, #fbe3eb 0 22px, transparent 23px);
}
.em-icon a::after { content: ''; display: block; width: 22px; height: 2px; background: var(--em-pink); margin: 14px auto 0; }

/* Call button (theme "buttonnumber"). */
.em-call p { margin: 1.8em 0 0; }
.theme-enjoy .em-call a, .theme-enjoy .em-btn {
  display: inline-block; min-width: 172px; padding: 13px 30px; line-height: 24px; background: var(--em-pink); color: #fff;
  font-size: 14px; text-align: center; text-decoration: none; border-radius: 2px;
}
.theme-enjoy .em-pink .em-call a { background: var(--em-shade); }


/* ── Masseuse cards ───────────────────────────────────────────────────── */
.theme-enjoy .masseuse-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0 0 40px; padding: 0; background: none; box-shadow: none; }
.theme-enjoy .masseuse-cards .col { text-align: left; }
.theme-enjoy .masseuse-cards p { margin: 0; }
.theme-enjoy .masseuse-cards img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; }
.theme-enjoy .masseuse-cards .heading-text { font-family: var(--em-sans); font-weight: 700; font-size: 18px; line-height: 20px; color: var(--em-heading); margin: 10px 0 9px; text-align: left; }
.theme-enjoy .masseuse-cards p:last-child a {
  display: block; padding: 12px; line-height: 20px; background: var(--em-pink); color: #fff; text-align: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 2px;
}
/* Home: cards run the full width of the pink band, names centred. */
.theme-enjoy .em-section > .em-wide { max-width: none; padding: 0; margin-top: 50px; }
.em-pink .masseuse-cards { margin-bottom: 55px; }
.theme-enjoy .em-pink .masseuse-cards .heading-text { color: #fff; text-align: center; }
.theme-enjoy .em-pink .masseuse-cards p:last-child a { background: #8d143d; }

/* ── Testimonials ─────────────────────────────────────────────────────── */
.em-testimonials { position: relative; }
.em-testimonial { display: none; }
.em-testimonial.is-active, .em-testimonials:not(:has(.em-dots)) .em-testimonial { display: block; }
.em-testimonial img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin: 0 auto; display: block; }
.em-testimonial p em { font-size: 15px; line-height: 1.5; }
.em-testimonial-name { font-size: 13px; text-transform: uppercase; color: #fff; }
.em-dots { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.em-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid #fff; background: transparent; cursor: pointer; opacity: .8; }
.em-dots button.is-active { background: #fff; opacity: 1; }

/* ── How to book (pink) + partner banners ────────────────────────────── */
.em-booking { text-align: left; padding: 70px 0 30px; }
.em-booking .cols { grid-template-columns: 7fr 4fr; gap: 110px; }
.em-booking h3 { color: #fff; font-size: 24px; margin: 0 0 28px; }
.em-booking p { color: #f6d3de; font-size: 13.5px; }
.em-booking p strong { color: #fff; }
.em-booking .col img { max-width: 340px; margin-bottom: 10px; }
.em-section .em-banners { margin-top: 50px; padding-bottom: 0; align-items: start; }
.em-banners img { width: auto !important; max-width: 100%; }
.em-banners a { text-decoration: none; text-align: center; }
.em-booking + * { margin-top: 0; }

/* ── Inner pages ──────────────────────────────────────────────────────── */
.em-page { padding: 60px 0 40px; }
.em-content h3 { font-size: 24px; color: var(--em-heading); margin: 0 0 20px; }
.em-content h3::after { content: ''; display: block; width: 22px; height: 2px; background: var(--em-pink); margin-top: 14px; }
.em-content .em-call { text-align: center; margin: 0 0 56px; }
.em-content .masseuse-cards { margin-bottom: 30px; }

/* Profile */
.em-profile { display: grid; grid-template-columns: 470px 1fr; gap: 30px; align-items: start; }
.em-profile-photo { display: block; }
.em-profile-photo img { display: block; width: 100%; height: auto; }
.em-profile-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); }
.em-profile-thumbs button { padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .2s ease; }
.em-profile-thumbs button.is-active, .em-profile-thumbs button:hover { opacity: 1; }
.em-profile-thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.em-profile-info > h3:first-child { margin-top: 6px; }
.em-profile-info table { border-collapse: separate; border-spacing: 2px; margin: 0 0 20px; width: auto; }
.em-profile-info td { background: var(--em-cell); color: #fff; padding: 6px; font-size: 14px; border: 0; vertical-align: middle; }
.em-profile-info tr:first-child td, .em-profile-info td:first-child { background: var(--em-pink); }
.em-related { margin-top: 40px; }
.em-related h2 { font-family: var(--em-sans); font-weight: 700; font-size: 21px; color: var(--em-navy); margin: 0 0 30px; }
.em-related h2::after { content: ''; display: block; width: 22px; height: 2px; background: var(--em-pink); margin-top: 14px; }

/* Shared light-theme pages (contact, text pages, blog) inside the enjoy shell. */
.theme-enjoy .rich-text h2, .theme-enjoy .rich-text h3 { font-family: var(--em-serif); color: var(--em-heading); }
.theme-enjoy .btn, .theme-enjoy button[type="submit"] { background: var(--em-pink); border-color: var(--em-pink); color: #fff; }

/* ── Booking strip, footer widgets and copyright bar ─────────────────── */
.theme-enjoy .booking-strip { background: #fff; border-top: 1px solid #eee; padding: 34px 0; }
.theme-enjoy .booking-strip p { color: var(--em-heading); font-family: var(--em-serif); font-size: 20px; margin: 0 0 14px; }
.theme-enjoy .booking-strip-btn { background: var(--em-pink); color: #fff; border-radius: 2px; font-size: 14px; font-weight: 400; padding: 14px 26px; }
.theme-enjoy .booking-strip-btn:hover { color: #fff; }

.theme-enjoy .site-footer { background: var(--em-pink-dark) var(--em-pattern) repeat 0 0 / 275px 275px; color: #f3c9d6; padding: 0; border: 0; position: relative; }
.theme-enjoy .site-footer::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); pointer-events: none; }
.theme-enjoy .site-footer .container { position: relative; }
.theme-enjoy .footer-grid { padding: 50px 0 20px; gap: 40px; }
.theme-enjoy .site-footer h3 { color: #fff; font-family: var(--em-serif); font-size: 20px; text-transform: none; letter-spacing: 0; }
.theme-enjoy .site-footer .footer-col p, .theme-enjoy .site-footer .footer-col a, .theme-enjoy .footer-label { color: #f3c9d6; }
.theme-enjoy .site-footer .footer-col a:hover { color: #fff; }
.theme-enjoy .site-footer .footer-col img { filter: brightness(0) invert(1); }
.theme-enjoy .footer-bottom { border-top: 0; min-height: 60px; display: flex; align-items: center; padding: 0; margin: 0; }
.theme-enjoy .footer-grid + .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.theme-enjoy .footer-bottom p { margin: 0; color: #f4a5c3; font-size: 14px; text-align: left; }

/* Incall ribbon in the theme's pink. */
.theme-enjoy .incall-ribbon { background: var(--em-pink-dark); border-bottom: 0; box-shadow: none; color: #fff; }
.theme-enjoy .incall-ribbon-badge, .theme-enjoy .incall-ribbon-note { color: #ffd6e2; }
.theme-enjoy .incall-ribbon-sep { color: rgba(255, 255, 255, .5); }

/* Header WhatsApp / email icons. */
.em-header-icons { display: flex; gap: 8px; align-items: center; }
.em-header-icons a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fbe3eb; color: var(--em-pink); }
.em-header-icons a:hover { background: var(--em-pink); color: #fff; }
.em-header-icons svg { width: 18px; height: 18px; }

/* Profile extras: actions, stats, chips, reviews. */
.em-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-enjoy .em-btn-whatsapp { background: #25d366; }
.em-profile-info table.em-stats td { background: #f7f7f7; color: var(--em-text); }
.em-profile-info table.em-stats td:first-child { background: var(--em-pink); color: #fff; width: 140px; }
.em-profile-info table.em-stats:empty { display: none; }
.em-chips { margin-top: 24px; }
.em-chips h4 { font-size: 18px; margin: 0 0 12px; }
.em-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.em-chips li a, .em-chips li span { display: inline-block; padding: 7px 14px; border: 1px solid var(--em-pink); border-radius: 2px; color: var(--em-pink); font-size: 13px; text-decoration: none; }
.em-chips li a:hover { background: var(--em-pink); color: #fff; }
.em-reviews { margin-top: 50px; max-width: 1100px; }
.em-reviews h2, .em-review-form h4 { font-family: var(--em-sans); font-weight: 700; color: var(--em-navy); }
.em-reviews h2 { font-size: 21px; margin: 0 0 24px; }
.em-reviews h2::after { content: ''; display: block; width: 22px; height: 2px; background: var(--em-pink); margin-top: 14px; }
.em-review { border-bottom: 1px solid #eee; padding: 0 0 14px; margin: 0 0 16px; }
.em-review-head { display: flex; justify-content: space-between; color: var(--em-heading); }
.em-stars { color: var(--em-pink); }
.em-review p { margin: 6px 0; }
.em-review small, .em-muted { color: #999; }
.em-review-form { display: grid; gap: 10px; max-width: 520px; margin-top: 20px; padding: 22px; background: #f9f9f9; }
.em-review-form h4 { margin: 0 0 4px; font-size: 16px; }
.em-review-form input, .em-review-form select, .em-review-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 2px; background: #fff; color: var(--em-text); font: inherit; }
.em-review-form .em-btn { border: 0; cursor: pointer; justify-self: start; }
.em-review-status { font-size: 13px; color: var(--em-pink); }
.em-review-status.is-error { color: #c00; }

/* Home: latest blog posts (shown only when the CMS has published posts). */
.em-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; text-align: left; }
.em-posts img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 12px; }
.em-posts h3 { font-size: 18px; margin: 0 0 8px; }
.em-posts h3 a { color: var(--em-heading); text-decoration: none; }


/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .em-header-info .em-icon-text { display: none; }
  .em-header-info { margin-left: auto; margin-right: 12px; gap: 0; }
  .em-menu-toggle { display: flex; align-items: center; justify-content: center; }
  .em-menu-toggle svg { width: 24px; height: 24px; }
  .em-menu-toggle .em-icon-close, .em-menu-toggle[aria-expanded="true"] .em-icon-open { display: none; }
  .em-menu-toggle[aria-expanded="true"] .em-icon-close { display: block; }
  .em-header-top { height: 80px; }
  .em-logo img { height: 42px; }
  .theme-enjoy .em-nav-wrap { position: static; padding: 0; max-width: none; }
  .em-home .em-header { height: auto; }
  .em-nav { display: none; flex-direction: column; }
  .em-nav.open { display: flex; }
  .em-nav > ul { flex-direction: column; padding: 0; }
  .em-nav > ul > li + li::before { display: none; }
  .em-nav li { display: block; border-top: 1px solid rgba(255, 255, 255, .15); }
  .em-nav ul a, .em-nav > ul > li:first-child > a { padding: 15px 20px; margin: 0; font-size: 13px; }
  .em-nav li ul { position: static; display: block; min-width: 0; background: rgba(0, 0, 0, .08); }
  .em-nav li ul a { padding-left: 36px; font-weight: 700; }
  .em-nav-phone { width: auto; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .15); }
  .em-nav-phone strong { font-size: 15px; }
  .em-nav-phone small { font-size: 11px; }
  .em-title, .theme-enjoy .page-hero, .theme-enjoy .page-hero.has-bg { min-height: 0; padding: 70px 0 60px; background-size: cover; background-position: 70% 0; }
  .em-banner { height: 56vw; min-height: 240px; background-size: cover; }
  .em-icons { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .theme-enjoy .masseuse-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .theme-enjoy .em-section > .em-wide { padding: 0 15px; }
  .em-profile { grid-template-columns: 1fr; }
  .em-booking .cols { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .em-section { padding: 40px 0 45px; }
  .em-section > h2 { font-size: 26px; }
  .em-section .cols { grid-template-columns: 1fr; }
  .em-banner-logo, .em-banner-title { max-width: 60%; }
  .em-banner-title { font-size: 16px; }
  .em-title h1, .theme-enjoy .page-hero h1 { font-size: 30px; }
  .em-profile-info table { width: 100%; }
        }

/* ── Hover states (as live: text links go navy; menu, buttons, cards, breadcrumbs and icons don't change) ── */
.theme-enjoy .em-nav a:hover, .theme-enjoy .em-nav a:focus,
.theme-enjoy .em-breadcrumbs a:hover,
.theme-enjoy .em-call a:hover, .theme-enjoy a.em-btn:hover, .theme-enjoy .em-btn:hover,
.theme-enjoy .masseuse-cards p:last-child a:hover { color: #fff; }
.theme-enjoy .em-icon a:hover, .theme-enjoy .em-logo:hover { color: var(--em-heading); }
.theme-enjoy .em-pink .em-call a:hover { background: var(--em-shade); }
.theme-enjoy .em-dots button:hover { opacity: .8; }
.theme-enjoy .em-dots button.is-active:hover { opacity: 1; }

.theme-enjoy .masseuse-cards p:last-child a:hover { background: var(--em-pink); }
.theme-enjoy .em-pink .masseuse-cards p:last-child a:hover { background: #8d143d; }