/* ==========================================================================
   OCEES - "Develop with us" (Contact)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .contact .contact-link
              app/page.tsx  <section className="contact">

   Elementor: Home page, thirteenth container - "Contact"

   Structure - the same DOM the React build has:
     section.ocees-contact.e-con      82vh, teal, content pushed apart
       |- .ocees-contact__head.e-con
       |    |- .ocees-label            Heading (p)
       |    `- .ocees-contact__title   Heading (h2)
       `- .ocees-contact__link         Button widget (mailto)

   Not on the `.ocees-section` rhythm - the reference gives this section its
   own padding, with a shorter bottom edge (55px).
   ========================================================================== */

:root {
	--ocees-contact-bg: #08aebe;
	--ocees-contact-fg: #03232d;
	--ocees-contact-rule: #075b67;
	--ocees-contact-pad-top: clamp(76px, 9vw, 140px);
	--ocees-contact-pad-inline: clamp(22px, 6vw, 100px);
	--ocees-contact-pad-bottom: 55px;
}

/* --------------------------------------------------------------------------
   1. Section
   The band colour is set on the container in Elementor (Style > Background);
   the text colour is set here, since containers have no colour control.
   `space-between` is what parks the headline at the top and the link at the
   foot of the 82vh block.
   -------------------------------------------------------------------------- */

.ocees-contact.e-con {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: none;
	min-height: 82vh;
	padding: var(--ocees-contact-pad-top) var(--ocees-contact-pad-inline) var(--ocees-contact-pad-bottom);
	color: var(--ocees-contact-fg);
}

.ocees-contact__head.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}

.ocees-contact__head > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.ocees-contact__title .elementor-heading-title {
	margin: 28px 0 60px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(4rem, 9vw, 10rem);
	font-weight: 500;
	line-height: 0.84;
	letter-spacing: -0.075em;
}

/* --------------------------------------------------------------------------
   2. Contact link
   The reference is a single <a> laid out as a rule-bounded row: label left,
   arrow right, sliding 7px on hover. Elementor's Button gives the same link
   with an editable label; its default chrome is stripped back here and the
   row lives on the button's content wrapper, which is where the icon and the
   text actually sit.
   -------------------------------------------------------------------------- */

.ocees-contact__link .elementor-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 24px 0;
	border: 0;
	border-top: 1px solid var(--ocees-contact-rule);
	border-bottom: 1px solid var(--ocees-contact-rule);
	border-radius: 0;
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	fill: currentColor;
	font-family: var(--ocees-font-sans);
	font-size: clamp(1.05rem, 1.8vw, 1.6rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
}

.ocees-contact__link .elementor-button:hover,
.ocees-contact__link .elementor-button:focus,
.ocees-contact__link .elementor-button:active {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
}

/* Elementor sets `flex-direction: row-reverse` here from the widget's Icon
   Position control, so the arrow ends up on the right. */
.ocees-contact__link .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ocees-contact__link .elementor-button-icon {
	display: flex;
	flex: 0 0 auto;
	transition: transform 0.2s;
}

.ocees-contact__link .elementor-button-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

.ocees-contact__link .elementor-button:hover .elementor-button-icon,
.ocees-contact__link .elementor-button:focus .elementor-button-icon {
	transform: translateX(7px);
}

.ocees-contact__link .elementor-button:focus-visible {
	outline: 2px solid var(--ocees-contact-fg);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   3. Responsive
   The reference has no breakpoint rules for this section - the clamped type
   and padding carry it.
   -------------------------------------------------------------------------- */