/* Self-hosted fonts (copied from the live site's own cached Google Fonts files, rather than
   relying on the external CDN — confirmed unreliable in testing: the googleapis.com link failed
   to load at all under some network conditions, silently falling the whole site back to Arial). */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/robotoflex-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cinzel-600-latin.woff2") format("woff2");
}

/* Omega One Development Corporation — base styles.
   Every value below is extracted directly from the live site's own generated CSS
   (wp-content/uploads/elementor/css/post-*.css for widget-level styles, and
   wp_options.generate_dynamic_css_output for the GeneratePress theme chrome), not guessed.
   Sources are noted inline where it matters. */

:root {
  /* Theme chrome (GeneratePress generate_dynamic_css_output :root vars) */
  --color-contrast: #222222;   /* body text */
  --color-contrast-2: #575760;
  --color-contrast-3: #b2b2be;
  --color-base: #f0f0f0;       /* dropdown background */
  --color-base-2: #f7f8f9;     /* page background */
  --color-base-3: #ffffff;     /* header/footer background */

  /* Site accent (used everywhere on the homepage: nav hover/active, borders, buttons, icons —
     wp_options.generate_settings.navigation_text_hover_color / *_current_color, and every
     Elementor widget's explicit color override) */
  --color-gold: #93895B;
  --color-heading: #897B4C;    /* heading text color, distinct from the gold accent */
  --color-body-text: #404040;  /* Elementor text-editor/icon-list override, not the theme default */

  --font-heading: Georgia, "Times New Roman", serif;      /* font-weight 600 on every heading */
  --font-body: "Roboto Flex", Arial, Helvetica, sans-serif; /* NOT plain Roboto */
  --font-accent: Cinzel, Georgia, serif;                   /* used on one decorative divider */

  --container-width: 1140px;   /* Elementor's boxed container width (e-con / section-boxed) */
  --radius: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-contrast);
  background: var(--color-base-2);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.25;
  margin: 0 0 0.5em;
}
p { color: var(--color-body-text); }

/* ---- Header / nav (real GeneratePress layout: nav BELOW header, both centered, white bg) ---- */
.site-header {
  background: var(--color-base-3);
}
.inside-header {
  max-width: 2000px;
  margin: 0 auto;
  padding: 12px 40px;
  text-align: center;
}
.site-branding { margin-bottom: 4px; }
.header-image {
  /* CSS archaeology said 200px should match the live site exactly, but a direct screenshot
     comparison (2026-10-23) showed the live header is visibly more compact than that produced —
     trusting the real screenshot over the computed value. */
  width: 130px;
  height: auto;
  margin: 0 auto;
  vertical-align: middle;
}

.main-navigation { background: var(--color-base-3); }
.main-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav > li > a {
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 60px;   /* real value: generatepress/assets/css/main.min.css .main-nav ul li a */
  font-size: 15px;
  color: var(--color-contrast);
}
.main-nav > li > a:hover,
.main-nav > li.current > a {
  color: var(--color-gold);
}
.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  z-index: 200;  /* without this, it paints behind any later section that uses position:relative
                    (every page-hero banner does, for its dark overlay), since .dropdown itself
                    has no stacking context without an explicit z-index */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: var(--color-base);   /* real value: .main-navigation ul ul background */
  list-style: none;
  margin: 0;
  padding: 8px 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  border-radius: var(--radius);
  text-align: left;
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown li a {
  display: block;
  padding: 10px 18px;
  font-size: 0.88rem;
  color: var(--color-contrast);
}
.dropdown li a:hover { color: var(--color-gold); background: rgba(0,0,0,0.03); }

.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 860px) {
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 6px;
    margin: 0 auto 10px;
    width: fit-content;
  }
  .nav-toggle-label span { width: 24px; height: 2px; background: var(--color-contrast); }
  .main-navigation { display: none; }
  .main-nav { flex-direction: column; gap: 0; }
  .main-nav > li > a { display: block; padding: 12px 0; border-bottom: 1px solid #eee; }
  .dropdown { position: static; transform: none; box-shadow: none; display: block; }
  .nav-toggle:checked ~ .main-navigation { display: block; }
}

/* ---- Hero / video section (real aspect-ratio from post-33.css: 2.33333, bleeds to edges) ---- */
.hero {
  position: relative;
  background: #000;
  overflow: hidden;
}
.hero video {
  width: 100%;
  aspect-ratio: 2.33333;
  display: block;
  object-fit: cover;
}

/* ---- Generic section rhythm (Elementor's default --widgets-spacing: 20px) ---- */
.section { padding: 50px 0; }   /* real value: repeated --spacer-size:50px between sections */
.section-tight { padding: 20px 0; }
.section-alt { background: var(--color-base-3); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
}

/* ---- Decorative divider heading ("__" in the source — invisible text, only its
   border-bottom renders; real value: color #897B4C00 (alpha 0), border 2px solid #93895B,
   font Cinzel) ---- */
.divider {
  border-top: 2px solid var(--color-gold);
  width: 100%;
  margin: 0 auto;
  height: 0;
  font-family: var(--font-accent);
}

/* ---- Two-column intro (heading/text/button + image) ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: var(--radius); }

.btn {
  display: inline-block;
  padding: 12px 26px;
  background: var(--color-gold);   /* real value: elementor-button background-color #93895B */
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}
.btn:hover { opacity: 0.88; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
}

/* ---- Promo cards (real values from post-33.css: min-height 280px, padding 30px,
   overlay #6B6B6B66 normal / #373737A6 on hover, title color #ffffff Georgia) ---- */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (max-width: 760px) { .promo-grid { grid-template-columns: 1fr; } }
.promo-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.promo-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.promo-card .overlay {
  position: absolute; inset: 0;
  background: #6B6B6B66;
  transition: background-color 0.3s;
}
.promo-card:hover .overlay { background: #373737A6; }
.promo-card .promo-title {
  position: relative;
  padding: 30px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  color: #ffffff;
}

/* ---- Icon / link lists (real values: font-size 18px, text color #404040,
   icon/marker color #93895B, Roboto Flex 400) ---- */
.link-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 24px;
}
@media (max-width: 760px) { .link-columns { grid-template-columns: 1fr; } }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-bottom: 1px solid rgba(0,0,0,0.08); }
.link-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 1.125rem;   /* 18px, matches the real --e-icon-list-icon-size / font-size */
  color: var(--color-body-text);
}
.link-list li a::before {
  content: "\276F";  /* real icon: Elementor icon-list's chevron (>), not a plain dot */
  color: var(--color-gold);
  font-weight: 700;
  flex: none;
}
.link-list li a:hover { color: var(--color-gold); }

/* ---- President section (real: background-image Untitled-design.png, content-width 1140px,
   padding-left 70px / padding-right 49px on desktop — no dark fill color, it's an image) ---- */
.president {
  background-image: url("/images/president-bg.png");
  /* the source file already includes the president's photo, composited on the right side —
     text must stay left-aligned and narrow so it doesn't sit over/compete with his photo.
     Real section is much taller than a first guess suggested — confirmed via a matched-viewport
     screenshot comparison (2026-10-23): the live section fills the whole viewport at this
     scroll position, so the background photo renders far larger than a small padding box
     allows. min-height forces the same large, filled-frame look. */
  background-size: cover;
  background-position: center;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 60px 70px;
}
.president-inner { max-width: 1140px; width: 100%; margin: 0 auto; text-align: left; }
/* narrower than the full inner width — the photo sits in the right portion of the banner, so
   text must stay clear of it rather than reaching toward the container's own center */
.president-inner p, .president-inner h2, .president-inner .eyebrow { max-width: 480px; }

/* ---- Contact / form section ---- */
.contact-form { max-width: 640px; margin: 24px auto 0; }
.contact-form label { display: block; margin-bottom: 14px; font-size: 0.92rem; color: var(--color-body-text); }
.contact-form input, .contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d8d4c9;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
}
.contact-form .form-note { margin-top: 12px; font-size: 0.85rem; }
.form-note.success { color: #2f7d4f; }
.form-note.error { color: #b3432b; }

/* ---- Footer (real: white background, same as header — .footer-widgets / .site-info
   both use --base-3) ---- */
.site-footer { background: var(--color-base-3); }
.footer-widgets { padding: 40px 0; border-top: 1px solid #eee; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}
.footer-logo { width: 140px; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { color: var(--color-contrast); }
.footer-nav a:hover { color: var(--color-gold); }
.site-info {
  padding: 16px 0;
  border-top: 1px solid #eee;
  font-size: 0.82rem;
  color: var(--color-contrast-2);
}

/* ---- Simple page header (for inner pages) ---- */
.page-hero {
  background: var(--color-base-3);
  border-bottom: 1px solid #eee;
  padding: 48px 0;
  text-align: center;
}