/* Responsive fixes found in the phone/tablet audit. Loaded sitewide by owf-front-enhancements.php. */

/* Home trust bar: the venue marquee tracks were stretching the "Trusted at" box (and the whole page) far wider than the screen. */
.trust-item-wide { min-width: 0; max-width: 100%; }
.venue-wrap { max-width: 100%; }

/* "Are we a good fit" boxes: heading above the list. e-flexbox defaults to a row, which squeezed the list into a thin column. */
.good-fit-col { flex-direction: column !important; align-items: stretch !important; padding: 36px 32px !important; }
/* Elementor adds 10px padding to every container, which stacked up inside the boxes and indented the list. */
.good-fit-list, .good-fit-item { padding: 0 !important; }

/* Two-column rows (Home philosophy, About) carry a fixed height from the Elementor global class.
   Once they stack on a phone the content is taller than that height and spills over the next section. */
@media (max-width: 1024px) {
	.elementor .row-center { height: auto !important; min-height: 380px; }
}
@media (max-width: 767px) {
	.elementor .row-center { height: auto !important; min-height: 0; }
	.good-fit-grid { gap: 20px; }
	.good-fit-col { padding: 26px 22px !important; }
}

/* Slimmer header on phones and small tablets. The logo (92px) and padding were sized for desktop and the header took about a sixth of a phone screen.
   It is sticky, so this space is lost on every page while scrolling. Same breakpoint as the theme's burger menu. */
@media (max-width: 900px) {
	.wfor-header__inner { padding: 8px 16px; column-gap: 12px; }
	.wfor-header__logo img { height: 56px; }
	.wfor-header__burger { grid-column: 3; justify-self: end; margin-right: -10px; padding: 15px 10px; }
}

/* Home hero card: one clear headline over the video in place of three faint tags.
   The Kit's own dark overlay rule is invalid CSS and does nothing, so the gradient that keeps the words readable is set here. */
.elementor .hero-banner { justify-content: flex-end; gap: clamp(18px, 3vh, 32px); }
.elementor .hero-banner .overlay-dark { background-image: linear-gradient(0deg, rgba(43, 38, 34, .68) 0%, rgba(43, 38, 34, .42) 34%, rgba(43, 38, 34, .1) 64%, rgba(43, 38, 34, 0) 100%); }
.elementor .hero-banner .owf-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0; text-align: center; }
.elementor .hero-banner .hero-card-title { margin: 0; color: #F7F4EF; font-family: Newsreader, Georgia, serif; font-size: clamp(1.9rem, 3.5vw, 3.25rem); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 30px rgba(20, 17, 15, .45); }
.elementor .hero-banner .owf-hero-words { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 8px 0; padding: 0; }
.elementor .hero-banner .hero-card-word { margin: 0; padding: 0 1.2em; color: rgba(247, 244, 239, .96); font-family: "Work Sans", -apple-system, sans-serif; font-size: clamp(.6875rem, 1vw, .8125rem); font-weight: 500; letter-spacing: .24em; line-height: 1; text-transform: uppercase; text-shadow: 0 1px 16px rgba(20, 17, 15, .5); }
.elementor .hero-banner .hero-card-word + .hero-card-word { border-left: 1px solid rgba(247, 244, 239, .55); }
@media (max-width: 767px) { .elementor .hero-banner .hero-card-word { padding: 0 .62em; letter-spacing: .1em; } }
@media (max-width: 359px) { .elementor .hero-banner .hero-card-word { padding: 0 .5em; letter-spacing: .05em; font-size: .625rem; } }
.elementor .hero-banner .hero-scroll-col .text-translucent-xs { color: rgba(247, 244, 239, .85); font-size: 11px; }

/* Contact page: four contact details (email, phone, based in, follow) sit in a tidy 2 x 2 grid on tablets and small laptops instead of 3 + 1. */
@media (min-width: 768px) and (max-width: 1239px) {
	.contact-direct {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Text pages: the privacy policy and the venues index (Phase 2) ---- */
.owf-legal-page .site-main,
.owf-hub-page .site-main {
	max-width: none;
	padding: 0 0 96px;
}
.owf-legal-page .page-header,
.owf-hub-page .page-header {
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 24px 0;
}
.owf-legal-page .page-header {
	max-width: 760px;
}
.owf-legal-page .page-header .entry-title,
.owf-hub-page .page-header .entry-title {
	margin: 0;
	font: 400 clamp(2rem, 4vw, 3rem)/1.12 var(--wfor-font-heading);
	letter-spacing: -0.01em;
	color: var(--wfor-charcoal);
}
.owf-legal-page .page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 24px 0;
}
.owf-hub-page .page-content {
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px 24px 0;
}
.owf-legal {
	font: 400 1.0625rem/1.75 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
.owf-legal h2 {
	margin: 2.2em 0 0.5em;
	font: 500 1.5rem/1.25 var(--wfor-font-heading);
	color: var(--wfor-charcoal);
}
.owf-legal p,
.owf-legal li {
	margin: 0 0 1em;
}
.owf-legal ul {
	margin: 0 0 1em;
	padding-left: 1.25em;
}
.owf-legal a,
.owf-hub__cta a {
	color: var(--wfor-terracotta);
	text-underline-offset: 3px;
}
.owf-legal a:hover,
.owf-hub__cta a:hover {
	color: var(--wfor-terracotta-dark);
}
.owf-legal__updated {
	margin: 0 0 1.5em;
	font-size: 0.9rem;
	color: var(--wfor-charcoal-40);
}

.owf-hub__lead {
	max-width: 680px;
	margin: 0 0 8px;
	font: 400 1.125rem/1.7 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
.owf-hub__h2 {
	margin: 56px 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(43, 38, 34, 0.14);
	font: 500 1.5rem/1.25 var(--wfor-font-heading);
	color: var(--wfor-charcoal);
}
.owf-hub__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.owf-hub__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 22px 22px 20px;
	border: 1px solid rgba(43, 38, 34, 0.14);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s var(--wfor-ease), background-color 0.3s var(--wfor-ease);
}
.owf-hub__card:hover,
.owf-hub__card:focus-visible {
	border-color: var(--wfor-terracotta);
	background-color: rgba(255, 255, 255, 0.55);
}
.owf-hub__tag {
	font: 600 0.6875rem/1 var(--wfor-font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wfor-terracotta);
}
.owf-hub__name {
	font: 500 1.375rem/1.2 var(--wfor-font-heading);
	color: var(--wfor-charcoal);
}
.owf-hub__place {
	font: 400 0.9375rem/1.4 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
.owf-hub__type {
	font: 400 0.9375rem/1.5 var(--wfor-font-body);
	color: rgba(43, 38, 34, 0.7);
}
.owf-hub__more {
	margin-top: auto;
	padding-top: 10px;
	font: 500 0.875rem/1 var(--wfor-font-body);
	color: var(--wfor-terracotta);
}
.owf-hub__cta {
	max-width: 680px;
	margin: 64px 0 0;
	font: 400 1.0625rem/1.7 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
@media (max-width: 767px) {
	.owf-legal-page .page-header,
	.owf-hub-page .page-header {
		padding-top: 40px;
	}
	.owf-hub__list {
		grid-template-columns: 1fr;
	}
}

/* Privacy Policy link in the footer's small print */
.wfor-footer__bottom span a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wfor-footer__bottom span a:hover {
	color: var(--wfor-terracotta);
}

/* Phase 2 follow-up: beat the parent theme's own page width and link underline on these two pages */
html body.owf-legal-page main.site-main,
html body.owf-hub-page main.site-main {
	max-width: none;
}
.owf-hub .owf-hub__card,
.owf-hub .owf-hub__card:hover,
.owf-hub .owf-hub__card:focus-visible {
	text-decoration: none;
}

/* A section switched off for now (its content is kept in a backup option) */
.owf-paused {
	display: none !important;
}

/* ---- Phase 3: the "Where I film" menu, the reviews page, and links in the Home reviews block ---- */

/* header menu */
.wfor-nav-drop {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.wfor-nav-drop__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0 0 4px;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--wfor-charcoal);
	font: 500 0.9375rem/1 var(--wfor-font-body);
	white-space: nowrap;
}
.wfor-nav-drop__chev {
	transition: transform 0.3s var(--wfor-ease);
}
.wfor-nav-drop:hover .wfor-nav-drop__chev,
.wfor-nav-drop:focus-within .wfor-nav-drop__chev,
.wfor-nav-drop.is-open .wfor-nav-drop__chev {
	transform: rotate(180deg);
}
.wfor-nav-drop__panel {
	position: absolute;
	top: calc(100% + 22px);
	left: -20px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	min-width: 230px;
	padding: 10px 0;
	background: var(--wfor-offwhite);
	border: 1px solid rgba(43, 38, 34, 0.14);
	border-radius: 4px;
	box-shadow: 0 18px 40px rgba(43, 38, 34, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s var(--wfor-ease), transform 0.25s var(--wfor-ease), visibility 0.25s;
}
.wfor-nav-drop__panel::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -24px;
	height: 24px;
}
.wfor-nav-drop:hover .wfor-nav-drop__panel,
.wfor-nav-drop:focus-within .wfor-nav-drop__panel,
.wfor-nav-drop.is-open .wfor-nav-drop__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.wfor-header .wfor-nav-drop__panel a {
	display: block;
	padding: 10px 22px;
}
.wfor-header .wfor-nav-drop__panel a::after {
	display: none;
}
.wfor-header .wfor-nav-drop__panel a:hover,
.wfor-header .wfor-nav-drop__panel a:focus-visible {
	background: rgba(43, 38, 34, 0.06);
}
.wfor-header .wfor-nav-drop__panel a:last-child {
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid rgba(43, 38, 34, 0.14);
	color: var(--wfor-terracotta);
}

/* phone menu: the same places, indented under a small label */
.wfor-mobile-nav {
	overflow-y: auto;
}
.wfor-mobile-nav__label {
	margin-top: 4px;
	font: 600 0.75rem/1 var(--wfor-font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wfor-terracotta);
}
.wfor-mobile-nav__sub {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-left: 16px;
	border-left: 1px solid rgba(43, 38, 34, 0.16);
}
.wfor-mobile-nav .wfor-mobile-nav__sub a {
	font-size: 1.15rem;
}

/* footer sub-heading */
.wfor-footer__sub {
	margin-top: 18px;
}

/* links inside the Home reviews badge and the "Read more reviews" line */
.eyebrow-gold a,
.stat-caption a {
	color: inherit;
	text-decoration: none;
}
.eyebrow-gold a:hover,
.stat-caption a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.owf-more-reviews {
	margin: 32px 0 0 !important;
	text-align: center;
}
.owf-more-reviews a {
	color: var(--wfor-offwhite);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.owf-more-reviews a:hover {
	color: var(--wfor-terracotta);
}

/* reviews page */
html body.owf-reviews-page main.site-main {
	max-width: none;
	padding: 0 0 96px;
}
.owf-reviews-page .page-header {
	max-width: 900px;
	margin: 0 auto;
	padding: 64px 24px 0;
}
.owf-reviews-page .page-header .entry-title {
	margin: 0;
	font: 400 clamp(2rem, 4vw, 3rem)/1.12 var(--wfor-font-heading);
	letter-spacing: -0.01em;
	color: var(--wfor-charcoal);
}
.owf-reviews-page .page-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 24px 0;
}
.owf-reviews__lead {
	max-width: 680px;
	margin: 0 0 8px;
	font: 400 1.125rem/1.7 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
.owf-reviews__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 40px;
}
.owf-reviews__buttons a {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	border: 1px solid var(--wfor-terracotta);
	border-radius: 4px;
	color: var(--wfor-terracotta);
	font: 600 0.9375rem/1 var(--wfor-font-body);
	text-decoration: none;
	transition: background-color 0.3s var(--wfor-ease), color 0.3s var(--wfor-ease);
}
.owf-reviews__buttons a:first-child {
	background: var(--wfor-terracotta);
	color: var(--wfor-offwhite);
}
.owf-reviews__buttons a:hover,
.owf-reviews__buttons a:focus-visible {
	background: var(--wfor-terracotta-dark);
	border-color: var(--wfor-terracotta-dark);
	color: var(--wfor-offwhite);
}
.owf-review {
	margin: 0;
	padding: 40px 0;
	border-top: 1px solid rgba(43, 38, 34, 0.14);
}
.owf-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}
.owf-review blockquote p {
	margin: 0 0 1em;
	font: italic 400 1.25rem/1.6 var(--wfor-font-heading);
	color: var(--wfor-charcoal);
}
.owf-review figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: baseline;
	font: 600 0.8125rem/1.2 var(--wfor-font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wfor-charcoal);
}
.owf-review__src {
	font-weight: 400;
	letter-spacing: 0.06em;
	color: rgba(43, 38, 34, 0.6);
}
.owf-reviews__cta {
	margin: 24px 0 0;
	padding-top: 40px;
	border-top: 1px solid rgba(43, 38, 34, 0.14);
	font: 400 1.0625rem/1.7 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
.owf-reviews__cta a {
	color: var(--wfor-terracotta);
	text-underline-offset: 3px;
}
@media (max-width: 767px) {
	.owf-reviews-page .page-header {
		padding-top: 40px;
	}
	.owf-review blockquote p {
		font-size: 1.125rem;
	}
}

/* Phase 3: cost guide package comparison table */
.owf-compare {
	width: 100%;
	margin: 24px 0 8px;
	border-collapse: collapse;
	font: 400 1rem/1.5 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
.owf-compare th,
.owf-compare td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(43, 38, 34, 0.16);
	text-align: center;
}
.owf-compare thead th {
	border-bottom: 2px solid var(--wfor-terracotta);
	font: 600 0.8125rem/1.3 var(--wfor-font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.owf-compare tbody th {
	text-align: left;
	font-weight: 500;
}
.owf-compare td {
	color: var(--wfor-terracotta);
	font-weight: 600;
}
.owf-compare td.no {
	color: rgba(43, 38, 34, 0.45);
	font-weight: 400;
}
.owf-compare__note {
	font-size: 0.9375rem;
	color: rgba(43, 38, 34, 0.72);
}
@media (max-width: 600px) {
	.owf-compare th,
	.owf-compare td {
		padding: 10px 6px;
		font-size: 0.875rem;
	}
	.owf-compare thead th {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
	}
}

/* Phase 3: cost guide table: lighter look (overrides the theme's striped table style) */
html body .owf-compare th,
html body .owf-compare td {
	border: 0;
	border-bottom: 1px solid rgba(43, 38, 34, 0.16);
	background: transparent;
}
html body .owf-compare thead th {
	border-bottom: 2px solid var(--wfor-terracotta);
}
html body .owf-compare tbody tr:nth-child(odd) > *,
html body .owf-compare tbody tr:nth-child(even) > * {
	background: transparent;
}
html body .owf-compare tbody th {
	text-transform: none;
	letter-spacing: 0;
	font: 500 1rem/1.4 var(--wfor-font-body);
	color: var(--wfor-charcoal);
}
@media (max-width: 600px) {
	html body .owf-compare tbody th {
		font-size: 0.9375rem;
	}
}

/* Phase 3: Home: York section links */
.owf-york-block .body-copy a {
	color: var(--wfor-terracotta);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.owf-york-block .body-copy a:hover,
.owf-york-block .body-copy a:focus-visible {
	color: var(--wfor-terracotta-dark);
}

/* Phase 5: the York section's image + "watch the film" button */
.owf-york-block .flex-basis-36 {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.owf-york-watch {
	background: transparent !important;
	border: 1px solid var(--wfor-terracotta) !important;
	color: var(--wfor-terracotta) !important;
	align-self: center !important;
	text-align: center;
}
.owf-york-watch:hover,
.owf-york-watch:focus-visible {
	background: var(--wfor-terracotta) !important;
	color: var(--wfor-offwhite) !important;
}
@media (max-width: 899px) {
	.owf-york-block.row-center {
		flex-direction: column-reverse;
	}
}

/* Phase 5: the York section: a little breathing room above and below, matching the neighbouring sections */
.owf-york-block {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

/* Phase 5: Locations trigger is now a link + a separate toggle, with a gold hover instead of pink/dark */
.wfor-nav-drop {
	--owf-gold: #A9884A;
}
.wfor-nav-drop__label {
	color: var(--wfor-charcoal);
	font: 500 0.9375rem/1 var(--wfor-font-body);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 4px;
}
.wfor-nav-drop__label::after {
	display: none;
}
.wfor-nav-drop__label:hover,
.wfor-nav-drop__label:focus-visible {
	color: var(--owf-gold);
}
.wfor-nav-drop__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 6px;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--wfor-charcoal);
	border-radius: 3px;
}
.wfor-nav-drop__toggle:hover,
.wfor-nav-drop__toggle:focus-visible {
	color: var(--owf-gold);
}
.wfor-nav-drop__label:focus,
.wfor-nav-drop__toggle:focus,
.wfor-nav-drop__label[type],
.wfor-nav-drop__toggle[type] {
	background-color: transparent;
}
.wfor-nav-drop__toggle:focus-visible {
	outline: 2px solid var(--owf-gold);
	outline-offset: 1px;
}
.wfor-header .wfor-nav-drop__panel a:hover,
.wfor-header .wfor-nav-drop__panel a:focus-visible {
	background: rgba(169, 136, 74, 0.12);
	color: var(--owf-gold);
}
.wfor-header .wfor-nav-drop__panel a:last-child:hover,
.wfor-header .wfor-nav-drop__panel a:last-child:focus-visible {
	color: var(--owf-gold);
}
.wfor-mobile-nav a.wfor-mobile-nav__label {
	text-decoration: none;
}
