/*
Theme Name: IPIE Site
Theme URI: https://ipieservices.com
Author: IPIE Services
Author URI: https://ipieservices.com
Description: For IPIE destination portal sites.
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6

Text Domain: ipiesite
*/

body main {
    background: #fff;
}

/* Homepage (redesign) — warm cream page background behind the content sections. */
body.page-template-homepage-redesign main {
    background: #FBF4E9;
}

/* Homepage (redesign) two-column layout: main content column beside a sticky
   aside, inside a 1180px container. The flex row wraps (stacks) on narrow
   viewports, and collapses to a single full-width column when one side is empty. */
.ipie-home-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.ipie-home-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 44px;
    padding: 44px 0 64px;
}

.ipie-home-main {
    flex: 1 1 600px;
    min-width: 0; /* let the card grid shrink instead of overflowing the column */
    display: flex;
    flex-direction: column;
    gap: 66px;
}

.ipie-home-aside {
    flex: 1 1 300px;
    max-width: 340px;
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* HEADER CHANGES */

.ak-header-sec  {
    z-index: 999;
}

.header-area .navbar {
    padding: .5rem 1rem !important;
}

.footer-widget-sec img {
    max-width: 240px !important;
}

.navbar h1 {
    font-size: 30px;
}

.ak_breadcrumb a {
    font-weight: 400 !important;
}

/* HOMEPAGE STYLES */

.featured4-item {
    padding: 35px;
}

.owl-carousel .owl-nav button.owl-prev {
    left: 0 !important;
}

.owl-carousel .owl-nav button.owl-next {
    right: 0 !important;    
}

.owl-carousel .owl-nav button.owl-prev.disabled {
    left: -40px !important;
}

.owl-carousel .owl-nav button.owl-next.disabled {
    right: -40px !important;
}

.featured-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.home .main h3 {
    margin: 30px 0;
}

/* GENERAL STYLES */

b, strong {
    font-weight: 600;
}

.price {
    font-weight: 700;
    color: var(--ipie-primary-dark, #0069d9);
}

.hide {
    display: none !important;
}

/* LINK UNDERLINES */

/* Text links are underlined site-wide: colour alone cannot mark a link
   (WCAG 1.4.1), and no teal both clears 4.5:1 against the backgrounds and
   3:1 against body copy. Exclusions: headings, buttons and button-styled
   chrome, image/icon links, the header nav (colour affordances only), and
   the sidebar TOC/marketing tiles (underline on hover instead). Each
   exclusion also carries :hover so Bootstrap's a:hover underline cannot
   re-decorate it; the sidebar hover rule below outranks that by coming
   later at equal specificity. */
a {
    text-decoration: underline;
}

:is(
    :is(h1, h2, h3, h4, h5, h6) a,
    a:has(h1, h2, h3, h4, h5, h6),
    a.btn,
    a.page-numbers,
    a.load-more-posts,
    a:has(img),
    a:has(svg),
    a:has(i[class*="fa-"]),
    a:has([class*="flaticon"]),
    .akh-menu a,
    .a-footer-sec a,
    .sticky-sidebar a,
    .ipie-reasons-widget a,
    .ipie-step-widget a,
    .ipie-currency-dd a,
    .wp-block-categories a,
    .wp-block-tag-cloud a,
    .fp-label,
    .post-categories a
),
:is(
    :is(h1, h2, h3, h4, h5, h6) a,
    a:has(h1, h2, h3, h4, h5, h6),
    a.btn,
    a.page-numbers,
    a.load-more-posts,
    a:has(img),
    a:has(svg),
    a:has(i[class*="fa-"]),
    a:has([class*="flaticon"]),
    .akh-menu a,
    .a-footer-sec a,
    .sticky-sidebar a,
    .ipie-reasons-widget a,
    .ipie-step-widget a,
    .ipie-currency-dd a,
    .wp-block-categories a,
    .wp-block-tag-cloud a,
    .fp-label,
    .post-categories a
):hover {
    text-decoration: none;
}

/* Sidebar TOC links (white on navy): underline appears on hover. The extra
   .nav-list class outranks the exclusion's :hover arm, whose :is() weighs in
   at the specificity of its heaviest argument (a:has(i[class*="fa-"]) —
   which these icon-carrying links match). */
.sticky-sidebar .nav-list a:hover {
    text-decoration: underline;
}

/* COMMENT STYLES */

.comment-metadata {
    font-size: 90%;
}

.comments-list li.comment .comment-meta {
    margin-bottom: 0px !important;
}

/* Long words and bare URLs in comment text must not force the thread wider than
 * the viewport. break-word alone leaves an unbreakable token (a pasted URL) able
 * to overhang; anywhere lets it break at any point. */
.comments-list .comment-content,
.comments-list .fn,
.comments-list .comment-metadata {
    overflow-wrap: anywhere;
}

/* Deep comment threads.
 *
 * arkai's .comments-list li[class] padding is the avatar gutter, and because
 * the selector matches nested <li>s too the indent compounds with depth. At its
 * original 75px, depth 5 was 375px of padding; on a 412px phone that left a
 * depth-5 comment 82px wide with a 7px content box, so its contents (notably
 * the Reply button, which arkai pads to 3px 45px = 135px wide) overhung the
 * viewport and scrolled the whole document sideways.
 *
 * The gutter is now 35px in arkai-base.css (and its generated subset) at every
 * viewport, because no avatar is ever rendered into it: show_avatars is off and
 * comments.php no longer asks for a size. arkai's .avatar positioning rules were
 * dropped with it. If avatars are ever turned back on, WP's default 32px fits
 * the gutter — anything larger needs the gutter widened again.
 *
 * Below 768px the only remaining need is to let the reply button size to its
 * label rather than to arkai's 135px minimum. */
@media (max-width: 767px) {
    .comments-list .fn {
        font-size: 18px;
    }

    .comments-list .comment-reply-link.btn {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* SIDEBAR CHANGES */

.single-accommodation .sticky-sidebar {
    position: relative;
    top: 0;
}

.sticky-sidebar {
    padding: 35px;
    margin-bottom: 25px;
    top: 0;
    position: sticky;
    z-index: 900;
    box-shadow: 0 10px 30px rgba(0,17,28,.35);
}

.sticky-sidebar a, .sticky-sidebar h4, .sticky-sidebar .js-toc-title {
    color: #fff;
}

.sticky-sidebar h4 {
    font-size: 20px;
    line-height: 1.4em;
}

ol.toc-list {
    font-size: 17px;
}

.ipie-widget h4 {
    margin: 20px 0 10px;
}

/* SINGLE CHANGES */

.post-single-content>*:not(:first-child), .post-single-content .wp-block-embed, .post-single-content .wp-block-table, .comment-content>*:not(:first-child), .comment-content .wp-block-embed, .comment-content .wp-block-table {
    margin-top: 26px;
}

.post-single-content img {
    border-radius: 0px;
}

/* A full-width content image must not overhang its column.
 *
 * arkai gives .alignnone a legacy float-era margin (arkai-base.css:
 * .alignnone{margin:5px 20px 20px 0}, and a more specific a img.alignnone{...}).
 * Images are capped with max-width:100%, but margins sit *outside* that cap, so an
 * image that already fills the column ends up 20px wider than it — enough to push
 * the document 5px past a 412px phone viewport and scroll the page sideways.
 * .alignnone does not float, so the right margin buys nothing here. */
.post-single-content img.alignnone,
.comment-content img.alignnone {
    margin-right: 0;
}

.post-single-content ol:not([class]) li:not(.comment), .comment-content ol:not([class]) li:not(.comment) {
    padding-left: 34px;
}

.single-page-section {
    padding-top: 35px;
}

.single-post-header {
    max-width: 100%;
}

.post-banner {
    margin-bottom: 20px;
}

.post-content {
    max-width: 700px;
    margin: 0 0;
}

.is_portal_page .post-content {
    max-width: 100%;
    margin: 0 0;
}

.taxonomy-links {
    display: block;
}

.sra-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.sra-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* HOMESTAY SINGLE */

.accommodation .blog-post-content h3 {
    margin-bottom: 0;
}

.nav-list .fa {
    display: inline-block;
    width: 30px;
}

.accommodation .nav-list .fa {
    color: #fff;
}

.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-success {
    color: #fff;
    background-color: var(--ipie-success, #178744);
    border-color: #c3e6cb;
    font-weight: 600;
}

.homestay-features .fa {
    color: var(--ipie-accent-dots, #002b41);
    display: inline-block;
    margin-right: 8px;
}

/* Keep the post column from outgrowing its container below 992px.
 *
 * .single-blog-layout is a wrapping flex container that arkai flips to
 * flex-direction: column-reverse at <=991px. In a *column* container the cross
 * axis is horizontal, and a wrapped flex line sizes its cross axis to its widest
 * item rather than to the container — so the post column grew to fit its widest
 * descendant (the Bootstrap .row children, which carry -15px gutters) and spilled
 * ~19px past the .container. That overflow is what clipped the right edge of
 * accommodation pages and left the full-width header ending short of the
 * scrollable width. Only listings with enough content to exceed the container hit
 * it, which is why it looked intermittent and listing-specific.
 *
 * min-width: 0 opts out of the flex min-content floor; max-width: 100% clamps the
 * stretch to the container. Desktop (>=992px) is a row layout and unaffected: the
 * features list still renders as two equal columns.
 */
.single-blog-layout .single-blog-post-content {
    min-width: 0;
    max-width: 100%;
}

h2.review-title {
    margin-bottom: 26px;
}

/* ACCOMMODATION LISTING — CURRENCY SWITCHER */

/* Positioned below the search filters section, flush-left, compact. */
.accomm-currency-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.accomm-currency-switcher label {
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: 500;
}

/* Styled link-dropdown shared by archive + single listing (currency-switcher.php).
   Toggle reuses .btn-primary (button colour / white); the open list repeats the
   button-colour background with white 600-weight options. */
.ipie-currency-dd {
    position: relative;
    display: inline-block;
}

.single-accommodation .ipie-currency-dd {
    margin-top: 25px;
}

@media (max-width: 768px) {
    .single-accommodation .ipie-currency-dd {
        margin-top: 10px;
    }
}

/* Match #accommFilterBtn exactly so the two controls read as a pair: btn-sm
   supplies the shared height/padding (arkai .btn-sm), min-width locks widths. */
#accommFilterBtn,
.ipie-currency-toggle {
    min-width: 180px;
}

.ipie-currency-caret {
    margin-left: 10px;
    transition: transform .2s ease;
}

.ipie-currency-dd.is-open .ipie-currency-caret {
    transform: rotate(180deg);
}

.ipie-currency-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--ipie-button, #0069d9);
    border-radius: .25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    max-height: 320px;
    overflow-y: auto;
}

.ipie-currency-dd.is-open .ipie-currency-menu {
    display: block;
}

.ipie-currency-item {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ipie-currency-item:hover,
.ipie-currency-item[aria-selected="true"] {
    background: var(--ipie-primary, #002b41);
}

/* Circular country flags in the currency selector (HatScripts/circle-flags,
   MIT — see assets/icons/flags/README.md). Both the option list and the toggle
   use a 24px flag to match the btn-sm control. The SVG art is already circular,
   but border-radius + object-fit guard any non-circular fallback asset. */
.ipie-currency-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.ipie-currency-item .ipie-currency-flag {
    margin-right: 10px;
}

.ipie-currency-toggle-flag {
    margin-right: 8px;
    vertical-align: middle;
}

/* ACCOMMODATION ARCHIVE — SEARCH ROW SPACING */

/* Desktop: halve the horizontal gutter (30px -> 15px) between the keyword
   field, filters button and currency selector. This bootstrap build uses the
   classic gutter (row -15px margin / 15px column padding), so adjust both. */
@media (min-width: 768px) {
    .accomm-search .row {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }
    .accomm-search .row > div {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
}

/* Apply / Reset filter buttons — same spacing as the search row: 15px apart
   on desktop, stacked full-width with a 1rem gap on mobile. */
.accomm-search .form-button.inline-form-part {
    display: flex;
    gap: 15px;
}

/* Mobile: stack with vertical spacing and make buttons full-width blocks. */
@media (max-width: 767.98px) {
    .accomm-search .row > div + div {
        margin-top: 1rem;
    }
    .accomm-search .filter-btn-col .btn,
    .accomm-search .accomm-currency-switcher .ipie-currency-dd,
    .accomm-search .accomm-currency-switcher .ipie-currency-toggle {
        width: 100%;
    }

    .accomm-search .form-button.inline-form-part {
        flex-direction: column;
        gap: 1rem;
    }
    .accomm-search .form-button.inline-form-part .btn {
        width: 100%;
    }

    /* Wide raw tables in post content (e.g. Vital Information posts) scroll
     * horizontally within the column instead of widening the whole page.
     * display:block + overflow-x:auto turns the table into a scroll container;
     * scoped to mobile so desktop column layout is unchanged. */
    .post-single-content table,
    .comment-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* LISTING CHANGES */

.blog-post-content {
    margin-top: 0px;
    padding: 30px 0;
    height: 280px;
}

.accommodation .blog-post-content {
    height: 340px;
}

.blog-post-content p {
    color: inherit;
}

/* GALLERY CHANGES */

.gallery {
    margin-top: 5px;
}

.gallery-item {
  display: inline-block;
  position: relative;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  width: 100%; }
  .gallery-columns-2 .gallery-item {
    max-width: 50%; }
  .gallery-columns-3 .gallery-item {
    max-width: 33.33%; }
  .gallery-columns-4 .gallery-item {
    max-width: 25%; }
  .gallery-columns-5 .gallery-item {
    max-width: 20%; }
  .gallery-columns-6 .gallery-item {
    max-width: 16.66%; }
  .gallery-columns-7 .gallery-item {
    max-width: 14.28%; }
  .gallery-columns-8 .gallery-item {
    max-width: 12.5%; }
  .gallery-columns-9 .gallery-item {
    max-width: 11.11%; 
}

.gallery-hidden {
    display: none !important;
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  color: #fff;
  text-transform: uppercase; 
}

.gallery-count {
  margin: auto;
  display: block;
  cursor: pointer;
}

/* FORM STYLES */

.form-control-lg {
    font-size: 1rem;
}

.field-error.invalid-feedback {
    color: #c82333;
}

input[type=button], button, a.btn, button.btn, input.btn {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

/* btn-primary: button-colour base, navy hover, white text throughout */
.btn-primary {
    color: #fff !important;
    background: var(--ipie-button, #0069d9) !important;
    border-color: var(--ipie-button, #0069d9) !important;
}

.btn-primary:hover {
    color: #fff !important;
    background: var(--ipie-primary, #002b41) !important;
    border-color: var(--ipie-primary, #002b41) !important;
}

button[type=submit].btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.nf-field-label .nf-label-span, .nf-field-label label {
    font-weight: 400 !important;
}

input[type=checkbox], input[type=radio] {
    width: 25px;
    height: 15px;
}

.accordion .card-header {
    padding: 0;
}

.accordion .card-header a {
    display: block;
    padding: .75rem 1.25rem;
    font-size: 1.1em;
}

.accordion .card-header a i {
    display: inline-block;
    margin-right: 10px;
}

button.filter i {
    display: inline-block;
    margin-left: 10px;
}

/* Required-field markers on the booking form.
 *
 * These were inline `style="color: red;"`, i.e. #ff0000, which measures 3.99:1
 * on white and fails the WCAG AA 4.5:1 threshold — the same defect the red
 * inline-text migration fixes in content, but in theme markup, so no content
 * sweep could ever reach it. #b91c1c is ~6.3:1 and is the red the provider
 * portal already uses for negative figures, so the site carries one red rather
 * than two. */
.ipie-required-marker {
    color: #b91c1c;
}

/* STAR RATING STYLES */

/* The widget is two five-star layers: .empty-ratings in flow, and .fill-ratings
   absolutely positioned over it, clipped to `rating × 20`% by overflow: hidden.
   That only reads as one bar of five stars while each glyph run stays on a
   single line, and the run has no whitespace in it precisely so that it can't
   break. But `overflow-wrap: anywhere` — which the comment-prose rule above sets
   on .comment-content, and which the rating markup inherits because
   inc/comment-ratings.php prepends it into that div — introduces a soft wrap
   opportunity between every glyph and lowers min-content width to one star. The
   two layers then wrap at different points and a 4-star review renders as two
   rows with five filled stars. nowrap closes that off regardless of what any
   ancestor inherits down. */
.star-ratings,
.star-ratings .rating-icons {
  white-space: nowrap;
  overflow-wrap: normal;
}
.star-ratings {
  unicode-bidi: bidi-override;
  color: #bbb;
  font-size: 22px;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.star-ratings .fill-ratings {
    padding: 0;
    color: var(--ipie-coral, #002b41);
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
}
.star-ratings .fill-ratings .rating-icons {
    display: inline-block;
}
.empty-ratings {
    padding: 0;
    display: block;
    z-index: 0;
}

.average-rating, .postcard2-price {
    display: inline-block;
}

/* Label for the comment-form star rating. .rwmb-rating floats left, so the
   label needs to be block-level to sit above the stars rather than beside them,
   and the wrapper needs to contain the float so the submit button clears it. */
.comment-form-rating {
	overflow: hidden;
}

.comment-form-rating-label {
	display: block;
	margin-bottom: 5px;
}

.rwmb-rating {
	border: none;
	float: left;
}

.rwmb-rating > input { display: none; }
.rwmb-rating > label:before {
	margin: 5px;
	font-size: 1.25em;
	font-family: FontAwesome;
	display: inline-block;
	content: "\f005";
}

.rwmb-rating > .half:before {
	content: "\f089";
	position: absolute;
}

.rwmb-rating > label {
	color: #ddd;
	float: right;
}

#starfish-rating {
	min-height: 100px;
}

.comments-list li.comment .comment-respond .rwmb-rating {
    display: none;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rwmb-rating > input:checked ~ label, /* show gold star when clicked */
.rwmb-rating:not(:checked) > label:hover, /* hover current star */
.rwmb-rating:not(:checked) > label:hover ~ label { color: var(--ipie-accent, #ffd700);  } /* hover previous stars in list */

.rwmb-rating > input:checked + label:hover, /* hover current star when changing rating */
.rwmb-rating > input:checked ~ label:hover,
.rwmb-rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rwmb-rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
.rwmb-rating input[type=radio]:checked+label:before {
	color: unset;
}

/* ── Booking form ────────────────────────────────────────────────────────── */

/* Date field — calendar icon overlay. */
.booking-form .date-field-wrapper {
    position: relative;
}
.booking-form .date-field-wrapper .form-control {
    padding-right: 2.25rem;
}
.booking-form .date-field-wrapper .fa-calendar {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/* On mobile UAs flatpickr's mobile mode hides our text input (type="hidden")
   and injects a native <input type="date"> next to it — before the icon. That
   native input draws its own indicator (a calendar glyph on desktop Chrome, a
   downward caret on Android), which our overlay icon then sits on top of: two
   icons at once. Let the native indicator be the sole affordance where it
   exists and drop ours. Inert on desktop, where no .flatpickr-mobile input is
   ever created — hence the desktop field is unchanged. */
.booking-form .date-field-wrapper input.flatpickr-mobile ~ .fa-calendar {
    display: none;
}

/* Remove Bootstrap's red-X background icon from invalid inputs; keep the
   red border which is sufficient to signal an error. */
.booking-form input.form-control.is-invalid {
    background-image: none;
    padding-right: 2.25rem; /* preserve space for the calendar icon */
}

/* For invalid selects: remove the red-X overlay but restore the native
   dropdown arrow (appearance: auto) and show a red border. */
.booking-form select.form-control.is-invalid,
.booking-form select.is-invalid {
    background-image: none;
    border-color: var(--ipie-error, #dc3545);
    -webkit-appearance: auto;
    appearance: auto;
}

/* Grey border + internal padding around the Your Details section. */
.booking-form .guest-details-content {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 1rem;
}

/* Space between checkbox and its label. */
.booking-form .form-check-label {
    padding-left: 10px;
}

/* Capacity / block error messages below room rows. */
.booking-form .room-capacity-msg {
    color: var(--ipie-error, #dc3545);
    font-size: .875em;
    margin-top: .25rem;
}

/* Right-align the submit button. */
.booking-form .form-submit-row {
    text-align: right;
}

/* Visually indicate the submit button is inactive when disabled. */
.booking-form #booking-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ============================================================
   Static theme rules — replaces arkai_customize_css() output.
   Values frozen from sra.local theme_mods (2026-05-14).
   ============================================================ */

/* Header */
.header-area {
    background-color: #fff;
    color: var(--ipie-primary, #002b41);
    border-color: #d2d2d2 !important;
}

.header-logo img, .h-logo-left img, .header-area.sticky-menu .site-logo {
    width: 200px;
    height: auto;
    aspect-ratio: 290 / 40;
    max-width: 200px;
}

.header-area .navbar {
    flex-direction: row;
}

/* Top nav — design (Square) styling: ink links, pale-highlight hover fill */
.ak-header-sec .akh-menu li a,
.ak-header-sec .akh-menu li.nav-item a.nav-link {
    color: var(--ipie-primary, #113A46);
    font-weight: 700;
    padding: 9px 13px;
    margin-right: 2px;
    border-radius: 0;
    transition: background-color .15s, color .15s;
}

.ak-header-sec .sub-menu li a,
.ak-header-sec .sub-menu li.nav-item a.nav-link {
    font-weight: 400;
    font-size: 14px;
    padding: 5px 13px;
}

.ak-header-sec .akh-menu .sub-menu {
    border: 1px solid #ECE3D3;
}

.ak-header-sec .akh-menu li a::before {
    content: none !important; /* drop arkai's hover/active tick */
}

.ak-header-sec .akh-menu li a:hover,
.ak-header-sec .akh-menu li a:focus,
.ak-header-sec .akh-menu li.nav-item a.nav-link:hover,
.ak-header-sec .akh-menu li:hover > a,
.ak-header-sec .akh-menu li.active > a {
    color: var(--ipie-link, #0B6F79);
    background-color: var(--ipie-pale-highlight, #F1F7F6);
}

/* ── Footer (Square redesign §7) ──────────────────────────────────────────
   Dark teal footer, shared chrome (every page). Three columns: the brand
   column (logo — left as-is until a contrast version lands — + mission blurb
   + read-more), then the Information and Explore nav menus, over a copyright
   bar. Rules override the arkai-subset footer defaults (light bg, dark widget
   text pinned with !important), so several carry !important to match weight. */
.a-footer-sec {
    background: #0B3D48 !important; /* deep teal; beats arkai .a-footer-sec{#fbfbfb} */
    color: #CFE4E2;
    margin-top: 10px;
    font-family: 'Mulish', system-ui, -apple-system, sans-serif;
}

.footer-widget-sec {
    z-index: 10;
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 52px 24px 30px !important;
    background: transparent;
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 36px;
}

.footer-col--brand {
    max-width: 340px;
}

/* Brand column: logo left as-is (contrast version TBD — no invert filter),
   mission blurb, amber "read more" link with a trailing arrow. */
.footer-col--brand img {
    height: 36px;
    width: auto;
}

.a-footer-sec .widget-content p {
    color: #ffffff !important;
    font-size: 15px;
    line-height: 1.55;
    margin: 16px 0 0;
    text-wrap: pretty;
}

/* The logo widget carries a pb-4 (24px) bottom padding; drop it so the mission
   text sits neatly beneath the logo (the only footer widget with an image).
   pb-4 is a Bootstrap utility (!important), so match its weight. */
.a-footer-sec .widget-content:has(img) {
    padding-bottom: 0 !important;
}

.a-footer-sec .textwidget a {
    color: #FFC24B !important;
    font-weight: 800;
    font-size: 14px;
}

.a-footer-sec .textwidget a::after {
    content: ' \2192'; /* → */
}

.a-footer-sec .textwidget a:hover {
    color: #ffffff !important;
}

/* Menu-column headings (nav-menu widget titles). */
.a-footer-sec .widget-title {
    color: #ffffff !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: none;
    margin: 0 0 14px;
}

/* Menu-column links. arkai pins these with !important, so match its weight. */
.a-footer-sec .widget-content ul:not(.social-icon) li:not(.wp-block-social-link) a {
    color: #ffffff !important;
    font-size: 15px !important;
    margin: 0;
    display: block;
}

.a-footer-sec .widget-content ul:not(.social-icon) li:not(.wp-block-social-link) a:hover {
    color: #FFC24B !important;
}

.a-footer-sec .widget-content .menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The Information + Explore menu columns align their content (heading + links)
   to the right edge of their column; the brand column (logo/mission — no .menu)
   stays left. Targets the menu widgets themselves, so it holds regardless of the
   column markup. */
.a-footer-sec .widget-content:has(.menu) {
    text-align: right;
}

/* Copyright bar. */
.footer-bottom-sec {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-bottom {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px;
    color: #ffffff;
    font-size: 15px;
    text-wrap: pretty;
}

/* 404 page: the arkai .error-sec h1 rule is 100px, sized for the old "404"
   glyph. The rebuilt page uses a worded heading ("Say what now?"), so bring it
   down to a normal display size and let the onward-link paragraphs breathe. */
.error-sec .error-title { font-size: 44px; }
.error-sec p a { text-decoration: underline; }

/* Postcard image ratio */
.postcard2 .attachment-featured-image,
.postcard2 .attachment-portrait,
.postcard3 .attachment-portrait,
.postcard3 .attachment-featured-image {
    aspect-ratio: 16/9;
    height: unset;
    object-fit: cover;
    width: 100%;
}

/* Heading levels corrected for document outline (a11y heading-order);
   keep the sizes the old levels had from arkai-base.css. */
.post-p-content h3.m-0 { font-size: 18px; }  /* was h6 */
h3.room-title           { font-size: 24px; }  /* was h4 */
h3.result               { font-size: 22px; }  /* was h5 */

/* RESPONSIVE CHANGES */

@media (max-width: 991.98px) {
    .posthead-meta, .posthead-meta > div {
        display: block;
    }
    main.pt-4 {
        padding-top: 0px !important;
    }
    .accommodation .sticky-sidebar {
        display: none;
    }
    .blog-post-content, .accommodation .blog-post-content {
        height: auto;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1100px;
    }
}