/* ==========================================================================
   Naturally Memphis — brand overrides layered on top of the base template.
   Kept separate from main.css so template updates don't clobber brand work.
   ========================================================================== */

/* -- Plan Your Stay widget: accessible <label> in place of the template's
   plain <span> (main.css only styles a bare `span` here) — same look, but
   now programmatically associated with its field for screen readers. --- */
.gt-booking-reserve-wrapper .form-clt label {
  font-size: 18px;
  font-weight: 400;
  display: inline-block;
  font-family: "Gilda Display", sans-serif;
  color: var(--gt-white);
  margin-bottom: 10px;
}

/* -- Contact page form fields: fix invisible white-on-white text ----------
   main.css sets a global `input { color: var(--gt-white); }` (correct for
   the dark Plan Your Stay widget) and only overrides it back to dark text
   under a `.gt-contact-wrapper .gt-contact-right-items` wrapper the Contact
   page's actual markup doesn't have -- so on this page it never fires, and
   every field (Name, Email, Phone, Guests, Arrival, Departure) renders
   text the same color as its white background: invisible while typing. */
.contact-form-box .form-clt input,
.contact-form-box .form-clt textarea,
.contact-form-box .form-clt select {
  color: var(--gt-text);
}

/* -- Skip link (accessibility) ------------------------------------------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 10000;
  background: var(--gt-theme);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 6px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* -- Text wordmark logo (used in place of the source logo file in the header,
   which has a white background unsuited to sitting directly in the nav) --- */
.nm-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: "Gilda Display", serif;
  text-transform: none;
}
.nm-wordmark .nm-word-1 {
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff; /* header is dark/transparent until the header gains .sticky on scroll */
}
.nm-wordmark .nm-word-1 {
  margin-right: 5px;
}
.nm-wordmark .nm-word-2 {
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--gt-theme-2, var(--gt-theme));
  margin-top: -2px;
}
.nm-wordmark {
  flex-direction: row;
  align-items: baseline;
}

/* The base template reserves a wide 200px gap between the nav and the logo
   slot, sized for a short single-word logo; our nav has more/longer items,
   so tighten it up to avoid the last nav item wrapping to a second line. */
.header-1 .header-left {
  gap: 36px;
}
.header-right .gt-theme-btn {
  white-space: nowrap;
}
.sticky .nm-wordmark .nm-word-1 {
  color: var(--gt-header);
}
/* Inside the offcanvas panel (light background at all times) and the footer
   logo card, the wordmark should always use the dark variant. */
.offcanvas__logo .nm-word-1,
.gt-footer-section .nm-word-1 {
  color: var(--gt-header);
}

/* Footer logo: the source file is a JPG on a white background, so it needs a
   light card behind it to read cleanly against the dark footer photo. */
.nm-footer-logo {
  display: inline-block;
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 0;
}
.nm-footer-logo img {
  max-width: 190px;
  height: auto;
  display: block;
}

/* -- Sample-content labelling (reviews) ----------------------------------- */
.nm-sample-flag {
  display: inline-block;
  font-size: 13px;
  font-style: italic;
  color: var(--gt-text);
  opacity: .75;
  margin-top: 6px;
}

/* -- Info notes on Stay / FAQ pages (visible-but-quiet, not alarming) ----- */
.nm-note {
  font-size: 14px;
  color: var(--gt-text);
  background: var(--gt-accent-cream, #F6F2E9);
  border-left: 3px solid var(--gt-theme-2, var(--gt-theme));
  padding: 12px 16px;
  border-radius: 4px;
  margin: 18px 0;
}

/* -- Stay option cards (2-up, homepage + Stay page) ----------------------- */
.nm-stay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 767px) {
  .nm-stay-grid { grid-template-columns: 1fr; }
}
.nm-stay-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--gt-box-shadow);
  background: #fff;
}
.nm-stay-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.nm-stay-card .nm-stay-body {
  padding: 26px 26px 30px;
}
.nm-stay-card h3 {
  margin-bottom: 10px;
}
.nm-stay-card p {
  color: var(--gt-text);
  margin-bottom: 18px;
}

/* -- Simple amenity list (icons via existing flaticon set) ---------------- */
.nm-amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 30px 0;
}
.nm-amenity-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.nm-amenity-item i {
  color: var(--gt-theme);
  font-size: 26px;
  margin-top: 4px;
}
.nm-amenity-item h4 {
  font-size: 17px;
  margin-bottom: 4px;
}
.nm-amenity-item p {
  font-size: 14px;
  color: var(--gt-text);
  margin: 0;
}

/* -- Gallery grid ----------------------------------------------------------*/
.nm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .nm-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .nm-gallery-grid { grid-template-columns: 1fr; }
}
.nm-gallery-item {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.nm-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.nm-gallery-item:hover img {
  transform: scale(1.06);
}
.nm-gallery-item .nm-gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  color: #fff;
  padding: 30px 16px 12px;
  font-size: 14px;
}

/* -- Explore Memphis category cards --------------------------------------- */
.nm-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-top: 30px;
}
.nm-category-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--gt-box-shadow);
}
.nm-category-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  margin-bottom: 12px;
}
.nm-category-card h3 i {
  color: var(--gt-theme);
}
.nm-category-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nm-category-card ul li {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 14.5px;
  color: var(--gt-text);
}
.nm-category-card ul li:last-child { border-bottom: none; }
.nm-category-card .nm-dist {
  color: var(--gt-theme);
  font-weight: 600;
}

/* -- About teaser image fix ------------------------------------------------
   The base template's .gt-about-wrapper-3 image rules only constrain the
   image width below the 1199px breakpoint; above it, the <img> has no width
   rule at all, so a full-resolution source photo renders at its natural
   pixel width and blows out of the intended 370px/440px layered-card
   layout. Constrain both images at all widths so they respect their
   containers. */
.gt-about-wrapper-3 .gt-about-images-item .gt-about-image img {
  width: 100%;
  height: auto;
  display: block;
}
.gt-about-wrapper-3 .gt-about-images-item .gt-about-image .gt-about-image-2 img {
  width: 100%;
  height: auto;
  display: block;
  border: 8px solid var(--gt-white);
  border-radius: 16px;
}
/* At desktop widths the template's own image sizing leaves both images at
   their natural (portrait) aspect ratio, which makes the smaller "accent"
   photo end up taller than the main photo and cover it. Give both a fixed
   box with object-fit so the layered-card effect the template intends
   actually reads correctly with our real (portrait) property photos. */
@media (min-width: 1200px) {
  .gt-about-wrapper-3 .gt-about-images-item .gt-about-image {
    height: 460px;
  }
  .gt-about-wrapper-3 .gt-about-images-item .gt-about-image img {
    height: 100%;
    object-fit: cover;
  }
  .gt-about-wrapper-3 .gt-about-images-item .gt-about-image .gt-about-image-2 {
    width: 200px;
    max-width: 200px;
  }
  .gt-about-wrapper-3 .gt-about-images-item .gt-about-image .gt-about-image-2 img {
    height: 160px;
    object-fit: cover;
  }
}

/* -- "At A Glance" layered image fix ---------------------------------------
   Same template gap as the about-teaser images above: .gt-hotel-image-2's
   <img> has no width rule anywhere in main.css, so at full resolution it
   renders far wider than its 443px container. Unlike the about teaser,
   this section has no .fix/overflow:hidden ancestor, so the unconstrained
   image was pushing the whole page into horizontal scroll on mobile. */
.gt-enjoy-hotel-wrapper-3 .gt-hotel-images-items .gt-hotel-image .gt-hotel-image-2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 8px solid var(--gt-white);
}

/* -- Explore Memphis "Nearby" lists ---------------------------------------
   The base template's .menu-list is built for short label/value pairs
   (e.g. "Check-in: 2:00 PM") laid out with justify-content:space-between
   in a narrow box, which breaks when the value is a longer phrase. Our
   "Nearby" lists pair a place name with a short description, so stack
   them instead of forcing them to opposite edges. */
.gt-enjoy-hotel-wrapper-3 .gt-enjoy-hotel-content .menu-list.nm-menu-list {
  max-width: 420px;
}
.gt-enjoy-hotel-wrapper-3 .gt-enjoy-hotel-content .menu-list.nm-menu-list ul li {
  display: block;
  gap: 0;
}
.gt-enjoy-hotel-wrapper-3 .gt-enjoy-hotel-content .menu-list.nm-menu-list ul li span {
  display: block;
  margin-bottom: 2px;
}

/* -- Focus visibility (accessibility) -------------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gt-theme);
  outline-offset: 2px;
}

/* -- Small helper -----------------------------------------------------------*/
.nm-eyebrow-note { font-size: 13px; opacity: .8; }