/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Pacific Transcription
Description: Child theme for Pacific Transcription. Carries every styling and template change. Presentation only.
Version: 1.1.0
*/

/* =========================================================================
   Design tokens
   ====================================================================== */

:root {
	--pt-red: #c8102e;
	--pt-red-alt: #d71920;
	--pt-white: #fff;

	--pt-header-z: 9999;
	--pt-call-button-z: 9998;

	--pt-call-button-size: 55px;
	--pt-call-button-icon: 35px;
	--pt-call-button-offset-bottom: 15px;
	--pt-call-button-offset-right: 20px;

	--pt-to-top-size: 46px;
	--pt-to-top-z: 9997;

	--pt-loader-color: var(--pt-red);
	--pt-loader-height: 4px;
	--pt-loader-z: 10000;

	--pt-mobile-max: 650px;
}

/* =========================================================================
   Utilities
   ====================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* =========================================================================
   Breadcrumbs
   ====================================================================== */

.custom-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--pt-red);
	padding: 5px 20px;
	font-size: 15px;
	font-weight: 700;
}

.custom-breadcrumbs a {
	color: var(--pt-white);
	text-decoration: underline;
	transition: opacity .3s;
}

.custom-breadcrumbs a:hover {
	opacity: .8;
}

.custom-breadcrumbs a:focus-visible {
	outline: 2px solid var(--pt-white);
	outline-offset: 2px;
}

.custom-breadcrumbs .separator {
	color: var(--pt-white);
	font-size: 20px;
	font-weight: 700;
}

.custom-breadcrumbs .current {
	color: var(--pt-white);
}

/* =========================================================================
   Numbered accordion
   ====================================================================== */

.number-accordion {
	counter-reset: accordion-counter;
}

.number-accordion .e-n-accordion-item {
	counter-increment: accordion-counter;
}

.number-accordion .e-n-accordion-item-title-header {
	display: flex;
	align-items: center;
	gap: 18px;
}

.number-accordion .e-n-accordion-item-title-header::before {
	content: counter(accordion-counter);
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 50%;
	background: var(--pt-red-alt);
	color: var(--pt-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
}

.number-accordion .e-n-accordion-item-title-text {
	flex: 1;
}

.number-accordion .e-n-accordion-item-title-icon {
	margin-left: auto;
}

/* =========================================================================
   Call button
   ====================================================================== */

.ptc-call-button {
	display: none;
	position: fixed;
	bottom: var(--pt-call-button-offset-bottom);
	right: var(--pt-call-button-offset-right);
	width: var(--pt-call-button-size);
	height: var(--pt-call-button-size);
	border-radius: 50%;
	background-color: var(--pt-red);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: var(--pt-call-button-icon) var(--pt-call-button-icon);
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	text-decoration: none;
	z-index: var(--pt-call-button-z);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ptc-call-button:hover,
.ptc-call-button:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.ptc-call-button:focus-visible {
	outline: 3px solid var(--pt-white);
	outline-offset: 2px;
}

@media screen and (max-width: 650px) {

	.ptc-owns-call-button .ptc-call-button {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ptc-call-button {
		transition: none;
	}

	.ptc-call-button:hover,
	.ptc-call-button:focus-visible {
		transform: none;
	}
}

/* =========================================================================
   Page load bar
   ====================================================================== */

.ptc-progress {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--pt-loader-height);
	z-index: var(--pt-loader-z);
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}

.ptc-progress.is-active {
	opacity: 1;
}

.ptc-progress__bar {
	width: 100%;
	height: 100%;
	background: var(--pt-loader-color);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .25s ease-out;
	backface-visibility: hidden;
}

/* =========================================================================
   Back to top
   ====================================================================== */

/* Class doubled to outrank .elementor-kit-7 button. Do not simplify. */
.ptc-to-top.ptc-to-top {
	position: fixed;
	box-sizing: border-box;
	bottom: 24px;
	right: 24px;
	width: var(--pt-to-top-size);
	height: var(--pt-to-top-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid var(--pt-red);
	border-radius: 50%;
	background: var(--pt-white);
	color: var(--pt-red);
	cursor: pointer;
	z-index: var(--pt-to-top-z);
	opacity: 0;
	transform: translateY(8px) scale(.92);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, background-color .2s ease, color .2s ease;
	backface-visibility: hidden;
}

.ptc-to-top.ptc-to-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.ptc-to-top.ptc-to-top:hover,
.ptc-to-top.ptc-to-top:focus-visible {
	background: var(--pt-red);
	color: var(--pt-white);
}

.ptc-to-top.ptc-to-top:focus-visible {
	outline: 3px solid var(--pt-red);
	outline-offset: 3px;
}

.ptc-to-top svg {
	display: block;
}

@media screen and (max-width: 650px) {

	.ptc-owns-call-button .ptc-to-top {
		bottom: calc(var(--pt-call-button-offset-bottom) + var(--pt-call-button-size) + 12px);
		right: calc(var(--pt-call-button-offset-right) + (var(--pt-call-button-size) - var(--pt-to-top-size)) / 2);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ptc-to-top {
		transition: opacity .2s ease;
		transform: none;
	}

	.ptc-to-top.is-visible {
		transform: none;
	}
}

/* =========================================================================
   Sticky header
   ====================================================================== */

.ptc-owns-header .ptc-header {
	position: relative;
	z-index: var(--pt-header-z);
}

/* Leaving state. Also the state the header is fixed in before it animates in. */
.ptc-owns-header .ptc-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-100%);
	transition: transform .1s ease;
	box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
	backface-visibility: hidden;
	will-change: transform;
}

/* Arriving state. */
.ptc-owns-header .ptc-header.is-stuck.is-visible {
	transform: translateY(0);
	transition: transform .4s ease;
}

.ptc-owns-header .ptc-header-spacer {
	display: none;
}

.ptc-owns-header .ptc-header-spacer.is-active {
	display: block;
}

@media (prefers-reduced-motion: reduce) {

	.ptc-owns-header .ptc-header.is-stuck,
	.ptc-owns-header .ptc-header.is-stuck.is-visible {
		transition: none;
	}
}

.elementor[data-elementor-type="section"] .e-con {
	transition: none;
}

@media (min-width: 1025px) {

	.elementor-174 .elementor-element-5a6ff40 {
		overflow-x: clip;
	}

	.elementor-174 .elementor-element-518de1f {
		background: #fff;
	}

	.elementor:has(> .e-con.top-section .custom-breadcrumbs) {
		overflow-x: clip;
	}

	.elementor .e-con.top-section:has(.custom-breadcrumbs) {
		position: relative;
		isolation: isolate;
	}

	.elementor .e-con.top-section .custom-breadcrumbs {
		position: relative;
	}

	.elementor-174 .elementor-element-836b31d::after,
	.elementor .e-con.top-section:has(.custom-breadcrumbs)::after,
	.elementor .e-con.top-section .custom-breadcrumbs::before {
		content: "";
		position: absolute;
		inset: 0 -100vmax -1px;
		z-index: -2;
		background: #c81926;
	}

	.elementor .e-con.top-section .custom-breadcrumbs::before {
		z-index: -1;
		background: var(--pt-red);
	}
}