/* GeneratePress integration and client-supplied photography. */
.home #page { max-width: none; }
.home .site-content { display: block; width: 100%; }
.home #primary { margin: 0; max-width: none; width: 100%; }
.site-header {
  background: var(--cedar) !important;
  border-bottom: 2px solid var(--forest);
  color: #fff;
  left: 0;
  position: fixed !important;
  right: 0;
  top: 0;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  width: 100%;
  z-index: 100;
}
body.admin-bar .site-header { top: 32px; }
body.home .site-header:not(.mazour-scrolled) {
  background: transparent !important;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.home .site-header:not(.mazour-scrolled) .main-nav a,
body.home .site-header:not(.mazour-scrolled) .menu-toggle {
  text-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}
.site-header.mazour-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
body:not(.home) .site-content { padding-top: var(--mazour-header-h, 80px); }
body.page > .featured-image.page-header-image,
body.single-mazour_trip > .featured-image.page-header-image { display: none; }
.main-navigation { background: transparent !important; color: #fff; }
.site-header .site-grid,
.inside-header { background: transparent !important; }
.site-header .inside-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.main-navigation,
.main-navigation > div,
.main-navigation ul,
.main-navigation ul li,
.main-navigation .menu-toggle { background: transparent !important; }
.site-branding .main-title a,
.main-navigation .main-nav ul li a,
.menu-toggle { color: #fff !important; }
.mazour-hero {
	align-items: center;
	background:
		linear-gradient(90deg, rgba(21, 23, 19, .56) 0%, rgba(30, 42, 32, .46) 50%, rgba(21, 23, 19, .36) 100%),
		url("images/client/paddlers-on-cypress-lined-hill-country-river.jpg") center 64% / cover no-repeat;
  justify-items: center;
  overflow: hidden;
  text-align: center;
}
.mazour-hero > * { margin-left: auto !important; margin-right: auto !important; }
.mazour-hero h1,
.mazour-hero p { margin-left: auto; margin-right: auto; }
.mazour-hero-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 auto 1rem !important;
  max-width: 700px !important;
  outline: 0 !important;
  width: 92vw !important;
}
.mazour-hero-logo img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 18px rgba(248, 244, 236, .9))
    drop-shadow(0 0 38px rgba(248, 244, 236, .55));
  height: auto;
  max-width: 100%;
  outline: 0 !important;
  width: 100%;
}
.mazour-hero .mazour-eyebrow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffd7c8;
  outline: 0 !important;
}
.mazour-eyebrow { color: var(--forest); }
.mazour-section--forest .mazour-eyebrow { color: #ffd7c8; }
.mazour-card .mazour-eyebrow { color: var(--forest); }
.mazour-callout .mazour-eyebrow { color: #ffd7c8; }
.mazour-info-card,
.mazour-info-card p { color: var(--walnut); }
.mazour-info-card .mazour-eyebrow { color: var(--forest); }
.mazour-info-card h2 { color: var(--cedar); }
.mazour-grid { display: grid !important; }
.mazour-equal-cards { grid-auto-rows: 1fr; }
.mazour-equal-cards > .wp-block-column { display: flex; }
.mazour-equal-cards > .wp-block-column > .mazour-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.mazour-equal-cards > .wp-block-column > .mazour-info-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.mazour-home-trip-cards .mazour-card > p:not(.mazour-eyebrow),
.mazour-home-info-cards .mazour-info-card > p:not(.mazour-eyebrow) {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.mazour-home-trip-cards .mazour-card > .wp-block-buttons:last-child,
.mazour-home-info-cards .mazour-info-card > .wp-block-buttons:last-child {
  margin-top: clamp(1.25rem, 2vw, 1.75rem) !important;
}
@media (min-width: 600px) {
  .mazour-home-trip-cards .mazour-card > h2 { min-height: 2.16em; }
}
.mazour-card-photo,
.mazour-story-photo,
.mazour-preparation-photo { overflow: hidden; width: 100%; }
.mazour-card-photo { aspect-ratio: 4 / 3; margin: 0 0 1.5rem; }
.mazour-story-photo { aspect-ratio: 4 / 3; margin: 0; }
.mazour-preparation-photo { aspect-ratio: 16 / 9; margin: 2rem 0 0; }
.mazour-card-photo img,
.mazour-story-photo img,
.mazour-preparation-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
.mazour-story-images { margin: 0 auto clamp(2.5rem, 6vw, 4rem); max-width: 1040px; }
.mazour-section--river-bg {
	background:
		linear-gradient(105deg, rgba(45, 67, 47, .9), rgba(31, 54, 38, .82)),
		url("images/client/group-paddling-tree-lined-river.jpg") center 68% / cover no-repeat;
}
.mazour-hero .mazour-actions { justify-content: center; }
.mazour-hero .is-style-outline > .wp-block-button__link {
  background: var(--paper) !important;
  border: 2px solid var(--paper);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  color: var(--cedar) !important;
}
.mazour-hero .is-style-outline > .wp-block-button__link:hover,
.mazour-hero .is-style-outline > .wp-block-button__link:focus {
  background: #fff !important;
  border-color: #fff;
  color: var(--walnut) !important;
}
.mazour-trip-request-form-wrap { margin-inline: auto; max-width: 680px; text-align: left; }

/* Submit buttons on every Fluent Form, not only the trip request wrapper.
   Fluent Forms emits a per-form inline rule at specificity 0,3,1 that reads
   from --fluentform-primary, which stays its default blue on any form whose
   styler was never touched. That is why the contact form shipped blue while
   the trip request form did not. Scoping this to .fluentform covers current
   and future forms alike, and !important is what clears that inline rule. */
.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit {
  background-color: var(--ember) !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #fff !important;
  cursor: pointer;
  font-weight: 700;
  padding: .85rem 1.25rem !important;
}

/* flatpickr builds its calendar header from a real <select> and <input>, and
   the global control rule in site.css is unscoped, so it hits them with a 2px
   border, 3px radius and .7rem padding. That inflates the month and year
   controls past the calendar's width and is what clips the picker on desktop.
   Hand them back flatpickr's own values. The descendant selectors sit at
   specificity 0,2,0 so they also clear the .fluentform field-fill rule below,
   which would otherwise repaint the month dropdown white. */
.flatpickr-calendar input,
.flatpickr-calendar select,
.flatpickr-calendar .numInput,
.flatpickr-calendar .flatpickr-monthDropdown-months {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* The white behind the forms is GeneratePress's separate-containers article
   card, which paints --base-3 (#ffffff). Fluent Forms sets no container
   background of its own, so the card is the only thing producing it. Scoped to
   pages that actually carry a form, so the rest of the site keeps its white
   card. The :has() rule covers any future form page automatically; the two
   page-id selectors are the fallback for browsers without :has(). Specificity
   ties with GeneratePress's rule, so !important is what settles it. */
.page-id-13 .inside-article,
.page-id-16 .inside-article,
.inside-article:has(.fluentform) { background-color: transparent !important; }

/* The fields stay white by choice: the container behind them is transparent,
   so white is what separates an editable field from the page. Set explicitly
   rather than left to GeneratePress, which would otherwise apply --base-2
   (#f7f8f9). Fluent Forms already repaints its controls #fff on :focus, so
   pinning the same value here keeps the field from shifting when focused. */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="search"],
.fluentform input[type="number"],
.fluentform input[type="date"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus { background-color: #fff !important; }

/* Turnstile renders inside a cross-origin Cloudflare iframe, so its panel
   cannot be styled directly and Cloudflare offers only light, dark, and auto:
   there is no transparent theme and no custom colour. Multiplying the widget
   against the page blends its near-white #fafafa down to roughly #E5DFD2,
   within a couple of steps of --limestone, while leaving its dark text and
   checkbox legible. The Fluent Forms theme is pinned to light so the result is
   predictable, since this site has no dark mode and auto was serving a dark
   widget on a light page to dark-mode visitors. */
.ff-el-turnstile,
.cf-turnstile { mix-blend-mode: multiply; }

/* Blending is cosmetic only. If a visitor forces colours, drop back to the
   untouched widget rather than risk degrading a security control. */
@media (forced-colors: active) {
  .ff-el-turnstile,
  .cf-turnstile { mix-blend-mode: normal; }
}

/* Chrome paints autofilled fields with its own background that background-color
   cannot override. The inset shadow is the only way to repaint them, and it
   has to match the field fill above or autofilled fields read as a different
   colour from the ones typed by hand. */
.fluentform input:-webkit-autofill,
.fluentform input:-webkit-autofill:hover,
.fluentform input:-webkit-autofill:focus,
.fluentform textarea:-webkit-autofill,
.fluentform select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--walnut) !important;
}
.post-type-archive-mazour_trip .mazour-card { align-items: flex-start; display: flex; flex-direction: column; }
.mazour-card-actions { margin-top: auto; }
.mazour-about-intro { margin-bottom: 3rem; text-align: center; }
.mazour-profile { margin: 0 auto 2rem; max-width: 1040px; }
.mazour-profile > .wp-block-columns {
  align-items: center !important;
  background: var(--paper);
  border: 1px solid rgba(108, 102, 83, .28);
  border-radius: 5px;
  box-shadow: var(--shadow);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.mazour-profile .wp-block-column { min-width: 0; }
.mazour-profile-photo { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; width: 100%; }
.mazour-profile-photo img {
  border-radius: 4px;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
}
.mazour-profile--denise .mazour-profile-photo img { object-position: center 45%; }
.mazour-policy-card,
.mazour-legal-notice {
  background: var(--paper);
  border: 1px solid rgba(108, 102, 83, .28);
  border-left: 6px solid var(--ember);
  border-radius: 4px;
  margin: 2rem auto;
  padding: clamp(1.4rem, 3vw, 2.25rem);
}
.mazour-legal-notice { background: #fff8ea; }
.wp-block-file {
  align-items: center;
  background: var(--paper);
  border: 1px solid rgba(108, 102, 83, .28);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: 2rem auto;
  padding: 1.25rem;
}
.wp-block-file > a:first-child { font-weight: 700; }
.wp-block-file .wp-block-file__button {
  background: var(--ember) !important;
  border-radius: 3px;
  color: #fff !important;
  margin-left: 0;
  opacity: 1;
  padding: .75rem 1rem;
}
.mazour-river-overview { margin: 3rem auto; }
.mazour-trip-preparation { margin: 2rem 0 clamp(3rem, 6vw, 5rem); }
.mazour-trip-card-photo,
.mazour-trip-featured-photo { overflow: hidden; width: 100%; }
.mazour-trip-card-photo { aspect-ratio: 3 / 2; margin: 0 0 1.5rem; }
.mazour-trip-featured-photo { aspect-ratio: 16 / 9; border-radius: 5px; box-shadow: var(--shadow); margin: 2rem auto 3rem; max-width: 900px; }
.mazour-trip-card-photo img,
.mazour-trip-featured-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
.mazour-gallery-intro { margin: 0 auto 3rem; max-width: 820px; text-align: center; }
.mazour-gallery-section { margin: 0 auto clamp(3.5rem, 8vw, 6rem); max-width: 1120px; }
.mazour-gallery-section > h2,
.mazour-gallery-section > p { text-align: center; }
.mazour-photo-gallery { gap: 1rem !important; }
.mazour-photo-gallery > .wp-block-image { aspect-ratio: 4 / 3; overflow: hidden; }
.mazour-photo-gallery > .wp-block-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.mazour-photo-gallery > .wp-block-image:has(.lightbox-trigger) { cursor: zoom-in; }

/* Center the site structure while preserving readable left-aligned body copy. */
body:not(.home) #page,
body:not(.home) .site-content { margin-inline: auto; width: 100%; }
body:not(.home) #primary,
body.single-post #primary,
body.post-type-archive-mazour_trip #primary,
body.post-type-archive-product #primary { float: none; margin-inline: auto; width: 100%; }
body:not(.home) .site-content #primary { float: none !important; margin-inline: auto !important; width: 100% !important; }
body:not(.home) .site-main { margin-inline: auto !important; }
body:not(.home) .inside-article,
body.single-post .inside-article,
body.post-type-archive-product .site-main { margin-inline: auto; max-width: 1040px; }
body:not(.home) .entry-header,
body:not(.home) .page-header { text-align: center; }
body:not(.home) .entry-content { margin-inline: auto; max-width: 860px; }
body:not(.home) .entry-content > p,
body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > h3 { margin-left: auto; margin-right: auto; }
.wp-block-query .wp-block-post-template { display: grid; gap: 1.5rem; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style: none; margin: 2rem auto; padding: 0; }
.wp-block-query .wp-block-post { background: var(--paper); border: 1px solid rgba(108,102,83,.28); border-radius: 5px; box-shadow: var(--shadow); box-sizing: border-box; display: flex; flex-direction: column; height: 100%; margin-block-start: 0; padding: 1.5rem; }
.wp-block-query .wp-block-post-featured-image { aspect-ratio: 3 / 2; margin: 0 0 1rem; overflow: hidden; }
.wp-block-query .wp-block-post-featured-image img { height: 100%; object-fit: cover; width: 100%; }
.mazour-field-notes .wp-block-post-featured-image { align-items: center; display: flex; justify-content: center; width: 100%; }
.mazour-field-notes .wp-block-post-featured-image a { display: block; height: 100%; width: 100%; }
.mazour-field-notes .wp-block-post-featured-image img { display: block; margin-inline: auto; object-position: center center; }
.wp-block-query .wp-block-post-title { display: -webkit-box; line-height: 1.15; min-height: 2.3em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wp-block-query .wp-block-post-excerpt { margin-top: auto; }
.wp-block-query .wp-block-post-excerpt__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.mazour-tkg-attribution { background: #f4ede0; border-left: 5px solid var(--ember); margin: 0 auto 2rem; max-width: 760px; padding: 1rem 1.25rem; }
.mazour-related-notes { border-top: 2px solid var(--khaki); margin-top: 3rem; padding-top: 2rem; }
.mazour-related-notes h2 { text-align: center; }
.mazour-related-notes ul { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); list-style: none; margin: 1.5rem 0 0; padding: 0; }
.mazour-related-notes li { background: var(--paper); border: 1px solid rgba(108,102,83,.28); border-radius: 5px; padding: 1rem; }
.mazour-related-notes a { display: block; font-family: Bitter, Rockwell, Georgia, serif; font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.mazour-related-notes time { color: var(--rock); display: block; font-size: .9rem; margin-top: .5rem; }

/* Footer: explicit contrast and Oakridge Media credit. */
.site-footer,
.site-info,
footer.site-info,
.inside-site-info { background: var(--walnut) !important; color: #fff !important; }
.site-info { padding: .85rem 1.25rem !important; text-align: center; }

/* GeneratePress lays .inside-site-info out as a row once a footer-bar widget
   exists, so the social icons take one column and the copyright centres inside
   whatever space is left, which reads as off-centre. Stack them instead so both
   are centred against the page rather than against each other. The social block
   ships with alignright and is-content-justification-right, so those need
   overriding rather than just setting justify-content. */
.site-info .inside-site-info {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.site-info .footer-bar,
.site-info .copyright-bar { float: none; text-align: center; width: 100%; }
.site-info .footer-bar .widget { padding: 0; }
.site-info .footer-bar .wp-block-social-links {
  justify-content: center !important;
  margin-inline: auto !important;
}
.site-info .footer-bar .wp-block-social-links.alignright { margin-right: auto !important; }
.site-info .footer-bar .wp-social-link a { padding: 4px; }
.inside-site-info { margin-inline: auto; max-width: 900px; }
.site-info .copyright-bar,
.site-info p { color: #fff !important; margin: 0; line-height: 1.45; }
.site-info a { color: #f2c7b7 !important; text-decoration: underline; text-underline-offset: .18em; }
.site-info a:hover,
.site-info a:focus { color: #fff !important; }

/* Two-line footer: legal line, then a smaller credit line. */
.mazour-footer-legal { font-size: .95rem; }
.mazour-footer-sep { padding: 0 .5em; opacity: .55; }
.mazour-site-credit { display: inline-block; font-size: .8rem; opacity: .82; }

/* Let the legal line wrap between items rather than mid-phrase on narrow screens. */
@media (max-width: 600px) {
  .mazour-footer-legal { font-size: .9rem; }
  .mazour-footer-sep { padding: 0 .35em; }
}

@media (max-width: 768px) {
  .site-header .inside-header,
  .has-inline-mobile-toggle .inside-header {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .main-navigation.mobile-menu-control-wrapper {
    align-items: center;
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: auto;
  }
  .main-navigation.sub-menu-right:not(.toggled) { display: none !important; }
  .main-navigation.sub-menu-right.toggled {
    background: var(--cedar) !important;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
    display: block !important;
    left: auto;
    max-height: 80vh;
    max-width: 86vw;
    overflow-y: auto;
    padding: .5rem 0;
    position: absolute;
    right: 1rem;
    top: calc(100% + 8px);
    width: 250px;
    z-index: 999;
  }
  .main-navigation.sub-menu-right.toggled .main-nav ul,
  .main-navigation.sub-menu-right.toggled .main-nav li,
  .main-navigation.sub-menu-right.toggled .main-nav a { background: var(--cedar) !important; }
  .mazour-hero-logo { max-width: 620px !important; width: 94vw !important; }
  .mazour-profile--denise .wp-block-column:last-child { order: -1; }
  .wp-block-file { align-items: stretch; flex-direction: column; }
  .wp-block-file .wp-block-file__button { text-align: center; }
}

@media (max-width: 600px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar #wpadminbar { position: fixed; }
}

@media (min-width: 769px) {
  .nav-float-right .inside-header #site-navigation { margin-left: auto; margin-right: auto; }
}
