/* Hatfield Inn: restored stylesheet.
   The original Beaver Builder layout CSS was not preserved anywhere, so this
   file rebuilds the look from the page markup, the logo colors and the fonts
   the pages load (Roboto, Montserrat, Lateef). */

/* #2d3290 and #f4f4f4 come from the site's own custom CSS (wp-custom-css, kept inline in each page) */
:root {
  --navy: #2d3290;
  --navy-dark: #1f2368;
  --red: #c62032;
  --red-light: #ff9aa2;
  --ink: #2a2d36;
  --muted: #5a5f6e;
  --light: #f4f4f4;
  --line: #e0e1ea;
  --white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--red); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5 {
  font-family: Montserrat, Roboto, sans-serif;
  color: var(--navy-dark);
  line-height: 1.2;
  margin: 0 0 .5em;
}
.fl-screen-reader-text, .screen-reader-text {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.fl-screen-reader-text:focus {
  left: 12px; top: 12px; width: auto; height: auto; padding: 10px 14px;
  background: var(--white); z-index: 1000;
}
.fl-clear, .pp-clear { clear: both; }

/* ---------- Grid ---------- */
.fl-row { position: relative; }
.fl-row-content-wrap { position: relative; padding: 72px 24px; }
.fl-row-fixed-width { max-width: 1160px; margin: 0 auto; }
.fl-col-group { display: flex; gap: 48px; align-items: center; }
.fl-col-group + .fl-col-group { margin-top: 44px; }
.fl-col { flex: 1 1 0; min-width: 0; }
.fl-col .fl-col-group { gap: 24px; align-items: flex-start; }
.fl-col .fl-col-group + .fl-col-group { margin-top: 20px; }
/* empty spacer columns stay narrow; groups of 3+ columns line up at the top */
.fl-col:not(:has(.fl-module)) { flex: .5 1 0; }
.fl-col-group:has(> .fl-col:nth-child(3)) { align-items: flex-start; }
.fl-col-bg-photo .fl-col-group { display: block; }
.fl-module + .fl-module { margin-top: 26px; }

/* Beaver Builder responsive visibility (default breakpoints) */
@media (min-width: 1201px) { [class*="fl-visible-"]:not(.fl-visible-large) { display: none !important; } }
@media (min-width: 993px) and (max-width: 1200px) { [class*="fl-visible-"]:not(.fl-visible-desktop) { display: none !important; } }
@media (min-width: 769px) and (max-width: 992px) { [class*="fl-visible-"]:not(.fl-visible-medium) { display: none !important; } }
@media (max-width: 768px) { [class*="fl-visible-"]:not(.fl-visible-mobile) { display: none !important; } }

/* ---------- Row backgrounds ---------- */
.fl-row-bg-color > .fl-row-content-wrap { background: var(--light); }
.fl-row-bg-gradient > .fl-row-content-wrap { background: var(--light); }
.fl-row-bg-photo > .fl-row-content-wrap { background-size: cover; background-position: center; }
/* Beaver Builder draws row overlays with ::after; the site's custom CSS restyles them on mobile */
.fl-row-bg-overlay > .fl-row-content-wrap::after,
.cstm-txt > .fl-row-content-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(120deg, rgba(45, 50, 144, .92) 0%, rgba(45, 50, 144, .8) 100%);
}
.fl-row-bg-overlay > .fl-row-content-wrap > .fl-row-content,
.cstm-txt > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 1; }
/* Desktop versions of the split gradients the custom CSS defines for mobile:
   photo shows beside the image column, navy panel sits behind the text. */
@media (min-width: 769px) {
  .cstm-txt > .fl-row-content-wrap::after {
    background-image: linear-gradient(90deg, rgba(45, 50, 144, .25) 0%, rgba(45, 50, 144, .25) 42%, rgba(45, 50, 144, .92) 42%);
  }
  /* text in the first column: flip the panel to the left */
  .cstm-txt:has(> .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:first-child .fl-module-pp-heading) > .fl-row-content-wrap::after {
    background-image: linear-gradient(270deg, rgba(45, 50, 144, .25) 0%, rgba(45, 50, 144, .25) 42%, rgba(45, 50, 144, .92) 42%);
  }
  .cstm-txt-2 > .fl-row-content-wrap { background-image: linear-gradient(90deg, #f4f4f4 64%, #2d3290 64%); }
  #hero-section > .fl-row-content-wrap::after {
    background-image: linear-gradient(90deg, rgba(31, 35, 104, .15) 0%, rgba(31, 35, 104, .55) 45%, rgba(31, 35, 104, .82) 100%);
  }
}
#hero-section > .fl-row-content-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* text on dark rows */
.fl-row-bg-overlay, .cstm-txt { color: #e8eaf4; }
.fl-row-bg-overlay h1, .fl-row-bg-overlay h2, .fl-row-bg-overlay h3, .fl-row-bg-overlay h4,
.cstm-txt h1, .cstm-txt h2, .cstm-txt h3, .cstm-txt h4 { color: var(--white); }
.fl-row-bg-overlay .pp-secondary-title, .cstm-txt .pp-secondary-title { color: var(--red-light); }
.fl-row-bg-overlay .pp-list-item-icon, .cstm-txt .pp-list-item-icon { color: var(--red-light); }
.fl-row-bg-overlay a:not(.fl-button), .cstm-txt a:not(.fl-button) { color: var(--white); }

/* column photo backgrounds that held text (check-in box on accommodations) */
.fl-col-bg-photo > .fl-col-content { border-radius: 4px; }
.fl-node-gnlker76yd50 > .fl-col-content, .fl-node-a1exg7t35q6h > .fl-col-content {
  background: var(--navy-dark); color: var(--white); padding: 28px;
}
.fl-node-gnlker76yd50 h2, .fl-node-gnlker76yd50 h3, .fl-node-a1exg7t35q6h h2, .fl-node-a1exg7t35q6h h3 { color: var(--white); }

/* Background photos (originals unknown; chosen from the site's own images) */
#hero-section > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2026/02/hero.jpg_1668716125.webp"); }
.fl-node-rytguclxz1ae > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/12/Grand-Suite-Living-Area-1.jpg"); }
.fl-node-z3xeh5mqlpav > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/12/Lobby.jpg"); }
.fl-node-z6g7wuevydsa > .fl-row-content-wrap { background: var(--light) url("/wp-content/uploads/2022/11/arches.png") center / cover; }
.fl-node-uf0s5ek8nipa > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/11/slide2.jpg"); }
.fl-node-374l2on0varg > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/12/Single-4.jpg"); }
.fl-node-j84bl7ehurt5 > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/12/Double-1.jpg"); }
.fl-node-9jnb6itfu2z8 > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/12/Grand-Suite-Living-Area-2.jpg"); }
.fl-node-ols2e7r3agyf > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/11/fmf_wVDVlAn.jpg"); }
.fl-node-w8rx0abkvf4u > .fl-row-content-wrap { background-image: url("/wp-content/uploads/2022/11/fmf_10270.jpg"); }

/* ---------- Header ---------- */
header.fl-builder-content { position: relative; z-index: 50; background: var(--white); box-shadow: 0 2px 14px rgba(20, 29, 87, .08); }
header .fl-row-content-wrap { padding: 0 24px; background: none; }
header .fl-col-group { gap: 24px; justify-content: space-between; }
header .fl-col { flex: 0 1 auto; }
header .fl-module + .fl-module { margin-top: 0; }
.hdr-1 .fl-col, .hdr-2 .fl-col { flex: 1 1 auto; }
.hdr-1 > .fl-row-content-wrap { padding: 0; background: var(--navy-dark); }
.hdr-1 .fl-row-fixed-width { max-width: none; }
.hdr-2 > .fl-row-content-wrap { background: var(--light); padding: 6px 24px; }
.hdr-2 .fl-col-group { justify-content: flex-end; }
.hdr-2 .fl-icon-wrap { justify-content: flex-end; font-weight: 500; font-size: 15px; }
.hdr-3 > .fl-row-content-wrap { padding: 14px 24px; }
.hdr-3 .fl-photo-img { width: 157px; height: auto; }

.pp-announcement-bar-wrap { background: var(--navy-dark); color: var(--white); }
.pp-announcement-bar-inner { position: relative; padding: 10px 52px; text-align: center; font-size: 15px; }
.pp-announcement-bar-content p { margin: 0; }
.pp-announcement-bar-content a { color: var(--white); font-weight: 700; }
.pp-announcement-bar-content a:hover { color: var(--red-light); }
.pp-announcement-bar-close-button { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: .8; }
.pp-announcement-bar-close-button:hover { opacity: 1; }
.announcement-closed .pp-announcement-bar-wrap, .announcement-closed.hdr-1 { display: none; }

/* main menu */
.pp-advanced-menu ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 30px; }
.pp-advanced-menu .menu a {
  display: block; padding: 8px 0; text-decoration: none; border-bottom: 2px solid transparent;
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy-dark);
}
.pp-advanced-menu .menu a:hover, .pp-advanced-menu .current-menu-item > a { color: var(--red); border-bottom-color: var(--red); }
.pp-advanced-menu-mobile { display: none; }
.fl-visible-mobile .pp-advanced-menu-mobile { display: block; text-align: right; }
.fl-visible-mobile .pp-advanced-menu { display: none; }
.fl-visible-mobile.menu-open .pp-advanced-menu { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); box-shadow: 0 12px 24px rgba(20, 29, 87, .15); }
.fl-visible-mobile ul.menu { flex-direction: column; gap: 0; }
.fl-visible-mobile .menu a { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pp-advanced-menu-mobile-toggle { background: none; border: 0; padding: 10px; cursor: pointer; }
.pp-hamburger-box { width: 28px; height: 20px; position: relative; display: inline-block; }
.pp-hamburger-inner, .pp-hamburger-inner::before, .pp-hamburger-inner::after {
  position: absolute; left: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--navy-dark); content: "";
}
.pp-hamburger-inner { top: 50%; transform: translateY(-50%); }
.pp-hamburger-inner::before { top: -8px; }
.pp-hamburger-inner::after { top: 8px; }
@media (max-width: 768px) { .hdr-3 .fl-col-group { flex-direction: row !important; align-items: center !important; } }

/* ---------- Hero ---------- */
#hero-section > .fl-row-content-wrap { min-height: 640px; display: flex; align-items: center; }
#hero-section > .fl-row-content-wrap > .fl-row-content { width: 100%; }
#hero-section .heading-title { font-size: 40px; color: var(--white); }
#hero-section .herotext {
  display: block; font-family: Lateef, Georgia, serif; font-weight: 500;
  font-size: 104px; line-height: .9; letter-spacing: .02em; margin-bottom: 10px;
}
#hero-section .pp-sub-heading p { font-size: 19px; color: #e8eaf4; }
@media (max-width: 768px) {
  #hero-section > .fl-row-content-wrap { min-height: 520px; }
  #hero-section .herotext { font-size: 68px; }
  #hero-section .heading-title { font-size: 30px; }
}

/* ---------- Headings (PowerPack) ---------- */
.pp-heading .heading-title { margin: 0 0 16px; font-weight: 700; }
h2.heading-title { font-size: 36px; }
h3.heading-title { font-size: 24px; }
h4.heading-title { font-size: 20px; }
.pp-heading .title-text { display: inline; }
.pp-heading .pp-secondary-title { color: var(--red); }
.pp-center, .pp-heading.pp-center + .pp-sub-heading, .pp-heading-content:has(.pp-center) { text-align: center; }
.pp-right { text-align: right; }
.pp-sub-heading { color: var(--muted); font-size: 17px; }
.fl-row-bg-overlay .pp-sub-heading, .cstm-txt .pp-sub-heading { color: #e8eaf4; }
@media (max-width: 768px) {
  h2.heading-title { font-size: 28px; }
  .fl-row-content-wrap { padding: 52px 16px; }
  .fl-col-group { flex-direction: column; align-items: stretch; gap: 28px; }
  .fl-col { width: 100%; flex: 1 1 auto; }
}

/* ---------- Image banners ("Upgrades Coming Soon") ---------- */
.uabb-ib2-outter { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 14px 34px rgba(20, 29, 87, .16); }
.uabb-new-ib-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.uabb-ib2-outter:hover .uabb-new-ib-img { transform: scale(1.04); }
.uabb-new-ib-desc { position: absolute; left: 0; bottom: 0; padding: 9px 16px; background: rgba(20, 29, 87, .86); color: var(--white); }
.uabb-new-ib-title { margin: 0; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.uabb-new-ib-content:empty { display: none; }

/* ---------- Icon lists ---------- */
.pp-icon-list-items { list-style: none; margin: 0; padding: 0; }
.pp-icon-list-item { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; }
.pp-list-item-icon { color: var(--red); margin-top: 5px; font-size: 15px; }

/* ---------- Icons used in header, footer and contact ---------- */
.fl-icon-wrap { display: flex; align-items: center; gap: 12px; }
.fl-icon i { font-size: 18px; color: var(--red); font-style: normal; }
.fl-icon-text p { margin: 0; }
.fl-icon-text a { text-decoration: none; }
.ua-icon { font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; display: inline-block; }
.ua-icon-phone3::before { content: "\f095"; }
.ua-icon-mail2::before { content: "\f0e0"; }
.ua-icon-facebook2::before { content: "\f39e"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.dashicons { font-style: normal; }
.dashicons-location-alt::before { content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-weight: 900; }

/* ---------- Buttons, separators, photos, rich text ---------- */
a.fl-button {
  display: inline-block; padding: 14px 30px; border-radius: 3px; background: var(--red); color: var(--white);
  font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; transition: background .2s ease, transform .2s ease;
}
a.fl-button:hover { background: var(--navy-dark); color: var(--white); transform: translateY(-1px); }
.fl-row-bg-overlay a.fl-button:hover, .cstm-txt a.fl-button:hover { background: var(--white); color: var(--navy-dark); }
.fl-button-center { text-align: center; }
.fl-button-right { text-align: right; }
.fl-separator { border-top: 1px solid var(--line); }
.fl-photo-align-center { text-align: center; }
.fl-photo-align-right { text-align: right; }
.fl-photo-content { display: inline-block; max-width: 100%; }
.fl-photo-content img { display: block; }
.fl-rich-text { color: inherit; }

/* map strip and embedded map run edge to edge */
.fl-row:has(.fl-module-map) > .fl-row-content-wrap,
.fl-row:has(img[src*="MAP-"]) > .fl-row-content-wrap { padding: 0; }
.fl-row:has(.fl-module-map) .fl-row-fixed-width,
.fl-row:has(img[src*="MAP-"]) .fl-row-fixed-width { max-width: none; }
.fl-row:has(img[src*="MAP-"]) .fl-photo-content { display: block; }
.fl-row:has(img[src*="MAP-"]) img { width: 100%; }
.fl-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Gallery ---------- */
.pp-photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pp-photo-gallery-item { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 10px 26px rgba(20, 29, 87, .14); }
.pp-photo-gallery-item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
.pp-photo-gallery-item:hover img { transform: scale(1.04); }
.pp-gallery-overlay { display: none; }
/* position + colors come from the site's custom CSS (centered caption on a dark band) */
.pp-photo-gallery-caption {
  padding: 8px 14px; white-space: nowrap;
  font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 992px) { .pp-photo-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pp-photo-gallery { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.uabb-testimonial {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: 4px; padding: 26px 28px; box-shadow: 0 10px 26px rgba(20, 29, 87, .08);
}
.uabb-testimonial-author-name { font-size: 20px; margin: 0 0 10px; }
.uabb-testimonial-author-designation:empty { display: none; }
.uabb-testimonial-author-description { color: var(--muted); }
.uabb-testimonial-author-description strong { color: var(--navy-dark); }
.testimonial-arrow-down { display: none; }
.fl-col:has(.fl-module-adv-testimonials) { align-self: flex-start; }

/* ---------- Static contact block (replaces the old form) ---------- */
.static-contact { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 32px; box-shadow: 0 10px 26px rgba(20, 29, 87, .08); }
.static-contact h3 { font-size: 22px; }
.static-contact p { margin: 0 0 10px; font-size: 17px; }

/* ---------- Footer ---------- */
footer.fl-builder-content .fl-row-bg-color > .fl-row-content-wrap { background: var(--navy-dark); color: #d9dcec; }
footer.fl-builder-content .fl-row-bg-color h2, footer.fl-builder-content .fl-row-bg-color h3 { color: var(--white); }
footer.fl-builder-content .fl-row-bg-color .pp-secondary-title { color: var(--red-light); }
footer.fl-builder-content .fl-row-bg-color .pp-sub-heading { color: #d9dcec; }
footer.fl-builder-content .fl-row-bg-color a:not(.fl-button) { color: var(--white); text-decoration: none; }
footer.fl-builder-content .fl-row-bg-color a:not(.fl-button):hover { color: var(--red-light); }
footer.fl-builder-content .fl-icon i { color: var(--red-light); }
footer.fl-builder-content .fl-module-icon + .fl-module-icon { margin-top: 12px; }
footer.fl-builder-content .fl-photo-img[src*="logo-svg"] { max-width: 220px; }
.ftr-menu > .fl-row-content-wrap { padding: 18px 24px !important; border-top: 1px solid rgba(255, 255, 255, .12); }
.fl-menu ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.fl-menu .menu a { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fl-menu-mobile-toggle { display: none; }
.ftr-copy > .fl-row-content-wrap { padding: 16px 24px !important; background: #0e1440 !important; font-size: 14px; }
.ftr-copy .fl-col-group { align-items: center; }
footer .fl-row-bg-none > .fl-row-content-wrap { background: none; }
@media (max-width: 768px) { .fl-menu ul.menu { flex-direction: column; align-items: center; } }

/* ---------- Scroll to top ---------- */
#fl-to-top {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--red); color: var(--white);
  text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 60;
}
#fl-to-top.show { opacity: 1; pointer-events: auto; }
#fl-to-top .screen-reader-text { position: absolute; left: -9999px; }

/* ---------- Simple lightbox for the gallery ---------- */
.hi-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 36, .92); padding: 24px; }
.hi-lightbox img { max-width: min(1100px, 100%); max-height: 86vh; width: auto; height: auto; border-radius: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.hi-lightbox button { position: absolute; background: rgba(255, 255, 255, .12); border: 0; color: #fff; font-size: 26px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.hi-lightbox button:hover { background: rgba(255, 255, 255, .25); }
.hi-lightbox .hi-close { top: 18px; right: 18px; }
.hi-lightbox .hi-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.hi-lightbox .hi-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* secondary (red) heading text on dark sections: use the lighter red for contrast */
#hero-section .pp-heading .pp-secondary-title,
.fl-row-bg-overlay .pp-heading .pp-secondary-title,
.cstm-txt .pp-heading .pp-secondary-title,
footer .fl-row-bg-color .pp-heading .pp-secondary-title { color: var(--red-light); }

/* Kayak Travel Awards badge (homepage footer): the original sized it with height="300px" */
img[src*="TRAVEL_AWARDS"] { height: 150px; width: auto; display: inline-block; }