/* @override 
	https://ourthrosby.com.au/wp-content/themes/ot/style.css?* */

/*
Theme Name:		 Our Throsby
Description:	 A child theme of dustin.com.au.
Author:			 dustin.com.au
Author URI:		 https://dustin.com.au/
Template:		 dustin-neue
Version:		 1.0.0
Text Domain:	 ot
*/


.mp-business-type-links,
.mp-business-type-links a.mp-business-type-link {
	color: #fff;
}

.mp-business-type-links a.mp-business-type-link {
	padding: 4px;
}

a.mp-field {
	color: #016e83;
}

.member-grid .member-item {
	min-height: 300px!important;
}

.subscription-details {
	padding-left: 6px;
	font-size: 80%;
}

.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-size: 180%!important;
}

.wp-block-woocommerce-cart h3,
.wp-block-woocommerce-checkout h3 {
	font-size: 135%!important;
	font-weight: bold!important;
}

.woocommerce-page .wp-element-button {
	border: 2px solid #05447c;
	transition: all .2s;
}

.woocommerce-page .wp-element-button:hover {
	background-color: #05447c;
	transition: all .2s;
}


.woocommerce-page button.wc-block-components-checkout-place-order-button {
	background-color: rgba(255, 255, 255, 0);
}

.woocommerce-page button.wc-block-components-checkout-place-order-button:hover .wc-block-components-checkout-place-order-button__text {
	color: #fff;
}

.woocommerce-page button.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text  {
		text-transform: uppercase!important;
}



.woocommerce-page button .wc-block-components-button__text {
	font-weight: bold!important;
	color: #05447c!important;
	transition: all .2s;
}

.woocommerce-page .wp-element-button:hover .wc-block-components-button__text {
	color: #fff!important;
}


.woocommerce-page .wc-block-cart-item__wrap .wc-block-components-product-name {
	font-size: 125%!important;
	font-weight: bold;
}

.woocommerce-page .wc-block-components-product-metadata__description p {
	font-size: 90%!important;
}

.woocommerce-page .wc-block-components-product-details__renews {
	font-style: italic;
	font-size: 90%!important;

}


.woocommerce-error,
.woocommerce-message {
	display: none!important;
}

.woocommerce-price-suffix {
	margin-left: 4px;
}


/* ==========================================================================
   Member profile — single
   Output of [profile-post-content] (themes/ot/functions.php), sitting in the
   Brizy "Profile Post Template" navy section.

   That section gives us a 1170px container but no inherited typography — the
   Brizy wrapper resolves to Times/black — so font-family and colour are set
   explicitly here rather than relied on.

   --otp-accent is written inline per profile, from the village colour map in
   ot_mp_village_colours(). Navy text is used on top of it throughout; all five
   village colours clear 4.5:1 against navy.
   ========================================================================== */

.otp {
	--otp-navy: #132543;
	--otp-paper: #f2f2f2;
	--otp-accent: #38a8d1;

	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: var(--otp-paper);
}

.otp *,
.otp *::before,
.otp *::after { box-sizing: border-box; }

.otp a { text-decoration: none; }

.otp__notice {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px dashed rgba(242, 242, 242, .35);
	border-radius: 8px;
	color: rgba(242, 242, 242, .7);
	font-size: 14px;
	line-height: 1.6;
}

.otp__notice span {
	opacity: .65;
	font-style: italic;
}

.otp__main > .otp__notice:first-child { margin-top: 0; }

/* chevron on the pill buttons, matching the Brizy buttons elsewhere */
.otp__chev {
	margin-left: 10px;
	font-size: 1.15em;
	line-height: 1;
}

.otp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 60px;
	align-items: start;
}

/* --- main column --------------------------------------------------------- */

/* Hero photo of the business. Fixed 2:1 band with cover, so a portrait or
   square upload still sits in the layout instead of pushing the text down the
   page — members supply these themselves via the profile form. */
.otp__hero {
	margin: 0 0 32px;
	border-radius: 14px;
	overflow: hidden;
	background: rgba(242, 242, 242, .08);
}

.otp__hero img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.otp__eyebrow {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--otp-accent);
}

.otp__name {
	margin: 0 0 20px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}

.otp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.otp__chip {
	display: inline-block;
	padding: 5px 15px;
	border: 1px solid rgba(242, 242, 242, .35);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--otp-paper);
}

a.otp__chip {
	transition: background-color .2s, border-color .2s, color .2s;
}

a.otp__chip:hover,
a.otp__chip:focus {
	background: var(--otp-accent);
	border-color: var(--otp-accent);
	color: var(--otp-navy);
}

.otp__desc {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(242, 242, 242, .85);
}

.otp__desc p { margin: 0 0 1.2em; }
.otp__desc p:last-child { margin-bottom: 0; }

/* --- contact card -------------------------------------------------------- */

.otp__card {
	padding: 28px;
	border-radius: 18px;
	background: var(--otp-accent);
	color: var(--otp-navy);
}

/* White panel behind the logo: several are black-on-transparent PNGs and would
   otherwise disappear into the card.

   Fixed height rather than aspect-ratio. With `aspect-ratio` the box height is
   derived from the ratio, which makes it an indefinite height — so `max-height:
   100%` on the image resolves to none and a square logo stretches the panel
   (334x334 instead of 334x223). A set height plus object-fit:contain letterboxes
   every logo into an identical box whatever its proportions. */
.otp__logo,
.otp__minilogo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
}

.otp__logo {
	height: 200px;
	padding: 22px;
	margin: 0 0 22px;
}

.otp__logo img,
.otp__minilogo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* No logo on file — monogram, so the panel isn't an empty white box. */
.otp__logo--initials {
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--otp-navy);
}

.otp__logo.otp__logo--initials { font-size: 52px; }
.otp__minilogo.otp__logo--initials { font-size: 38px; }

.otp__cardname {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--otp-navy);
}

.otp__rule {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 2px dotted rgba(19, 37, 67, .4);
}

.otp__details { margin: 0; }
.otp__detail + .otp__detail { margin-top: 16px; }

.otp__details dt {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(19, 37, 67, .65);
}

.otp__details dd {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--otp-navy);
}

.otp__details dd a {
	color: var(--otp-navy);
	border-bottom: 1px solid rgba(19, 37, 67, .35);
	transition: border-color .2s;
}

.otp__details dd a:hover,
.otp__details dd a:focus { border-bottom-color: var(--otp-navy); }

.otp__cta {
	display: block;
	margin-top: 26px;
	padding: 11px 26px;
	border: 2px solid var(--otp-navy);
	border-radius: 100px;
	background: var(--otp-navy);
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	transition: background-color .2s, color .2s;
}

.otp__cta:hover,
.otp__cta:focus {
	background: transparent;
	color: var(--otp-navy);
}

.otp__ctaurl {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	word-break: break-word;
	color: rgba(19, 37, 67, .7);
}

/* --- related members ----------------------------------------------------- */

.otp__related {
	margin-top: 72px;
	padding-top: 48px;
	border-top: 1px solid rgba(242, 242, 242, .15);
}

.otp__relatedhead {
	margin: 0 0 28px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--otp-paper);
}

.otp__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otp__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.otp__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- standalone grid: [profile-archive] / [profile-category-archive] ------ */

/* No top border here — unlike the related row, this block isn't following
   other profile content, it IS the section. */
.otp--grid .otp__relatedhead { margin-bottom: 24px; }

.otp__lede {
	max-width: 70ch;
	margin: 0 0 30px;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(242, 242, 242, .85);
}

.otp__lede p { margin: 0 0 1em; }
.otp__lede p:last-child { margin-bottom: 0; }

.otp__empty {
	margin: 0;
	font-size: 16px;
	color: rgba(242, 242, 242, .7);
	text-align: center;
}

/* --- directory filters: [profile-archive filters="1"] --------------------- */

/* The bar carries `hidden` in the markup and JS removes it, so no-JS visitors
   get the full unfiltered list instead of controls that do nothing. */
/* Solid panel rather than a rule-under-the-controls: the section's top edge sits
   over the hero photo, so the controls need their own opaque backing to stay
   legible. Radius matches the cards (18px). */
.otp__filters {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 32px;
	padding: 26px 28px;
	border-radius: 18px;
	background: #1b3052;
}

.otp__filters[hidden] { display: none; }

.otp__fgroup {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 10px;
}

.otp__flabel {
	flex: 0 0 116px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(242, 242, 242, .6);
}

.otp__fbtns {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 8px;
}

.otp__fbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid rgba(242, 242, 242, .28);
	border-radius: 999px;
	background: transparent;
	color: var(--otp-paper);
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.otp__fbtn:hover { border-color: rgba(242, 242, 242, .6); }

/* Navy on the village/accent colour, the same pairing the cards use — all five
   village colours clear 4.5:1 against navy. */
.otp__fbtn.is-on {
	border-color: var(--otp-accent);
	background: var(--otp-accent);
	color: var(--otp-navy);
	font-weight: 600;
}

.otp__fcount {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	opacity: .65;
}

.otp__fbtn.is-on .otp__fcount { opacity: .75; }

.otp__freset,
.otp__flink {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(242, 242, 242, .7);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.otp__freset:hover,
.otp__flink:hover { color: var(--otp-paper); }

.otp__freset[hidden] { display: none; }

.otp__count {
	margin: 0 0 20px;
	font-size: 14px;
	color: rgba(242, 242, 242, .7);
}

.otp__count[hidden],
.otp__empty[hidden] { display: none; }

.otp__mini[hidden] { display: none; }

/* Positioning context for cards being filtered out: the script lifts them out
   of the grid at their current spot so the survivors can reflow underneath
   while they fade, rather than after. */
.otp--dir .otp__cards { position: relative; }

/* Keyboard focus has to stay visible on both the transparent and filled states. */
.otp__fbtn:focus-visible,
.otp__freset:focus-visible,
.otp__flink:focus-visible {
	outline: 2px solid var(--otp-paper);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.otp__flabel { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.otp__fbtn { transition: none; }
}

.otp__mini > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	border-radius: 18px;
	background: var(--otp-accent);
	color: var(--otp-navy);
	transition: transform .2s;
}

.otp__mini > a:hover,
.otp__mini > a:focus { transform: translateY(-4px); }

.otp__minilogo {
	height: 150px;
	padding: 16px;
	margin-bottom: 16px;
	border-radius: 10px;
}

.otp__mininame {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--otp-navy);
}

.otp__minimeta,
.otp__minivillage {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(19, 37, 67, .75);
}

.otp__minivillage {
	margin-top: auto;
	padding-top: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
}

/* --- back to village ----------------------------------------------------- */

.otp__back {
	margin: 48px 0 0;
	text-align: center;
}

.otp__backbtn {
	display: inline-block;
	padding: 11px 26px;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 100px;
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	transition: background-color .2s, color .2s;
}

.otp__backbtn:hover,
.otp__backbtn:focus {
	background: #fff;
	color: var(--otp-navy);
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
	.otp__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* Logo and the contact actions lead on narrow screens — the page title is
	   already in the hero above, so the description can wait. */
	.otp__card { order: -1; }

	.otp__cards,
	.otp__cards--3,
	.otp__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.otp__name { font-size: 27px; }
}

@media (max-width: 767px) {
	.otp__cards,
	.otp__cards--2,
	.otp__cards--3,
	.otp__cards--4 { grid-template-columns: minmax(0, 1fr); }

	.otp__related {
		margin-top: 48px;
		padding-top: 36px;
	}

	.otp__name { font-size: 22px; }
	.otp__back { margin-top: 36px; }
}
/* ==========================================================================
   My Account — WooCommerce output inside a Brizy page

   Page 1919 uses brizy-blank-template.php. Brizy styles only its own .brz-*
   elements and sets no base typography, so `body` resolves to Times/black —
   true on every Brizy page here, /our-members/ included. It isn't a fault of
   the template; .otp simply sets its own font, and this output needs the same.

   The member-profiles plugin already lays this screen out and colours it (nav
   borders, active state, the CRED form) but uses `font-family: inherit`, so
   with nothing on body it renders in Times, and content links fall back to the
   browser's default blue.

   Scoped on body.woocommerce-account rather than a .brz-* wrapper class —
   those are regenerated whenever Brizy recompiles the page.
   ========================================================================== */

.woocommerce-account .woocommerce {
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #132543;
}

.woocommerce-account .woocommerce h1,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3,
.woocommerce-account .woocommerce legend {
	color: #132543;
	font-weight: 600;
}

/* Form controls don't inherit font-family from an ancestor, so the Account
   details fields need it explicitly. The CRED form sets its own via
   --mp-font-family and is unaffected by this. */
.woocommerce-account .woocommerce input,
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce button {
	font-family: inherit;
}

/* Nothing was styling these, so they rendered as the browser's default blue. */
.woocommerce-account .woocommerce-MyAccount-content a {
	color: #38a8d1;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover,
.woocommerce-account .woocommerce-MyAccount-content a:focus-visible {
	color: #1b3052;
}

/* --- Gumlet background video ---------------------------------------------- */

/* Drives ot_gumlet_bg_video() in functions.php. Opt an element in by adding
   ot-gumlet--<assetId> to it in Brizy, plus ot-gumlet-ar--<w>x<h> for the source
   aspect. The AR class is not optional on the Throsby hero: the source is portrait
   2160x3840, and the 16:9 fallback below would letterbox it badly.

   The wrapper is injected into the classed element's own .brz-bg, before
   .brz-bg-color, so a Brizy tint or gradient still paints over the video. */
[class*="ot-gumlet--"] .brz-bg .ot-video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	/* Makes the cqw/cqh below resolve against THIS box, so the cover maths works
	   whatever shape the element is. */
	container-type: size;
	/* 16:9 fallback; overridden inline per-video by ot-gumlet-ar--WxH. */
	--ot-video-ar: 1.7778;
	/* Fade up over the element's background image, which acts as the poster while
	   the embed loads. */
	opacity: 0;
	transition: opacity .8s ease;
}
[class*="ot-gumlet--"] .brz-bg .ot-video-bg.ot-video-loaded {
	opacity: 1;
}
/* NOTE: deliberately NO prefers-reduced-motion guard on this fade — carried over
   from D'Vine, where one was written in and removed the same day. It is
   self-defeating here: the background video autoplays and loops for every visitor
   regardless of the setting, so killing the fade removes no motion at all, it just
   swaps a gentle cross-fade for a hard cut into moving video. Restore it only if
   the looping playback is ever made to honour reduced-motion too — the two belong
   together. */
[class*="ot-gumlet--"] .ot-video-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* True object-fit:cover for an iframe. The iframe is matched to the VIDEO's own
	   aspect ratio so Gumlet fills it edge to edge with no internal letterbox
	   (transparent bars would otherwise reveal the poster through them). Its width
	   is then the larger of the full wrapper width or the width the video needs to
	   reach full wrapper height, so it overflows in BOTH dimensions at any element
	   shape and overflow:hidden clips the excess. */
	aspect-ratio: var(--ot-video-ar);
	width: max(100cqw, calc(100cqh * var(--ot-video-ar)));
	height: auto;
	border: 0;
	pointer-events: none;
}