/*
Theme Name: Upland Engineers
Theme URI: https://uplandengineers.com
Description: Custom child theme for Upland Engineers, built on Hello Elementor. Houses design tokens, font loading, and site-wide CSS.
Author: Tuskr Media
Author URI: https://tuskrmedia.com
Template: hello-elementor
Version: 1.0.0
Text Domain: upland-child
*/

/* ============================================================
   GLOBAL DESIGN TOKENS
   ============================================================ */

:root {
  /* Ridgeline palette */
  --upland-primary: #2c2c2c;
  --upland-dark: #1a1a1a;
  --upland-accent: #c8941a;
  --upland-steel: #4a6a80;
  --upland-surface: #f7f5f2;
  --upland-white: #ffffff;

  /* Text colors */
  --upland-text-primary: #1a1a1a;
  --upland-text-muted: #555555;
  --upland-text-subtle: rgba(255, 255, 255, 0.7);

  /* Borders */
  --upland-border: #e8e4de;

  /* Typography */
  --upland-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --upland-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */

body {
  font-family: var(--upland-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--upland-text-primary);
  background: var(--upland-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--upland-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--upland-dark);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--upland-accent);
}

/* ============================================================
   REUSABLE UTILITY CLASSES
   These match the design system used across all pages. Apply
   them in Elementor's "CSS Classes" field on any element.
   ============================================================ */

/* Section eyebrow — small uppercase label above a heading */
.upland-eyebrow,
.upland-eyebrow .elementor-heading-title,
.upland-eyebrow .elementor-widget-container {
  color: var(--upland-accent) !important;
}

.upland-eyebrow .elementor-heading-title {
  font-family: var(--upland-sans) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--upland-accent) !important;
}

.upland-eyebrow {
  margin-bottom: 18px !important;
  display: block !important;
}

/* Italic-emphasized word in headings (the "tomorrow" / "concept" / "the region" treatment) */
.upland-italic-emphasis {
  font-style: italic;
  color: var(--upland-primary);
}

/* Button — primary (dark) */
.upland-btn-primary .elementor-button,
.upland-btn-primary > .elementor-widget-container > .elementor-button,
.elementor-widget.upland-btn-primary .elementor-button {
  background-color: #2c2c2c !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #2c2c2c !important;
  font-family: var(--upland-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 16px 30px 16px 30px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
}

.upland-btn-primary .elementor-button:hover,
.upland-btn-primary > .elementor-widget-container > .elementor-button:hover,
.elementor-widget.upland-btn-primary .elementor-button:hover {
  background-color: #c8941a !important;
  border-color: #c8941a !important;
  color: #ffffff !important;
}

/* Button — outline */
.upland-btn-outline .elementor-button,
.upland-btn-outline > .elementor-widget-container > .elementor-button,
.elementor-widget.upland-btn-outline .elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  color: #2c2c2c !important;
  border: 1.5px solid #2c2c2c !important;
  font-family: var(--upland-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 16px 30px 16px 30px !important;
  transition: background-color 0.2s, color 0.2s !important;
}

.upland-btn-outline .elementor-button:hover,
.upland-btn-outline > .elementor-widget-container > .elementor-button:hover,
.elementor-widget.upland-btn-outline .elementor-button:hover {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
}

/* Button — accent (gold) */
.upland-btn-accent .elementor-button,
.upland-btn-accent > .elementor-widget-container > .elementor-button,
.elementor-widget.upland-btn-accent .elementor-button {
  background-color: #c8941a !important;
  background-image: none !important;
  color: #1a1a1a !important;
  border: 1.5px solid #c8941a !important;
  font-family: var(--upland-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 16px 30px 16px 30px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
}

.upland-btn-accent .elementor-button:hover,
.upland-btn-accent > .elementor-widget-container > .elementor-button:hover,
.elementor-widget.upland-btn-accent .elementor-button:hover {
  background-color: #b88416 !important;
  border-color: #b88416 !important;
  color: #1a1a1a !important;
}

/* Also remove default Elementor button hover transform/scale effects */
.upland-btn-primary .elementor-button:hover,
.upland-btn-outline .elementor-button:hover,
.upland-btn-accent .elementor-button:hover {
  transform: none !important;
}

/* Ensure button text inside the button uses our typography */
.upland-btn-primary .elementor-button-text,
.upland-btn-outline .elementor-button-text,
.upland-btn-accent .elementor-button-text {
  font-family: var(--upland-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Section dividers and separators */
.upland-divider {
  width: 60px;
  height: 2px;
  background: var(--upland-accent);
  border: none;
  margin: 32px 0;
}

.upland-services-list .elementor-icon-list-item {
    border-bottom: 1px solid #e8e4de;
    padding: 9px 0;
}
.upland-services-list .elementor-icon-list-item:last-child {
    border-bottom: none;
}

/* ============================================================
   SERVICE AREA — CITY PILLS
   For the dark band on Services page. Each city is a Heading
   widget with class `upland-city-pill` applied via Advanced.
   ============================================================ */

.upland-city-pill,
.upland-city-pill .elementor-heading-title {
  font-family: var(--upland-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}

.upland-city-pill {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 7px 18px 7px 18px !important;
  display: inline-block !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: border-color 0.2s, color 0.2s !important;
}

.upland-city-pill:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.upland-city-pill:hover .elementor-heading-title {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================
   TEAM CARD STYLES
   For use in the About page team grid (loops the team_member CPT).
   ============================================================ */

.upland-team-card {
  background: var(--upland-white);
  border: 1px solid var(--upland-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 0px;
}

/* The image widget container holding the team photo */
.upland-team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.upland-team-photo .elementor-widget-container {
  width: 100%;
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

/* The actual <img> tag — fill the container, crop with object-fit */
.upland-team-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
  margin: 0px 0px 0px 0px;
}

.upland-team-body {
  padding: 26px 12px 30px 12px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: var(--upland-white);
  margin: 0px 0px 0px 0px;
}

.upland-team-name {
  font-family: var(--upland-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--upland-dark);
  margin: 0px 0px 4px 0px;
}

.upland-team-credential {
  font-family: var(--upland-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--upland-accent);
  text-transform: uppercase;
  margin: 0px 0px 18px 0px;
}

.upland-team-bio {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--upland-text-muted);
  flex-grow: 1;
  padding: 0px 0px 10px 0px;
  margin: 0px 0px 18px 0px;
}

.upland-team-email {
  font-family: var(--upland-sans);
  font-size: 12px;
  color: var(--upland-steel);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 14px 0px 0px 0px;
  border-top: 1px solid var(--upland-border);
  word-break: break-all;
  margin: 0px 0px 0px 0px;
}

/* Mobile-specific: ensure team body sits below the photo cleanly */
@media (max-width: 767px) {
  .upland-team-card {
    margin: 0px 0px 20px 0px;
  }
  .upland-team-body {
    padding: 22px 16px 26px 16px;
  }
}

/* ============================================================
   PROJECT LIST ROW STYLES
   For use in the Projects page (loops the project CPT).
   ============================================================ */

.upland-project-row,
.elementor-element.upland-project-row,
.e-loop-item.upland-project-row {
  display: grid !important;
  grid-template-columns: 60px 1.5fr 1fr 1fr 140px !important;
  gap: 32px !important;
  align-items: baseline !important;
  padding: 32px 0 !important;
  border-bottom: 1px solid var(--upland-border) !important;
  transition: background 0.2s !important;
  flex-direction: row !important;
}

.upland-project-row:first-child,
.elementor-element.upland-project-row:first-child,
.e-loop-item.upland-project-row:first-child {
  border-top: 1px solid var(--upland-border) !important;
}

.upland-project-row:hover,
.elementor-element.upland-project-row:hover,
.e-loop-item.upland-project-row:hover {
  background: rgba(200, 148, 26, 0.04) !important;
}

.upland-project-num {
  font-family: var(--upland-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--upland-accent);
  line-height: 1;
}

.upland-project-name {
  font-family: var(--upland-serif);
  font-size: 26px;
  line-height: 1.25;
  color: var(--upland-dark);
}

.upland-project-location {
  font-family: var(--upland-sans);
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--upland-text-primary);
}

.upland-project-type {
  font-family: var(--upland-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--upland-steel);
}

.upland-project-scale {
  font-family: var(--upland-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--upland-text-primary);
  text-align: right;
  letter-spacing: 0.02em;
}

.upland-project-scale-unit {
  font-size: 11px;
  color: var(--upland-text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* ============================================================
   DISCIPLINE LIST ROW STYLES
   For the Careers page "Where you might fit" section.
   Two-part editorial row — italic gold numeral + Lora name on
   the left, right-aligned requirement on the right. Built to
   echo the "Why Join Our Team" numbered list directly above it.

   STRUCTURE (per row): one Container with class
   `upland-discipline-row` holding exactly THREE child Heading
   widgets, each with one of the inner classes below:
     1. upland-discipline-num   (numeral: 01, 02, 03, 04)
     2. upland-discipline-name  (e.g. Civil Engineering)
     3. upland-discipline-req   (e.g. PE or EI)
   The grid handles all positioning — do NOT set widths, gaps,
   or alignment on the child widgets in Elementor. Leave their
   Width as Default.

   Third track is a fixed 160px column (not auto), so the
   requirement pulls in from the far edge and closes the
   center gap, while staying right-aligned and flush row-to-row.
   ============================================================ */

.upland-discipline-row,
.elementor-element.upland-discipline-row {
  display: grid !important;
  grid-template-columns: 48px 1fr 160px !important;
  gap: 0px 32px !important;
  align-items: baseline !important;
  padding: 28px 0px 28px 0px !important;
  border-bottom: 1px solid var(--upland-border) !important;
  transition: background 0.2s !important;
  flex-direction: row !important;
}

.upland-discipline-row:first-child,
.elementor-element.upland-discipline-row:first-child {
  border-top: 1px solid var(--upland-border) !important;
}

.upland-discipline-row:hover,
.elementor-element.upland-discipline-row:hover {
  background: rgba(200, 148, 26, 0.04) !important;
}

/* Numeral — italic gold Lora, matches the "Why Join" treatment */
.upland-discipline-num,
.upland-discipline-num .elementor-heading-title {
  font-family: var(--upland-serif) !important;
  font-style: italic !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--upland-accent) !important;
}

/* Discipline name — Lora, dark */
.upland-discipline-name,
.upland-discipline-name .elementor-heading-title {
  font-family: var(--upland-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--upland-dark) !important;
}

/* Requirement — Sora, muted, right-aligned within the 160px column */
.upland-discipline-req,
.upland-discipline-req .elementor-heading-title {
  font-family: var(--upland-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  color: var(--upland-text-muted) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* ============================================================
   DELIVERABLES GRID
   3-column responsive grid for the Services page deliverables.
   ============================================================ */

.upland-deliverables-grid,
.elementor-element.upland-deliverables-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

.upland-deliverables-grid > .e-con-inner {
  display: contents !important;
}

@media (max-width: 1024px) {
  .upland-deliverables-grid,
  .elementor-element.upland-deliverables-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .upland-deliverables-grid,
  .elementor-element.upland-deliverables-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   RESPONSIVE
   Mobile breakpoint adjustments. Elementor handles most of this
   via its responsive controls, but these hold the line for our
   custom card and row components.
   ============================================================ */

@media (max-width: 1024px) {
  .upland-project-row {
    grid-template-columns: 40px 1fr 1fr;
    gap: 16px;
  }
  .upland-project-row .upland-project-type,
  .upland-project-row .upland-project-scale {
    grid-column: span 3;
    margin-top: 8px;
  }
}

@media (max-width: 767px) {
  .upland-project-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .upland-project-scale {
    text-align: left;
  }

  /* Discipline rows: numeral stacked on top, then name, then
     requirement — matches the "Why Join" mobile pattern. */
  .upland-discipline-row,
  .elementor-element.upland-discipline-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px 0px !important;
    padding: 24px 0px 24px 0px !important;
  }
  .upland-discipline-num,
  .upland-discipline-num .elementor-heading-title {
    font-size: 28px !important;
  }
  .upland-discipline-req,
  .upland-discipline-req .elementor-heading-title {
    text-align: left !important;
    margin: 0px 0px 0px 0px !important;
  }
}