/*
 Theme Name:   Koraba
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.3
 Text Domain:  bricks
*/

/* =========================================================
   Task 6 — Room feature icons & responsive layout
   ---------------------------------------------------------
   The room "Features" items (.piffmi) used align-items:end, so the
   icon bottom-aligned to the label and visibly shifted whenever a
   label wrapped to a different number of lines (the "icons move when
   I change the names" issue). Centring the cross-axis keeps the icon
   steady regardless of label length. Higher specificity (.piffmi +
   utility class) overrides the AutomaticCSS utility without !important.
   ========================================================= */
.listing__features-height.align-items--end {
  /* !important is required to beat AutomaticCSS utility classes, which
     ship with !important. Higher specificity keeps this scoped/safe. */
  align-items: center !important;
}

/* Keep the icon from being squashed when its label wraps. */
.listing__features-height img {
  flex-shrink: 0;
}

/* The feature grid is forced to 3 columns at every breakpoint, which
   crams labels and wraps them mid-word on phones. Drop to 2 columns on
   small screens. Scoped via :has() to grids that hold feature items so
   other 3-col grids are unaffected. */
@media (max-width: 767px) {
  .grid--3:has(> .listing__features-height) {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   Task 5/6 — hide defunct "Related Apartments" loop on room pages
   ---------------------------------------------------------
   #brxe-xeugpr is a leftover demo query loop duplicated into every
   room page's Bricks content (same element id on all six pages). It
   renders unresolved dynamic tags ({acf_short_description}, {acf_beds},
   {acf_bathrooms}) and falls back to the newest media-library items as
   placeholder images, so it displays a broken "APARTMENT" card grid
   directly beneath the working "Other Rooms" slider (#brxe-fjlrdb,
   which is unaffected). One id selector suppresses it site-wide.
   Reversible: delete this block. Cleaner long-term fix: remove the
   element in the Bricks builder on the room template.
   ========================================================= */
#brxe-xeugpr {
  display: none !important;
}

/* =========================================================
   Room hero — restore full-bleed background on rooms 3-6
   ---------------------------------------------------------
   Pre-existing inconsistency (NOT caused by our work): rooms 3-6
   (Quartermaster / Gunners / Sailing Master / Powder Monkey) are missing
   the per-page Bricks rules that make the hero image cover the section,
   so the hero rendered half-width with a tall grey gap (and a thin strip
   on mobile). Rooms 1-2 (and the local site) have these rules; Bricks'
   "Regenerate CSS files" did not restore them on live. The hero section,
   wrapper and image share the SAME element ids across rooms 2-6, so
   re-declaring the exact rules Bricks generates for room-2 fixes rooms
   3-6 and is a harmless no-op on room-2 (identical values). The id
   selectors beat the .sao9nk global class (full-height default) without
   !important. Verified live, desktop + mobile, no regression on rooms 1-2.
   ========================================================= */
#brxe-tanwmt { display: flex; }                    /* bg wrapper: flex (was grid -> half width) */
#brxe-qqzswj { height: 100%; }                     /* media wrapper fills the section */
#brxe-ifaldq { display: block; width: 100%; height: 100%; }
#brxe-ifaldq:not(.tag),
#brxe-ifaldq img { object-fit: cover; object-position: center; }
#brxe-cjwfwa { min-height: auto; height: 550px; }  /* section height (overrides .sao9nk full-height) */

/* =========================================================
   Task 3 — reservation price: "Starting at 900€ per night"
   ---------------------------------------------------------
   The price line is MotoPress output, not editable Bricks text:
   <p class="mphb-regular-price">[<strong>Prices start at:</strong>]
     <span class="mphb-price">900<span class="mphb-currency">€</span></span>
     <span class="mphb-price-period">per night</span></p>
   We prepend a consistent "Starting at " and hide MotoPress' own
   variable-price label ("Prices start at:") when it appears, so the
   wording is identical regardless of MotoPress' price-range state.
   Scoped to .mphb-regular-price — MotoPress' room-type "regular price"
   display, which appears on the single villa page AND the search-results
   card (the boss's screenshot). It is NOT used for checkout / booking
   summary totals (those use different markup), so those stay untouched.
   Reversible: delete this block.
   ========================================================= */
.mphb-regular-price > strong {
  display: none;
}
.mphb-regular-price .mphb-price::before {
  content: "Starting at ";
}

/* =========================================================
   Task 4 — "Other Rooms" slider: align the cards
   ---------------------------------------------------------
   The nested slider (#brxe-rlvtpq) lays each card out as
   flex-direction:column; justify-content:center, so cards whose
   titles wrap to a different number of lines get vertically
   centred — their images and buttons land at different heights
   and the row looks "broken" (most visible on tablet/mobile).
   Top-align the cards so every image lines up at the top, and
   pin the button to the bottom so every "Learn more" lines up.
   Scoped to the Other Rooms slider id, so the room gallery /
   other sliders are untouched. Reversible: delete this block.
   ========================================================= */
#brxe-rlvtpq .splide__slide,
#brxe-rlvtpq .splide__slide > .brxe-block {
  justify-content: flex-start;
}
#brxe-rlvtpq .splide__slide .brxe-button {
  margin-top: auto;
}

/* =========================================================
   "OTHER ROOMS" title centering — single-room pages
   ---------------------------------------------------------
   On three room pages the heading container (#brxe-fwnwvr)
   was saved with align-items:flex-start, so the "OTHER ROOMS"
   <h3> sits left-of-centre instead of centred like the other
   rooms. Force the container to centre its children, scoped to
   the affected page IDs so nothing else is touched:
     1181 = The Powder Monkey's Room
     1167 = The Quartermaster's Room
     1180 = The Sailing Master's Room
   Reversible: delete this block.
   ========================================================= */
.page-id-1181 #brxe-fwnwvr,
.page-id-1167 #brxe-fwnwvr,
.page-id-1180 #brxe-fwnwvr {
  align-items: center;
}

/* =========================================================
   "OTHER ROOMS" vertical spacing — single-room pages
   ---------------------------------------------------------
   Same three pages were also missing the section's row-gap
   (#brxe-qotcys has row-gap:45px on rooms 1/2/4 but 0 here),
   so after centering the title it sat flush against the photo
   slider — the gap differed from the first three rooms. Restore
   the 45px section gap so the title-to-photos spacing matches.
   Reversible: delete this block.
   ========================================================= */
.page-id-1181 #brxe-qotcys,
.page-id-1167 #brxe-qotcys,
.page-id-1180 #brxe-qotcys {
  row-gap: 45px;
}

/* =========================================================
   "OTHER ROOMS" dividers — single-room pages
   ---------------------------------------------------------
   On rooms 1/2/4 the heading uses the original divider design:
   a short green accent (#brxe-gprbyj, 100px, brand green), a
   subtle white rule (#brxe-vdncga, 770px) and a short black
   under-title line (#brxe-eqiirn, 100px). On these three pages
   the same elements were saved as full-width BLACK lines, so the
   heading showed heavy black rules. Restore the original look
   (match rooms 1/2/4 exactly). Reversible: delete this block.
     1167 = Quartermaster · 1180 = Sailing Master · 1181 = Powder Monkey
   ========================================================= */
.page-id-1167 #brxe-gprbyj .line,
.page-id-1180 #brxe-gprbyj .line,
.page-id-1181 #brxe-gprbyj .line {
  width: 100px;
  max-width: 100%;
  border-top: 2px solid rgb(20, 76, 73);
}
.page-id-1167 #brxe-vdncga,
.page-id-1180 #brxe-vdncga,
.page-id-1181 #brxe-vdncga {
  justify-content: center;
}
.page-id-1167 #brxe-vdncga .line,
.page-id-1180 #brxe-vdncga .line,
.page-id-1181 #brxe-vdncga .line {
  width: 770px;
  max-width: 100%;
  border-top: 2px solid rgb(255, 255, 255);
}
.page-id-1167 #brxe-eqiirn,
.page-id-1180 #brxe-eqiirn,
.page-id-1181 #brxe-eqiirn {
  justify-content: center;
}
.page-id-1167 #brxe-eqiirn .line,
.page-id-1180 #brxe-eqiirn .line,
.page-id-1181 #brxe-eqiirn .line {
  width: 100px;
  max-width: 100%;
  border-top-width: 1px;
}

/* =========================================================
   Room photo gallery — restore 2-column layout on rooms 3/5/6
   ---------------------------------------------------------
   The room photo grid (#brxe-lzicpq) holds exactly TWO photos.
   On rooms 1/2/4 it is a 2-column grid (1fr 1fr, 20px gap), so
   the pair fills the centred 768px block. On these three pages
   the same grid was saved with 3 columns and no gap, so two
   photos sit in the left two columns and leave an empty third
   column on the right — the photos look shifted left / uncentred
   when scrolling down. Restore the 2-column + 20px-gap layout to
   match rooms 1/2/4 exactly (responsive: 1fr columns scale at
   every breakpoint). Reversible: delete this block.
     1167 = Quartermaster · 1180 = Sailing Master · 1181 = Powder Monkey
   ========================================================= */
.page-id-1167 #brxe-lzicpq,
.page-id-1180 #brxe-lzicpq,
.page-id-1181 #brxe-lzicpq {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* =========================================================
   Booking search bar centering — rooms 3/5/6
   ---------------------------------------------------------
   The search-section container (#brxe-akqsxv) is align-items:center
   on rooms 1/2/4, which centres the 768px MotoPress search block
   inside the 1100px content column. On these three pages it was
   saved as align-items:flex-start, so the CHECK-IN / CHECK-OUT /
   Search bar sits left-of-centre. Match rooms 1/2/4 by centring it.
   Reversible: delete this block.
     1167 = Quartermaster · 1180 = Sailing Master · 1181 = Powder Monkey
   ========================================================= */
.page-id-1167 #brxe-akqsxv,
.page-id-1180 #brxe-akqsxv,
.page-id-1181 #brxe-akqsxv {
  align-items: center;
}

/* =========================================================
   Cream decorative design — rooms 3/5/6 (match rooms 1/2/4)
   ---------------------------------------------------------
   Client decision: ALL six room pages should use the original
   decorative design of rooms 1/2/4 — cream content background,
   dark-green band with the Koraba building graphic behind the
   booking search bar, and three windmill ornaments positioned
   OFF TO THE SIDES (not stacked in the centre).
   Rooms 3/5/6 (Quartermaster 1167 / Sailing Master 1180 /
   Powder Monkey 1181) contain the exact same elements but their
   per-page Bricks CSS lacks these rules, so the windmills fell
   into the page flow as three big circles stacked vertically in
   the centre (the reported glitch) and the backgrounds were
   missing. The rules below are copied 1:1 from room-2's Bricks
   CSS (post-1157.min.css) with literal color values:
     --bricks-color-clcfiy = rgb(249,246,237) cream
     --bricks-color-fokzah = rgb(20,76,73) brand green
   position:relative on the section is required so the ornament
   percentages resolve against it, exactly as on rooms 1/2/4.
   Reversible: delete this block.
   ========================================================= */
.page-id-1167 #brxe-qotcys,
.page-id-1180 #brxe-qotcys,
.page-id-1181 #brxe-qotcys {
  position: relative;
  background-color: rgb(249, 246, 237);
}
.page-id-1167 #brxe-aeirly,
.page-id-1180 #brxe-aeirly,
.page-id-1181 #brxe-aeirly {
  background-color: rgb(20, 76, 73);
  background-image: url("/wp-content/uploads/2023/11/KORABA-LOGO-element.svg");
  background-position: top right;
  background-repeat: no-repeat;
}
.page-id-1167 #brxe-bdxrap,
.page-id-1180 #brxe-bdxrap,
.page-id-1181 #brxe-bdxrap {
  position: absolute;
  top: 10%;
  left: -14%;
}
.page-id-1167 #brxe-ikdanv,
.page-id-1180 #brxe-ikdanv,
.page-id-1181 #brxe-ikdanv {
  position: absolute;
  top: 50%;
  right: -14%;
}
.page-id-1167 #brxe-zgrlto,
.page-id-1180 #brxe-zgrlto,
.page-id-1181 #brxe-zgrlto {
  position: absolute;
  top: 70%;
  left: -14%;
}