/* ==========================================================================
   OCEES - Site footer
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              footer .footer-top .footer-bottom (and the shared .brand rule)
              app/page.tsx  <footer>

   Elementor: Templates > Theme Builder > Footer > "OCEES - Site Footer"

   Structure (Elementor Pro prints the <footer> landmark itself, so the
   container inside it is a plain div - the same arrangement as the header):
     footer.elementor-location-footer
       |- div.ocees-footer.e-con              the dark band
            |- .ocees-footer__top.e-con       grid 1fr 1fr 1fr
            |    |- .ocees-footer__brand      Site Logo widget
            |    |- .ocees-footer__address    Text Editor
            |    `- .ocees-footer__email      Button widget (mailto)
            `- .ocees-footer__bottom.e-con    two spans, pushed apart
                 |- .ocees-footer__copyright  Heading (span)
                 `- .ocees-footer__legal      Heading (span)
   ========================================================================== */

:root {
	--ocees-footer-bg: #051a27;
	--ocees-footer-pad-inline: clamp(22px, 6vw, 100px);
	--ocees-footer-top-fg: #a8bdc3;
	--ocees-footer-email-rule: #4a6570;
	--ocees-footer-bottom-rule: #27404b;
	--ocees-footer-bottom-fg: #6f8a94;
	--ocees-footer-plate-width: 185px;
}

/* --------------------------------------------------------------------------
   1. The band
   -------------------------------------------------------------------------- */

.ocees-footer.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 54px var(--ocees-footer-pad-inline) 30px;
	background-color: var(--ocees-footer-bg);
	color: #fff;
}

/* --------------------------------------------------------------------------
   2. Top row
   -------------------------------------------------------------------------- */

.ocees-footer__top.e-con {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: start;
	gap: 36px;
	width: 100%;
	max-width: none;
	padding: 0;
}

/* The reference styles this row with two rules:
 *
 *   .footer-top p, .footer-top > a { margin:0; color:#a8bdc3; font-size:.83rem; line-height:1.7 }
 *   .footer-top > a               { justify-self:end; border-bottom:1px solid #4a6570 }
 *
 * `.footer-top > a` catches BOTH links - the email AND the logo, which is
 * also an <a>. So the logo is right-aligned in its column and carries the
 * same hairline underline. Neither reads as deliberate, but that is how the
 * approved design renders, so both are reproduced rather than "corrected".
 * The underline is also what makes the plate a pixel taller than padding
 * plus image would suggest.
 */
.ocees-footer__address p,
.ocees-footer__brand a,
.ocees-footer__email .elementor-button {
	margin: 0;
	color: var(--ocees-footer-top-fg);
	font-family: var(--ocees-font-sans);
	font-size: 0.83rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
	text-transform: none;
}

.ocees-footer__brand,
.ocees-footer__email {
	justify-self: end;
}

.ocees-footer__brand a,
.ocees-footer__email .elementor-button {
	border: 0;
	border-bottom: 1px solid var(--ocees-footer-email-rule);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* The logo sits on a white plate 185px wide - the plate is the link box, as
   `.brand` is in the reference. */
.ocees-footer__brand a {
	display: flex;
	box-sizing: border-box;
	width: var(--ocees-footer-plate-width);
	padding: 7px 10px;
	background-color: #fff;
}

.ocees-footer__brand img {
	width: 100%;
	max-width: none;
	height: auto;
}

/* `display: block` matters: in the reference this link is a grid item and so
   is blockified, which puts its underline on the bottom of the box rather
   than under an inline box's content area. */
.ocees-footer__email .elementor-button {
	display: block;
	width: 100%;
	padding: 0;
}

.ocees-footer__email .elementor-button:hover,
.ocees-footer__email .elementor-button:focus,
.ocees-footer__email .elementor-button:active {
	background: transparent;
	box-shadow: none;
	color: var(--ocees-footer-top-fg);
}

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

/* --------------------------------------------------------------------------
   3. Bottom row
   -------------------------------------------------------------------------- */

.ocees-footer__bottom.e-con {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: none;
	padding: 22px 0 0;
	margin-block-start: 70px;
	border-top: 1px solid var(--ocees-footer-bottom-rule);
}

.ocees-footer__copyright .elementor-heading-title,
.ocees-footer__legal .elementor-heading-title {
	display: block;
	margin: 0;
	color: var(--ocees-footer-bottom-fg);
	font-family: var(--ocees-font-sans);
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

/* Tablet and below - matches the React `@media (max-width: 980px)` block. */
@media (max-width: 980px) {
	.ocees-footer__top.e-con {
		grid-template-columns: 1fr 1fr;
	}

	/* Same pairing as the desktop rule - the reference's `.footer-top > a`
	   catches the logo as well as the email. */
	.ocees-footer__brand,
	.ocees-footer__email {
		justify-self: start;
	}
}

/* Phones - matches the React `@media (max-width: 620px)` block. */
@media (max-width: 620px) {
	.ocees-footer__top.e-con {
		grid-template-columns: 1fr;
	}

	.ocees-footer__bottom.e-con {
		flex-direction: column;
	}
}