/*
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;
}

/* HEADER CHANGES */

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

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

.ak-header-sec .border-bottom {
    border-bottom-width: 3px !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 */

.footer-bottom {
    font-size: 17px;
}

b, strong {
    font-weight: 600;
}

.price {
    font-weight: 600;
}

.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,
    .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,
    .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;
}

/* SIDEBAR CHANGES */

.common-sidebar, .widget-content p, .widget-content li:not(.wp-block-social-link) a, 
    .ak_breadcrumb, .akh-menu li ul li a {
    font-size: 17px !important;
}

.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;
}

.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 {
    font-size: 17px;
    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-primary, #002b41);
    display: inline-block;
    margin-right: 8px;
}

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 (bright-blue / white); the open list repeats the
   bright-blue 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-link, #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;
    font-size: 17px;
}

/* 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 */

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

/* btn-primary: bright-blue base, navy hover, white text throughout */
.btn-primary {
    color: #fff !important;
    background: var(--ipie-link, #0069d9) !important;
    border-color: var(--ipie-link, #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;
}

/* STAR RATING STYLES */

.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-primary, #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 {
    font-size: 17px;
    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: 240px;
    height: auto;
    aspect-ratio: 290 / 40;
    max-width: 240px;
}

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

/* Footer widget area */
.footer-widget-sec {
    z-index: 10;
    position: relative;
    background-color: var(--ipie-surface, #f0f7fa);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    border-bottom-width: 0;
    border-bottom-style: solid;
}

.widget-content p,
.widget-content .wp-block-tag-cloud a,
.widget-content ul:not(.social-icon) li:not(.wp-block-social-link) a {
    color: var(--ipie-primary, #002b41) !important;
}

/* The !important above pins the rest colour, so the darker hover shade
   (footer/sidebar widget menus) needs the same weight to apply. */
.widget-content ul:not(.social-icon) li:not(.wp-block-social-link) a:hover {
    color: color-mix(in srgb, var(--ipie-primary, #002b41) 60%, black) !important;
}

.widget-content .wp-block-tag-cloud a {
    border-color: var(--ipie-primary, #002b41) !important;
}

.widget-title {
    color: var(--ipie-primary, #002b41) !important;
}

/* Footer copyright bar */
.footer-bottom-sec {
    background-color: #e5f2f8;
}

.footer-bottom {
    color: var(--ipie-primary, #002b41);
}

/* 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;
    }
}