/*
 * Kiani Akti - layout and component styles.
 *
 * Design tokens (colour, typography, spacing, shadows, radii) live in theme.json
 * so the Site Editor's Styles panel drives them. This file holds only what
 * theme.json cannot express: sticky positioning, grids, image cropping and the
 * handful of custom classes the patterns use. Every value here references a
 * preset custom property rather than a literal, so a global change in Styles
 * propagates through this file instead of being overridden by it.
 *
 * It is enqueued with a dependency on 'global-styles', so it loads after the
 * generated global stylesheet and wins on source order. That is why it needs no
 * !important: adding one would break the editability above.
 */

:root{
  --ka-gutter:16px;
  --ka-wide:min(var(--wp--style--global--wide-size), calc(100vw - 2 * var(--ka-gutter)));
}
html{scroll-behavior:smooth}
body{margin:0}
.wp-site-blocks{padding:0}
.ka-inner,
.ka-header-inner,
.ka-hero-content,
.ka-footer-inner,
.ka-amenities{
  width:var(--ka-wide);
  margin-inline:auto;
}

/* HEADER ------------------------------------------------------------------ */
/* The sticky lives on the template-part wrapper, not on .ka-header: the wrapper
   is .ka-header's own parent and is exactly as tall as it, so a sticky inner
   group would have no room to travel and would scroll straight off. */
.wp-site-blocks > header.wp-block-template-part{
  position:sticky;
  top:0;
  z-index:1000;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part{top:32px}
@media(max-width:782px){
  .admin-bar .wp-site-blocks > header.wp-block-template-part{top:46px}
}
.ka-header{
  margin-block:0;
  border-bottom:1px solid color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent);
  box-shadow:var(--wp--preset--shadow--header);
}
.ka-header-inner{min-height:var(--wp--custom--header-height)}
.ka-brand-wrap{gap:10px}
/* The mark is wider than it is tall, so a fixed square letterboxed it into a
   fraction of its own box. Width only, height from the aspect ratio. */
.ka-brand-wrap .wp-block-site-logo,
.ka-footer-lockup .wp-block-site-logo{margin:0}
.ka-brand-wrap .wp-block-site-logo img{
  width:56px;
  height:auto;
}
.ka-footer-lockup{gap:12px}
.ka-footer-lockup .wp-block-site-logo img{
  width:56px;
  height:auto;
  /* The mark is navy artwork on a navy panel, so it needs inverting here. */
  filter:brightness(0) invert(1);
  opacity:.92;
}
.ka-brand{margin:0}
.ka-brand a{text-decoration:none}
.ka-tagline{
  margin:3px 0 0;
  color:var(--wp--preset--color--muted);
  font-size:.7rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ka-nav{margin-left:auto}
.ka-nav .wp-block-navigation__container{gap:20px}
.ka-nav .wp-block-navigation-item__content{text-decoration:none}
/* Core ships `.wp-block-navigation .wp-block-navigation-item__content
   .wp-block-navigation-item__content{color:inherit}` -- a deliberately doubled
   class, specificity (0,3,0). These rules repeat the class to match it rather
   than escalating to !important. */
.ka-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{
  color:var(--wp--preset--color--sea);
}
/* Polylang renders its own <li class="lang-item">, so target that rather than
   the className we pass, which lands on the block wrapper. */
.wp-block-navigation-item.lang-item .wp-block-navigation-item__content.wp-block-navigation-item__content{
  color:var(--wp--preset--color--sea);
  font-size:.72rem;
  letter-spacing:.06em;
}
.wp-block-navigation-item.current-lang .wp-block-navigation-item__content.wp-block-navigation-item__content{
  font-weight:700;
}
.ka-contact-nav .wp-block-navigation-item__content.wp-block-navigation-item__content{
  color:var(--wp--preset--color--white);
  background:var(--wp--preset--color--navy);
  border-radius:var(--wp--custom--radius--pill);
  padding:.62rem 1rem;
}
.ka-contact-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{
  color:var(--wp--preset--color--white);
  background:var(--wp--preset--color--navy-dark);
}

/* Mobile navigation overlay */
.ka-nav .wp-block-navigation__responsive-container-open{color:var(--wp--preset--color--navy)}
.ka-nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--wp--preset--color--cream);
  padding:28px 22px;
}
.ka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items:flex-start;
  gap:18px;
}
.ka-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content{
  color:var(--wp--preset--color--navy);
  font-family:var(--wp--preset--font-family--kiani-serif);
  font-size:clamp(1.65rem,8vw,2.6rem);
  line-height:1.1;
}

/* Section eyebrow: small caps label above each heading.
   Doubled class because `.ka-section p` (0,1,1) would otherwise outrank it. */
.ka-eyebrow.ka-eyebrow{
  margin:0 0 10px;
  color:var(--wp--preset--color--sea);
  font-size:var(--wp--preset--font-size--eyebrow);
  font-weight:800;
  letter-spacing:.18em;
  line-height:1.4;
  text-transform:uppercase;
}

/* HERO -------------------------------------------------------------------- */
.ka-hero{
  min-height:clamp(520px,67vw,720px);
  margin-block:0;
  overflow:visible;
}
/* Gradient scrim behind the hero copy.
   Measured white-on-photograph contrast was 3.48:1, which is fine for the large
   subtitle but fails the 4.5:1 that the eyebrow and lead need. A scrim fixes
   that where the text actually sits, instead of dimming the whole photograph
   and flattening it. */
.ka-hero::after{
  content:"";
  position:absolute;
  inset:0;
  /* 0, not 1. Core pins both the dim layer and the content to z-index 1 with a
     selector far too specific to outrank, so the scrim goes underneath them and
     above the photograph instead: image -> scrim -> dim -> text. */
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(6,26,44,.60) 0%,
    rgba(6,26,44,.38) 40%,
    rgba(6,26,44,.06) 70%,
    rgba(6,26,44,0) 100%);
}
@media(max-width:781px){
  .ka-hero::after{
    background:linear-gradient(180deg,
      rgba(6,26,44,.05) 0%,
      rgba(6,26,44,.42) 34%,
      rgba(6,26,44,.46) 74%,
      rgba(6,26,44,.10) 100%);
  }
}
.ka-hero .wp-block-cover__inner-container{
  min-height:clamp(520px,67vw,720px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.ka-hero-content{padding-block:30px}
.ka-hero-copy{max-width:560px}
.ka-hero .ka-eyebrow.ka-eyebrow{color:var(--wp--preset--color--white)}
.ka-hero-title{
  margin:0;
  color:var(--wp--preset--color--white);
  font-size:var(--wp--preset--font-size--hero);
  letter-spacing:.06em;
  line-height:1;
}
.ka-hero-sub{
  margin:14px 0 0;
  color:var(--wp--preset--color--white);
  font-family:var(--wp--preset--font-family--kiani-serif);
  font-size:clamp(1.35rem,2.6vw,1.9rem);
  font-weight:500;
  line-height:1.18;
}
.ka-hero-lead{
  margin:16px 0 0;
  max-width:430px;
  color:var(--wp--preset--color--white);
  font-size:clamp(.95rem,1.4vw,1.05rem);
  line-height:1.6;
}
.ka-hero-buttons{
  margin-top:26px;
  gap:10px;
}
.ka-hero-buttons .wp-block-button__link{
  min-width:150px;
  padding:.72rem 1.1rem;
  font-size:.78rem;
}
@media(max-width:599px){
  .ka-hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }
  .ka-hero-buttons .wp-block-button{width:100%}
  .ka-hero-buttons .wp-block-button__link{
    display:block;
    width:100%;
    text-align:center;
  }
  /* The design leads on the descriptive line on a phone, not the wordmark.
     The h1 is hidden visually rather than removed, so the page still has
     exactly one h1 and screen readers still announce it. */
  .ka-hero-title{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .ka-hero-sub{
    margin-top:6px;
    font-size:clamp(1.7rem,8.5vw,2.2rem);
  }
}
/* Scroll cue: a pill straddling the bottom edge of the hero. */
.ka-hero-scroll{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%);
  margin:0;
  z-index:2;
}
.ka-hero-scroll a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:.62rem 1.2rem;
  background:var(--wp--preset--color--white);
  color:var(--wp--preset--color--navy);
  border-radius:var(--wp--custom--radius--pill);
  box-shadow:var(--wp--preset--shadow--card);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
}

/* SECTIONS ---------------------------------------------------------------- */
.ka-section{
  padding:64px var(--ka-gutter);
  margin-block:0;
}
.ka-section h2{margin-top:0;margin-bottom:16px}
.ka-section p{font-size:.95rem;line-height:1.7}
.ka-mobile-stack{gap:28px}
@media(max-width:781px){
  /* Copy first, image second, without changing the markup order that the
     desktop layout depends on. */
  .ka-mobile-stack{flex-direction:column-reverse}
}
.ka-editorial-image img{
  width:100%;
  min-height:320px;
  object-fit:cover;
  border-radius:var(--wp--custom--radius--card);
}

/* Experience */
.ka-experience{background:var(--wp--preset--color--white)}
.ka-experience .wp-block-columns{align-items:center}
.ka-experience .ka-experience-copy{max-width:490px;margin-inline:0}

/* Amenities */
.ka-amenities-wrap{
  padding-top:0;
  background:var(--wp--preset--color--white);
}
.ka-amenities{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--wp--preset--color--hairline);
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
/* Mobile is a vertical list with the icon beside the label, as the approved
   design shows; it becomes the centred five-across row from 600px up. */
.ka-amenity{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:15px 2px;
  text-align:left;
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.ka-amenity:last-child{border-bottom:0}
.ka-amenity .ka-icon{color:var(--wp--preset--color--navy)}
.ka-amenity-label{
  margin:0;
  color:var(--wp--preset--color--navy);
  font-size:.8rem;
  font-weight:600;
}

/* Split section: narrow intro column beside a card grid. Used by rooms, area
   and blog, which share one layout in the approved design. */
.ka-split{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}
.ka-split-intro{align-self:center}
.ka-split-intro p{max-width:360px}
.ka-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

/* Cards */
.ka-rooms{background:var(--wp--preset--color--cream)}
.ka-card{
  overflow:hidden;
  border:1px solid var(--wp--preset--color--hairline);
  border-radius:var(--wp--custom--radius--card);
  background:var(--wp--preset--color--white);
  box-shadow:var(--wp--preset--shadow--card);
}
.ka-card .wp-block-image{margin:0}
.ka-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.ka-card-link{
  margin:0;
  padding:13px 15px;
}
.ka-card-link a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--wp--preset--color--navy);
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
}
.ka-card-link a:hover{color:var(--wp--preset--color--sea)}

/* Restaurant */
.ka-restaurant{background:var(--wp--preset--color--sand)}
.ka-restaurant .ka-restaurant-copy{max-width:470px;margin-inline:0}

/* Area */
.ka-area{background:var(--wp--preset--color--white)}
.ka-area-card .wp-block-image{margin:0}
.ka-area-card img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  border-radius:var(--wp--custom--radius--image);
  display:block;
}
.ka-card-label{
  margin:9px 0 0;
  color:var(--wp--preset--color--navy);
  font-size:.85rem;
  font-weight:600;
}

/* Blog */
.ka-blog{background:var(--wp--preset--color--white)}
.ka-blog-grid .wp-block-post-template{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin:0;
  padding:0;
}
.ka-blog-grid img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--wp--custom--radius--image);
}
.ka-blog-grid .wp-block-post-title{
  margin:10px 0 4px;
  font-size:.9rem;
  line-height:1.35;
}
.ka-blog-grid .wp-block-post-title a{text-decoration:none}
.ka-blog-grid .wp-block-post-date{
  margin:0;
  color:var(--wp--preset--color--muted);
  font-size:.72rem;
}

/* Inline text link with trailing arrow */
.ka-textlink{margin:14px 0 0}
.ka-textlink a{
  color:var(--wp--preset--color--navy);
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
}
.ka-textlink a:hover{color:var(--wp--preset--color--sea)}

.ka-icon{flex:none;vertical-align:middle}

/* FOOTER ------------------------------------------------------------------ */
.ka-footer{
  margin-block:0;
  padding:56px var(--ka-gutter) 30px;
}
.ka-footer h3,
.ka-footer h4{color:var(--wp--preset--color--white)}
/* Without this the global link colour (navy) lands on the navy-dark panel. */
.ka-footer a:not(.wp-element-button){color:var(--wp--preset--color--white)}
.ka-footer a:not(.wp-element-button):hover{color:var(--wp--preset--color--sky)}
/* Below the desktop breakpoint the footer is a three-column grid:
   the brand spans the full first row, then social / address / phone, then
   email and the enquiry button. */
.ka-footer-top{
  display:grid;
  /* minmax(0,1fr) rather than 1fr: a plain fr keeps an auto minimum, so the
     longest address pushed its own column wider than the other two. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 20px;
  align-items:start;
}
.ka-footer-brand{grid-column:1 / -1}
.ka-footer-cta{grid-column:2 / -1}
.ka-footer-brand .ka-brand a{color:var(--wp--preset--color--white)}
.ka-footer-brand .ka-tagline{color:var(--wp--preset--color--sky)}
.ka-footer-claim{
  margin:14px 0 0;
  color:var(--wp--preset--color--sky);
  font-size:.85rem;
}
.ka-footer-social .ka-icon{
  color:var(--wp--preset--color--sky);
  display:block;
}
.ka-footer-social .ka-social{margin-top:10px}
@media(max-width:599px){
  /* Three columns on a 390px screen leave about 106px each, and the phone
     number needs every pixel of it to stay on one line. */
  .ka-footer-top{gap:24px 12px}
  .ka-contact p,
  .ka-contact-label,
  .ka-footer-social .ka-contact-label{font-size:.74rem}
  .ka-footer-cta .wp-block-button__link{
    font-size:.72rem;
    padding:.7rem 1rem;
  }
  .ka-social .wp-social-link{margin:0 4px 0 0}
}
.ka-social{margin-top:16px}
.ka-social .wp-social-link{
  margin:0 6px 0 0;
  padding:0;
}
.ka-contact .ka-icon{
  color:var(--wp--preset--color--sky);
  /* Block, not inline: as an inline element the icon sits on a text baseline and
     drags the descender gap along with it, which reads as loose spacing. */
  display:block;
}
.ka-contact-label{
  margin:8px 0 4px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
}
.ka-contact p{
  margin:0;
  color:var(--wp--preset--color--sky);
  font-size:.85rem;
}
.ka-contact p a{text-decoration:none}
.ka-contact p a:hover{text-decoration:underline}
.ka-footer-cta{align-self:center}
.ka-footer-cta .wp-block-button__link{
  font-size:.78rem;
  white-space:nowrap;
}
.ka-footer-rule{
  margin:34px 0 18px;
  border-color:color-mix(in srgb, var(--wp--preset--color--white) 18%, transparent);
}
.ka-footer-legal{gap:10px}
.ka-footer-legal p{
  margin:0;
  color:color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
  font-size:.72rem;
}

/* Mobile fixed contact bar */
.ka-mobile-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:0;
  background:var(--wp--preset--color--navy-dark);
  box-shadow:var(--wp--preset--shadow--bar);
}
.ka-mobile-cta__item{
  margin:0;
  border-right:1px solid color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
}
.ka-mobile-cta__item:last-child{border-right:0}
.ka-mobile-cta__item a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:9px 5px;
  color:var(--wp--preset--color--white);
  text-decoration:none;
  font-size:.66rem;
  font-weight:600;
}
body{padding-bottom:52px}

/* TEMPLATE PAGES ---------------------------------------------------------- */
/* Shared banner for single posts, archives, search and 404. */
.ka-page-head{
  padding:46px var(--ka-gutter) 34px;
  margin-block:0;
  background:var(--wp--preset--color--cream);
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.ka-page-title{
  margin:6px 0 0;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.1;
}
.ka-post-meta{
  margin:10px 0 0;
  color:var(--wp--preset--color--muted);
  font-size:.75rem;
}
.ka-page-head .wp-block-post-terms{
  display:block;
  margin:0;
}

/* Single post */
.ka-single-image{margin:0}
.ka-single-image img{
  width:100%;
  object-fit:cover;
}
.ka-single-body{
  padding:44px var(--ka-gutter) 64px;
}
.ka-single-body p{line-height:1.75}

/* Archive and search results */
.ka-archive{padding-top:44px}
.ka-pagination{
  margin-top:36px;
  gap:10px;
  font-size:.82rem;
}
.ka-pagination a{text-decoration:none}
.ka-searchform{margin-top:18px;max-width:420px}
.ka-searchform .wp-block-search__input{
  padding:.6rem .8rem;
  border:1px solid var(--wp--preset--color--hairline);
  border-radius:var(--wp--custom--radius--card);
  font-size:.85rem;
}
.ka-searchform .wp-block-search__button{
  border-radius:var(--wp--custom--radius--pill);
  font-size:.78rem;
}

/* 404 */
.ka-404-inner{max-width:560px}

/* ARTICLE BODY ------------------------------------------------------------ */
.ka-post-image{margin:26px 0}
.ka-post-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--wp--custom--radius--image);
  display:block;
}
.ka-single-body h2{
  margin:32px 0 10px;
  font-size:1.3rem;
}
.ka-single-body ul{
  margin:0 0 16px;
  padding-left:20px;
}
.ka-single-body li{
  margin-bottom:6px;
  font-size:.92rem;
  line-height:1.65;
}
/* Marks draft copy that still needs the owner's own words or a legal review.
   Deliberately conspicuous: it should be uncomfortable to leave in place. */
.ka-legal-notice{
  padding:12px 16px;
  margin-bottom:26px;
  background:var(--wp--preset--color--sand);
  border-left:3px solid var(--wp--preset--color--sea);
  border-radius:0 var(--wp--custom--radius--image) var(--wp--custom--radius--image) 0;
  font-size:.85rem;
}

/* GALLERY PAGE ------------------------------------------------------------ */
.ka-gallery-section{
  padding-top:44px;
  background:var(--wp--preset--color--white);
}
.ka-gallery-section--alt{background:var(--wp--preset--color--cream)}
.ka-gallery-section h2{margin-top:0}
.ka-gallery-intro{
  max-width:560px;
  margin-bottom:0;
}

/* AREA PAGE --------------------------------------------------------------- */
.ka-area-intro{
  padding-top:44px;
  padding-bottom:0;
  background:var(--wp--preset--color--white);
}
.ka-area-intro h2{margin-top:0}
.ka-area-lead{
  max-width:640px;
  font-size:1rem;
  line-height:1.7;
}
.ka-area-row{background:var(--wp--preset--color--white)}
/* Alternate the panel colour so consecutive 50/50 rows read as separate. */
.ka-area-row--flip{background:var(--wp--preset--color--cream)}
/* ...and flip the image to the other side, without touching the markup order,
   so the page does not become a column of identical left-image rows. */
.ka-area-row--flip .wp-block-columns{flex-direction:row-reverse}
.ka-area-copy{max-width:490px}
.ka-area-copy h2{margin-top:0}

.ka-distances{background:var(--wp--preset--color--sand)}
.ka-distances h2{margin-top:0}
.ka-distance-table{margin:24px 0 0;max-width:620px}
.ka-distance-table table{
  width:100%;
  border-collapse:collapse;
}
.ka-distance-table td{
  padding:9px 0;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--wp--preset--color--navy) 12%, transparent);
  font-size:.88rem;
}
.ka-distance-table tr:last-child td{border-bottom:0}
.ka-distance-table td:nth-child(2),
.ka-distance-table td:last-child{
  width:1%;
  padding-left:22px;
  text-align:right;
  white-space:nowrap;
  color:var(--wp--preset--color--navy);
  font-weight:600;
}

/* RESTAURANT PAGE --------------------------------------------------------- */
.ka-restaurant-intro{
  padding-top:44px;
  background:var(--wp--preset--color--white);
}
.ka-restaurant-lead h2{margin-top:0}
.ka-hours .ka-contact-card p{margin-bottom:4px}

.ka-menu{background:var(--wp--preset--color--sand)}
.ka-menu h2{margin-top:0}
.ka-menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:30px 52px;
  margin-top:26px;
}
.ka-menu-title{
  margin:0 0 10px;
  padding-bottom:8px;
  font-size:1.05rem;
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
/* A price list is tabular data, so it stays a table -- which is also the block
   the client can actually maintain, since adding a dish is adding a row. The
   styling just stops it looking like a spreadsheet. */
.ka-menu-table{margin:0}
.ka-menu-table table{
  width:100%;
  border-collapse:collapse;
}
.ka-menu-table td{
  padding:7px 0;
  border:0;
  border-bottom:1px dotted color-mix(in srgb, var(--wp--preset--color--navy) 22%, transparent);
  font-size:.88rem;
  vertical-align:baseline;
}
.ka-menu-table tr:last-child td{border-bottom:0}
.ka-menu-table td:last-child{
  width:1%;
  padding-left:18px;
  text-align:right;
  white-space:nowrap;
  color:var(--wp--preset--color--navy);
  font-weight:600;
}
.ka-menu-note{
  margin-top:26px;
  color:var(--wp--preset--color--muted);
  font-size:.78rem;
}

.ka-restaurant-gallery{background:var(--wp--preset--color--white)}
.ka-restaurant-gallery h2{margin-top:0}
.ka-gallery{margin-top:24px}
/* Core's gallery is a flex row, so a trailing odd image grows to fill the line
   and the rows come out ragged. A grid keeps every tile the same size. */
.ka-gallery.wp-block-gallery,
.ka-room-gallery.wp-block-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
/* Core sizes gallery figures with
   `.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image)`.
   The `:not(#id)` pushes that to ID-level specificity, so these selectors carry
   their own `:not(#individual-image)` to match it and win on source order,
   rather than reaching for !important. */
.ka-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
.ka-room-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
  margin:0;
  width:100%;
  max-width:none;
}
.ka-gallery img,
.ka-room-gallery img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  border-radius:var(--wp--custom--radius--image);
}

/* ROOMS (Room post type) --------------------------------------------------- */
.ka-room-grid .wp-block-post-template{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.ka-room-grid .wp-block-post-featured-image{margin:0}
.ka-room-grid img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.ka-card-body{padding:13px 15px}
/* Reproduces the approved card row: title left, arrow right. */
.ka-card-heading{
  margin:0;
  font-size:.85rem;
  line-height:1.35;
}
.ka-card-heading a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--wp--preset--color--navy);
  text-decoration:none;
}
.ka-card-heading a::after{
  content:"→";
  flex:none;
  opacity:.65;
}
.ka-card-heading a:hover{color:var(--wp--preset--color--sea)}
.ka-card-meta{
  margin:6px 0 0;
  color:var(--wp--preset--color--muted);
  font-size:.75rem;
  line-height:1.5;
}
.ka-room-archive{padding-top:44px}

/* Single room */
.ka-room-hero{margin:0}
.ka-room-hero img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.ka-room-single{padding-top:40px}
.ka-room-meta{
  margin:0 0 14px;
  color:var(--wp--preset--color--sea);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
}
.ka-room-body h2{
  margin:30px 0 12px;
  font-size:1.25rem;
}
.ka-room-amenities{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 18px;
  margin:0;
  padding:0;
  list-style:none;
}
.ka-room-amenities li{
  position:relative;
  padding-left:18px;
  font-size:.85rem;
}
.ka-room-amenities li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--wp--preset--color--sea);
}
.ka-room-gallery{margin-top:8px}
.ka-room-cta{align-self:start}

/* CONTACT PAGE ------------------------------------------------------------ */
.ka-contact-page{padding-top:44px}
.ka-contact-form .ka-eyebrow.ka-eyebrow{margin-bottom:8px}
.ka-contact-form h2{margin-top:0}
.ka-contact-card{
  padding:22px 22px 24px;
  background:var(--wp--preset--color--cream);
  border:1px solid var(--wp--preset--color--hairline);
  border-radius:var(--wp--custom--radius--card);
}
.ka-contact-card-title{
  margin:0 0 10px;
  font-size:1rem;
}
.ka-contact-card p{
  margin:0 0 6px;
  font-size:.88rem;
}
.ka-contact-phone{font-size:1.15rem;font-weight:700}
.ka-contact-phone a{
  color:var(--wp--preset--color--navy);
  text-decoration:none;
}
.ka-map{margin-top:18px}
.ka-map iframe{
  width:100%;
  height:320px;
  border:1px solid var(--wp--preset--color--hairline);
  border-radius:var(--wp--custom--radius--card);
  display:block;
}
.ka-map p{margin:8px 0 0;font-size:.78rem}

/* Fluent Forms, restyled to the theme's tokens rather than its own defaults. */
.ka-contact-form .fluentform{margin-top:20px}
.ka-contact-form .ff-el-input--label label{
  font-size:.78rem;
  font-weight:600;
  color:var(--wp--preset--color--navy);
}
.ka-contact-form .ff-el-form-control{
  padding:.62rem .8rem;
  border:1px solid var(--wp--preset--color--hairline);
  border-radius:var(--wp--custom--radius--card);
  background:var(--wp--preset--color--white);
  font-family:inherit;
  font-size:.88rem;
  color:var(--wp--preset--color--ink);
}
.ka-contact-form .ff-el-form-control:focus{
  border-color:var(--wp--preset--color--sea);
  outline:2px solid color-mix(in srgb, var(--wp--preset--color--sea) 35%, transparent);
  outline-offset:1px;
}
.ka-contact-form .ff-el-group{margin-bottom:14px}
.ka-contact-form .ff-btn-submit{
  padding:.85rem 1.6rem;
  background:var(--wp--preset--color--navy);
  color:var(--wp--preset--color--white);
  border:0;
  border-radius:var(--wp--custom--radius--pill);
  font-family:inherit;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:background-color .2s ease;
}
.ka-contact-form .ff-btn-submit:hover{background:var(--wp--preset--color--navy-dark)}
.ka-contact-form .ff-el-form-check label{font-size:.8rem;line-height:1.5}
.ka-contact-form .text-danger,
.ka-contact-form .error{font-size:.76rem}

/* MOTION ------------------------------------------------------------------ */
/* Hover affordances are unconditional; they need no JavaScript. */
.ka-card,
.ka-area-card .wp-block-image,
.ka-blog-grid .wp-block-post-featured-image{
  transition:transform .35s ease, box-shadow .35s ease;
}
.ka-card img,
.ka-area-card img,
.ka-blog-grid img{
  transition:transform .6s ease;
}
.ka-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(17,49,75,.12);
}
.ka-card:hover img,
.ka-area-card:hover img,
.ka-blog-grid li:hover img{transform:scale(1.04)}
.ka-card,
.ka-area-card .wp-block-image,
.ka-blog-grid .wp-block-post-featured-image{overflow:hidden}
.ka-textlink a,
.ka-card-link a,
.wp-block-button__link,
.ka-nav .wp-block-navigation-item__content{
  transition:color .2s ease, background-color .2s ease, transform .2s ease;
}
.ka-textlink a:hover{transform:translateX(3px)}

/* Scroll reveal only exists once motion.js has flagged <html>, so content is
   never hidden by a script that might not run. */
.ka-motion .ka-split-intro,
.ka-motion .ka-card,
.ka-motion .ka-area-card,
.ka-motion .ka-editorial-image,
.ka-motion .ka-experience-copy,
.ka-motion .ka-restaurant-copy,
.ka-motion .ka-amenity,
.ka-motion .ka-blog-grid li{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
/* Doubled class on purpose. The hiding rules above include an element selector
   for the blog list (`.ka-blog-grid li`), which scores (0,2,1) and outranked a
   single `.is-revealed` at (0,2,0) -- so the class was applied and nothing
   happened, leaving those cards permanently invisible. (0,3,0) clears any of
   them. */
.ka-motion .is-revealed.is-revealed{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .ka-motion .ka-split-intro,
  .ka-motion .ka-card,
  .ka-motion .ka-area-card,
  .ka-motion .ka-editorial-image,
  .ka-motion .ka-experience-copy,
  .ka-motion .ka-restaurant-copy,
  .ka-motion .ka-amenity,
  .ka-motion .ka-blog-grid li{
    opacity:1;
    transform:none;
    transition:none;
  }
  .ka-card,
  .ka-card img,
  .ka-area-card img,
  .ka-blog-grid img,
  .ka-textlink a{transition:none}
  .ka-card:hover{transform:none}
  .ka-card:hover img,
  .ka-area-card:hover img,
  .ka-blog-grid li:hover img{transform:none}
  html{scroll-behavior:auto}
}

/* Tablet ------------------------------------------------------------------ */
@media(min-width:600px){
  :root{--ka-gutter:22px}
  .ka-section{padding:78px var(--ka-gutter)}
  .ka-header-inner{min-height:72px}
  .ka-amenities{grid-template-columns:repeat(5,1fr)}
  .ka-amenity{
    flex-direction:column;
    justify-content:center;
    gap:9px;
    min-height:112px;
    padding:20px 10px;
    text-align:center;
    border-right:1px solid var(--wp--preset--color--hairline);
    border-bottom:0;
  }
  .ka-amenity:last-child{border-right:0}
  .ka-cards--3{grid-template-columns:repeat(3,1fr)}
  .ka-room-grid .wp-block-post-template{grid-template-columns:repeat(3,1fr)}
  .ka-blog-grid .wp-block-post-template{grid-template-columns:repeat(3,1fr)}
}

/* Desktop ----------------------------------------------------------------- */
@media(min-width:960px){
  :root{--ka-gutter:32px}
  .ka-header-inner{min-height:74px}
  .ka-hero,
  .ka-hero .wp-block-cover__inner-container{min-height:620px}
  .ka-section{padding:86px var(--ka-gutter)}
  .ka-mobile-stack{gap:56px}
  .ka-editorial-image img{min-height:430px}
  .ka-split{grid-template-columns:1fr 2fr;gap:48px}
  .ka-split--contact{grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
  .ka-split--room{grid-template-columns:1.6fr 1fr;gap:56px;align-items:start}
  .ka-menu-grid{grid-template-columns:1fr 1fr}
  .ka-gallery.wp-block-gallery,
  .ka-room-gallery.wp-block-gallery{grid-template-columns:repeat(3,1fr)}
  .ka-mobile-cta{display:none}
  body{padding-bottom:0}
  .ka-footer{padding:72px var(--ka-gutter) 34px}
  /* Keeping the phone number and address on one line is only possible once the
     columns are wide enough for it. */
  .ka-contact p{text-wrap:nowrap}
  .ka-footer-top{
    grid-template-columns:1.4fr auto 1fr 1fr 1.1fr auto;
    gap:36px;
    align-items:start;
  }
  .ka-footer-brand,
  .ka-footer-cta{grid-column:auto}
}