/*
Theme Name: Moana Sands
Theme URI: https://manavastudio.com/
Author: Manava Studio
Author URI: https://manavastudio.com/
Description: Custom theme for Moana Sands Group, Rarotonga. A faithful replica of the moanasands.com design, built to be fully editable with Elementor. Includes a dedicated Theme Settings panel for logo, booking (SiteMinder) links, contact details, social links and footer.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moana-sands
*/

/* ==========================================================================
   Base
   ========================================================================== */
body {
    font-family: 'Raleway', sans-serif;
    color: #222222;
    background-color: #ffffff;
    overflow-x: hidden;
}
a { color: #3D92C1; text-decoration: none; }
a:hover { color: inherit; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 { text-transform: uppercase; font-family: 'Raleway', sans-serif; color: #222222; }
h3 { font-weight: 700; }
h5 { font-size: 15px; }

/* Make Elementor widgets inherit the theme look (Raleway, dark headings)
   instead of Elementor's default blue scheme. Explicit per-widget colours
   set in the editor still win (they output more specific rules). */
body .elementor-widget-heading .elementor-heading-title { color: inherit; font-family: 'Raleway', sans-serif; }
body .elementor-widget-text-editor { font-family: 'Raleway', sans-serif; color: #222222; font-size: 14px; }
/* Slightly larger body copy on desktop */
@media (min-width: 1025px) {
    body .elementor-widget-text-editor { font-size: 16px; }
}
body .elementor-widget-text-editor a { color: #3D92C1; }

/* Dining page mini carousels - 270px high, cropped (original) */
.ms-mini-carousel .swiper-slide img,
.ms-mini-carousel .elementor-carousel-image { height: 270px; object-fit: cover; width: 100%; }

.ms-container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.btn { border-radius: 0; }

/* Buttons - exact palette from the original site:
   .sectionb .btn            #E8D69F beige, black text
   .sectionb .btn.readmore   #E8D69F beige, #3D92C1 blue text, uppercase
   Book Now (inline style)   #67C8CA teal, white text
   .sectionc .btn (View More)#67C8CA teal, black text */
.ms-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 15px;
    background-color: #E8D69F;
    color: #000000 !important;
    border: 1px solid #E8D69F;
    border-radius: 0;
    text-decoration: none;
    transition: background-color .2s, color .2s;
    cursor: pointer;
}
.ms-btn:hover { background-color: #d9c47e; border-color: #d9c47e; color: #000 !important; }

.ms-btn-readmore { color: #3D92C1 !important; text-transform: uppercase; }
.ms-btn-readmore:hover { color: #3D92C1 !important; }

/* Elementor puts custom classes on the widget WRAPPER, not the button itself.
   Neutralise the wrapper (the anchor is styled by its widget settings) and
   re-apply the hover colours to the inner .elementor-button. */
div.elementor-widget-button.ms-btn,
div.elementor-widget-button.ms-btn:hover {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: block;
    height: auto;
    line-height: inherit;
}
.elementor-widget-button.ms-btn .elementor-button { border-radius: 0; transition: background-color .2s, color .2s; }
.elementor-widget-button.ms-btn .elementor-button:hover { background-color: #d9c47e; color: #000; }
.elementor-widget-button.ms-btn-book .elementor-button:hover { background-color: #A6C0C5; color: #fff; }
.elementor-widget-button.ms-btn-readmore .elementor-button { text-transform: uppercase; }
.elementor-widget-button.ms-btn-readmore .elementor-button:hover { background-color: #d9c47e; color: #3D92C1; }
.elementor-widget-button.ms-btn-view .elementor-button:hover { background-color: #55b7b9; color: #000; }

.ms-btn-book {
    background-color: #67C8CA;
    border-color: #67C8CA;
    color: #ffffff !important;
    font-size: 16px;
}
.ms-btn-book:hover { background-color: #A6C0C5; border-color: #A6C0C5; color: #fff !important; }

.ms-btn-view {
    background-color: #67C8CA;
    border-color: #67C8CA;
    color: #000000 !important;
}
.ms-btn-view:hover { background-color: #55b7b9; border-color: #55b7b9; }

/* Home-page "Book Your Stay" band (Elementor section under the welcome video) */
.ms-booking-band {
    border-top: 3px solid #67C8CA;
    border-bottom: 3px solid #67C8CA;
}
.ms-booking-band .elementor-widget-button .elementor-button { min-width: 190px; }

/* ==========================================================================
   Contact strip  (top-most bar, replaces the original search bar)
   ========================================================================== */
.ms-contact-bar {
    width: 100%;
    background-color: #5f7d94;
    color: #ffffff;
    font-size: 16px;
}
.ms-contact-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    min-height: 44px;
    padding: 6px 16px;
}
.ms-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: .3px;
    transition: opacity .2s;
}
.ms-contact-item:hover { color: #ffffff; opacity: .75; }
.ms-contact-item i { font-size: 15px; }
.ms-contact-social i { font-size: 17px; }
.ms-contact-sep {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, .45);
}
@media (max-width: 600px) {
    .ms-contact-bar { font-size: 14px; }
    .ms-contact-bar-inner { gap: 8px 16px; }
}

/* ==========================================================================
   Header / Navigation  (replica of .fullMenu-bar)
   ========================================================================== */
.ms-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    width: 100%;
    text-align: center;
}
/* Big centred logo floating over the hero slideshow (original layout) */
.ms-logo-wrap { margin-top: 45px; }
.ms-logo-wrap img {
    width: min(480px, 70vw);
    height: auto;
    display: inline-block;
    margin: 0 auto;
}

/* Desktop horizontal menu bar - sits at the very top of the page */
.fullMenu-bar {
    height: 50px;
    width: 100%;
    background-color: rgba(61, 146, 193, 0.6);
}
.fullMenu-ul { margin: 0; padding: 0; list-style: none; }
.fullMenu-li { display: inline-block; position: relative; }
.fullMenu-li > .link {
    padding: 0 15px;
    color: #ffffff;
    font-size: 17px;
    text-transform: uppercase;
    display: block;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    letter-spacing: .5px;
}
.fullMenu-li > .link:hover { color: #dddddd; }
.fullMenu-li.has-children > .link::after { content: " \2193"; font-size: 12px; }
.fullMenu-sub {
    display: none;
    position: absolute;
    top: 50px; left: 0;
    background-color: #3D92C1;
    color: #ffffff;
    padding: 0;
    margin: 0;
    min-width: 200px;
    text-align: left;
    z-index: 1001;
}
.fullMenu-li:hover .fullMenu-sub { display: block; }
.fullMenu-subli { list-style: none; min-width: 200px; }
.fullMenu-subli .sublink {
    width: 100%;
    padding: 9px 20px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    text-transform: none;
}
.fullMenu-subli:hover { background-color: #ffffff; }
.fullMenu-subli:hover .sublink { color: #3D92C1; }

/* Book Now button in the menu bar */
.fullMenu-bar { position: relative; }
.ms-menu-book {
    position: absolute;
    right: 16px;
    top: 7px;
    height: 36px;
    line-height: 36px;
    padding: 0 18px;
    background-color: #67C8CA;
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background-color .2s;
}
.ms-menu-book:hover { background-color: #A6C0C5; color: #fff !important; }

/* Book Now in the mobile overlay */
.ms-mobile-book { margin-bottom: 24px; display: inline-block; }

/* Mobile toggler */
.ms-toggler {
    display: none;
    position: absolute;
    top: 14px; left: 16px;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    z-index: 1100;
}
.ms-toggler h5 { margin: 0; text-transform: uppercase; color: #fff; font-size: 16px; }
.ms-toggler h5 i { margin-right: 6px; }

/* Mobile overlay menu */
.ms-mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #3D92C1;
    z-index: 1200;
    overflow-y: auto;
    padding: 80px 20px 40px;
    text-align: center;
}
.ms-mobile-menu.open { display: block; }
.ms-mobile-close {
    position: absolute; top: 18px; right: 22px;
    background: transparent; border: 0; color: #fff; font-size: 28px; cursor: pointer;
}
.ms-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.ms-mobile-menu > ul > li > a {
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 0;
    text-decoration: none;
}
.ms-mobile-menu .sub-menu a {
    display: block;
    color: #eaf4fb;
    font-size: 1em;
    padding: 6px 0;
    text-transform: none;
    text-decoration: none;
}

@media (max-width: 1400px) {
    .fullMenu-bar { display: none; }
    .ms-toggler { display: block; }
    .ms-logo-wrap { margin-top: 60px; }
    .ms-logo-wrap img { width: min(340px, 65vw); }
}

/* ==========================================================================
   Hero helpers (for Elementor full-width hero sections)
   ========================================================================== */
.ms-hero {
    position: relative;
    min-height: 90vh;
    background-size: cover;
    background-position: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.ms-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.25);
}
.ms-hero-inner { position: relative; z-index: 2; }
.ms-hero-inner h1 { font-size: 54px; text-transform: uppercase; margin: 0 0 10px; }
.ms-hero-inner h2 { font-size: 20px; text-transform: uppercase; font-weight: 400; }
@media (max-width: 767px) {
    .ms-hero-inner h1 { font-size: 32px; }
}

/* ==========================================================================
   Footer  (replica of .footer)
   ========================================================================== */
.ms-footer { padding: 50px 0; text-align: center; }
.ms-footer .ms-footer-logo img { max-height: 110px; width: auto; margin-bottom: 30px; }
.ms-footer .address { margin: 4px 0; }
.ms-footer .phone a, .ms-footer a[href^="mailto"] { color: #222; }
.ms-footer hr { max-width: 400px; margin: 30px auto; }
.ms-footer h2 { font-size: 24px; }
.circle {
    width: 44px; height: 44px; border-radius: 100%;
    line-height: 44px; display: inline-block;
    background-color: #222222;
    border: 1px solid #222222; margin: 0 5px;
    transition: border-color .2s, background-color .2s, color .2s;
}
.circle a, .ms-footer .circle a[href^="mailto"] { color: #ffffff; display: block; }
.circle:hover { background-color: #3D92C1; border-color: #3D92C1; }
.circle:hover a { color: #fff; }
.ms-footer .ms-map-col img { width: 100%; max-width: 720px; height: auto; }
.ms-footer hr { border-top: 4px solid #000000; max-width: 100%; margin: 30px 0; }
.ms-footer .vertical-align { display: flex; align-items: center; justify-content: center; }
@media (max-width: 990px) {
    .ms-footer .vertical-align { margin-top: 40px; }
}

.ms-subfooter { padding: 20px 0; text-align: center; font-size: 14px; }
.ms-subfooter .row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* Newsletter */
.ms-newsletter { margin-top: 20px; }
.ms-newsletter h4 { text-transform: uppercase; }
.ms-newsletter .form-inline { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.ms-newsletter input[type="text"] { height: 34px; border-radius: 0; border: 1px solid #ccc; padding: 0 10px; }
.ms-newsletter .form-inline { align-items: center; }
.ms-newsletter .ms-btn {
    height: 34px;
    padding: 0 18px;
    line-height: 32px;
    font-size: 15px;
}

/* ==========================================================================
   Room / teaser cards (original .masonry: 430px images, odd blocks 470px,
   left-aligned titles and copy, beige buttons)
   ========================================================================== */
.ms-roomgrid .ms-card-img img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 0;
}
.ms-roomgrid > .elementor-container > .elementor-column:nth-child(odd) .ms-card-img img {
    height: 470px;
}
.ms-roomgrid h3 { font-size: 18px; margin-top: 18px; }
@media (max-width: 767px) {
    .ms-roomgrid .ms-card-img img,
    .ms-roomgrid > .elementor-container > .elementor-column:nth-child(odd) .ms-card-img img { height: 320px; }
}

/* Page title (h1.pageTitle equivalent) */
.ms-page-title .elementor-heading-title, h1.pageTitle {
    text-align: center;
    font-weight: 400;
    font-size: 36px;
    text-transform: uppercase;
}

/* Masonry photo gallery - replica of the original .promo.gallery markup.
   5 columns desktop, .width2 spans two; 2px padding, 10px radius, lightbox. */
.ms-gallery { margin-left: -2px; margin-right: -2px; }
.ms-gallery .item { float: left; width: 20%; }
.ms-gallery .item.width2 { width: 40%; }
.ms-gallery .item img {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    object-fit: cover;
    padding: 2px;
}
.ms-gallery::after { content: ""; display: table; clear: both; }
.ms-gallery .empty-sizer { width: 20%; }
@media screen and (max-width: 1200px) {
    .ms-gallery .item, .ms-gallery .empty-sizer { width: 25%; }
    .ms-gallery .item.width2 { width: 50%; }
}
@media screen and (max-width: 760px) {
    .ms-gallery .item, .ms-gallery .empty-sizer { width: 33.3333%; }
    .ms-gallery .item.width2 { width: 66.6667%; }
}
.ms-gallery .item.ms-hidden { display: none; }
.ms-gallery.ms-expanded .item.ms-hidden { display: block; }
.ms-gallery.ms-expanded #viewMoreGallery { display: none; }
.ms-gallery .btn {
    background-color: #67C8CA;
    color: #000;
    border-radius: 0;
    padding: 8px 18px;
    border: 0;
    cursor: pointer;
}

/* Gallery lightbox is provided by Elementor (auto-bound to image links). */

/* YouTube embeds inside rich text: Elementor stretches iframes to 100% width.
   Restore the original fixed 560x315 box, centred, shrinking only when the
   screen is narrower than the player. */
.elementor-widget-text-editor iframe[src*="youtube"] {
    width: 560px !important;
    max-width: 100% !important;
    height: 315px !important;
    display: block;
    margin: 0 auto;
    border: 0;
}
@media (max-width: 600px) {
    .elementor-widget-text-editor iframe[src*="youtube"] {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}

/* Responsive hero: the original fixes the slideshow at 900px, which is taller
   than a phone screen. Below 1030px, cap it to one full viewport instead.
   !important is needed to beat Elementor's generated min-height rule. */
@media (max-width: 1030px) {
    .ms-hero-slides {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
}

/* Bouncing down-chevron over the hero (original .down.carousel-control) */
.ms-hero-down {
    position: absolute;
    left: 0; right: 0;
    bottom: 6vh;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}
.ms-hero-down span {
    display: inline-block;
    color: #ffffff;
    font-size: 28px;
    animation: ms-bounce 1.5s ease-in-out infinite;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
@keyframes ms-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.pt-50 { padding-top: 50px; }
.pb-50 { padding-bottom: 50px; }
.text-center { text-align: center; }
.ms-section { padding: 50px 0; }