/* Ethera Brand Guidelines, October 2026. Loaded after the app/commerce styles. */
@font-face {
  font-family: "Ethera Display";
  src: url("fonts/EtheraDisplay-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Ethera Display";
  src: url("fonts/EtheraDisplay-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --ethera-midnight: #0b182a;
  --ethera-gold: #ddbd75;
  --ethera-wordmark-gold: #c89d50;
  --ethera-teal: #75d8e4;
  --ethera-brass: #94652b;
  --ethera-ivory: #f0e7d2;
  --ethera-heading: "Ethera Display", Georgia, serif;
  --ethera-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}
body:is(.ethera-front-page, .woocommerce, .woocommerce-page) {
  --bg: var(--ethera-midnight);
  --panel: #102238;
  --panel2: #162a42;
  --white: var(--ethera-ivory);
  --gold: var(--ethera-wordmark-gold);
  --gold-light: var(--ethera-gold);
  --gold-dark: var(--ethera-brass);
  --cyan: var(--ethera-teal);
  --ethera-commerce-bg: var(--ethera-midnight);
  --ethera-commerce-panel: #102238;
  --ethera-commerce-text: var(--ethera-ivory);
  --ethera-commerce-gold: var(--ethera-wordmark-gold);
  --ethera-commerce-gold-light: var(--ethera-gold);
  background-color: var(--ethera-midnight);
  color: var(--ethera-ivory);
  font-family: var(--ethera-body);
}
body.ethera-front-page .agency-intro-page {
  --agency-intro-navy: var(--ethera-midnight);
  --agency-intro-panel: #102238;
  --agency-intro-gold: var(--ethera-gold);
  --agency-intro-cyan: var(--ethera-teal);
  --agency-intro-white: var(--ethera-ivory);
}
body.ethera-front-page :is(h1, h2),
body:is(.woocommerce, .woocommerce-page) :is(h1, h2) {
  font-family: var(--ethera-heading);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  overflow-wrap: break-word;
  text-wrap: balance;
}
body.ethera-front-page h1,
body:is(.woocommerce, .woocommerce-page) h1 { font-weight: 700; }
/* Small cards and controls remain sans serif; display type starts at 24px. */
body.ethera-front-page :is(.planner-card, .datacenter-assurance) h2,
body:is(.woocommerce, .woocommerce-page) .woocommerce-loop-product__title {
  font-family: var(--ethera-body);
  letter-spacing: normal;
}
body.ethera-front-page :is(.application-family, .guide-card) h2 { font-size: 24px; }
body.ethera-front-page :is(button, input, select, textarea, .primary, .secondary),
body:is(.woocommerce, .woocommerce-page) :is(button, input, select, textarea, .button) {
  font-family: var(--ethera-body);
}
body.ethera-front-page .site-header.expanded-header { background: var(--ethera-midnight); }
body.ethera-front-page .expanded-header .brand img {
  display: block;
  width: 178px;
  height: auto;
  aspect-ratio: 3;
}
body.ethera-front-page .portal-label-compact { display: none; }
body.ethera-front-page .footer-brand .wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
body.ethera-front-page .footer-brand .wordmark img {
  display: block;
  width: 190px;
  height: auto;
  aspect-ratio: 3;
}
body.ethera-front-page .footer-brand .wordmark span {
  font-family: var(--ethera-body);
  margin-top: 12px;
}
body.ethera-front-page .hosting-hero {
  background: radial-gradient(ellipse at 78% 45%, #173951 0, transparent 52%),
    var(--ethera-midnight);
}
body.ethera-front-page .hero-copy,
body.ethera-front-page .agency-intro-copy { min-width: 0; }
body.ethera-front-page .hosting-hero h1 {
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.18;
  max-width: 12em;
}
body.ethera-front-page .agency-intro-copy h1 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.18;
}
body.ethera-front-page .compass-caption strong,
body.ethera-front-page .ethera-intro-caption {
  font-family: var(--ethera-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--ethera-gold);
}
body.ethera-front-page .compass-caption span { color: #b7a582; }
body.ethera-front-page .ethera-intro-wordmark { padding: 0; letter-spacing: normal; }
body.ethera-front-page .ethera-intro-wordmark img {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  margin-inline: auto;
}
body.ethera-front-page :is(.primary, .agency-intro-button-primary) {
  background: var(--ethera-wordmark-gold);
  border-color: var(--ethera-wordmark-gold);
  color: var(--ethera-midnight);
}
body.ethera-front-page :is(.primary, .agency-intro-button-primary):hover {
  background: var(--ethera-gold);
  border-color: var(--ethera-gold);
}
/* Divi's select:focus and Woo variation rules otherwise force dark gray text.
   Keep native controls and their OS selection behavior, with readable options. */
body.ethera-front-page select,
body.ethera-front-page select:is(:focus, :active),
body:is(.woocommerce, .woocommerce-page) #main-content select,
body:is(.woocommerce, .woocommerce-page) #main-content select:is(:focus, :active),
body.ethera-front-page select :is(option, optgroup),
body:is(.woocommerce, .woocommerce-page) #main-content select :is(option, optgroup) {
  color: var(--ethera-ivory) !important;
  background-color: var(--ethera-midnight) !important;
  -webkit-text-fill-color: var(--ethera-ivory);
  color-scheme: dark;
}
body.ethera-front-page select :is(option, optgroup):disabled,
body:is(.woocommerce, .woocommerce-page) #main-content select :is(option, optgroup):disabled {
  color: #aeb7cc !important;
  -webkit-text-fill-color: #aeb7cc;
}
body.ethera-front-page select:focus-visible,
body:is(.woocommerce, .woocommerce-page) #main-content select:focus-visible {
  border-color: var(--ethera-gold);
  outline: 2px solid var(--ethera-gold);
  outline-offset: 3px;
}
/* Small navigation accents use the micro mark; detailed compasses stay large. */
body.ethera-front-page .ethera-compass-heading { padding-right: 78px; }
body.ethera-front-page .ethera-compass-accent { width: 48px; aspect-ratio: 1; opacity: .8; }
body.ethera-front-page .ethera-compass-accent img { display: block; width: 48px; height: 48px; }
body.ethera-front-page .brand-tools { border-top: 1px solid var(--line); }
body.ethera-front-page .brand-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
body.ethera-front-page .brand-tool-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 180ms ease, background 180ms ease;
}
body.ethera-front-page .brand-tool-card:hover { border-color: var(--ethera-wordmark-gold); background: var(--panel2); }
body.ethera-front-page .brand-tool-card h3 { margin: 0; font-size: 20px; }
body.ethera-front-page .brand-tool-card p { margin: 0; font-size: 13px; }
body.ethera-front-page .brand-tool-card > span { margin-top: auto; color: var(--ethera-gold); font-size: 12px; }
body.ethera-front-page .footer-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ethera-front-page .agency-intro-shop-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (min-width: 961px) {
  body.ethera-front-page .hosting-hero .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 1000px) {
  body.ethera-front-page .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.ethera-front-page .site-header.expanded-header { padding-inline: 16px; }
  body.ethera-front-page .expanded-header .masthead { gap: 8px; }
  body.ethera-front-page .expanded-header .brand img { width: 126px; }
  body.ethera-front-page .expanded-header .account { padding: 10px; gap: 6px; }
  body.ethera-front-page .portal-label-full { display: none; }
  body.ethera-front-page .portal-label-compact { display: inline; }
  body.ethera-front-page .hosting-hero h1 { font-size: clamp(32px, 7.4vw, 46px); }
  body.ethera-front-page .agency-intro-copy h1 { font-size: clamp(34px, 8vw, 46px); }
  body.ethera-front-page .brand-tools-grid { grid-template-columns: 1fr; gap: 14px; }
  body.ethera-front-page .brand-tool-card { padding: 23px; }
  body.ethera-front-page .ethera-compass-heading { padding-right: 0; }
  body.ethera-front-page .ethera-compass-accent { margin: 0 0 18px; }
}
@media (max-width: 400px) {
  body.ethera-front-page .site-header.expanded-header { padding-inline: 14px; }
  body.ethera-front-page .expanded-header .masthead { gap: 6px; }
  body.ethera-front-page .expanded-header .brand img { width: 120px; }
}