/*
Theme Name: AgoraVista
Theme URI: https://agoravista.com/
Author: AgoraVista
Description: Custom theme for AgoraVista.com — clean, semantic, future-proof.
Version: 2026.01.03.v01
*/

/* 
For a full history of changes to this stylesheet and other theme components,
see the changelog located at: /wp-content/themes/blocksy-child/CHANGELOG.md
*/

/*
==============================================================
AgoraVista Theme Stylesheet
Organized by Section → Breakpoint → Specific Rules
==============================================================
*/


/*
==============================================================
GLOBAL BRAND VARIABLES
These variables define the brand link colors used across
About Us, Contact Us, and Footer link styling.
If the footer text color changes in the future, update
--brand-link and --brand-link-hover to match.
==============================================================
*/

/*
--------------------------------------------------------------
GLOBAL BRAND & DESIGN SYSTEM VARIABLES
Centralized variables for color, spacing, radius, and typography.
Update these values to propagate changes across the entire site.
--------------------------------------------------------------
*/

:root {
  /* Brand Colors */
  --brand-link: #0055a5;
  --brand-link-hover: #0056b3;

  /* Spacing Scale */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;

  /* Typography */
  --font-body: "Segoe UI", "Helvetica Neue", sans-serif;
  --font-heading: "Segoe UI", "Helvetica Neue", sans-serif;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.4rem;
  --font-size-xxl: 2rem;
}



/*
==============================================================
1. GLOBAL — BASE STYLES
==============================================================
*/


/*
==============================================================
1A. GLOBAL TYPOGRAPHY & HEADINGS
==============================================================
*/

body {
  font-family: var(--font-body);
}

.examples-card__title {
  font-family: var(--font-heading);
}

/*
--------------------------------------------------------------
GLOBAL — PAGE TITLE SPACING RATIONALE

To ensure consistent vertical rhythm across all top-level pages,
.page-title uses margin-top: var(--space-32) and margin-bottom: var(--space-24).

This spacing replaces any legacy per-page wrapper padding and ensures
alignment between header and content across all layouts.
--------------------------------------------------------------
*/

.page-title {
  font-size: 2rem;
  font-weight: 600;
  color: #0A1F44;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-32);
  margin-bottom: var(--space-24);
}


/*
==============================================================
1B. GLOBAL LAYOUT UTILITIES
==============================================================
*/

/*
--------------------------------------------------------------
GLOBAL PAGE-LEVEL SEPARATOR
Used for dividers between sections (not inside cards)
--------------------------------------------------------------
*/
.section-separator {
  margin: var(--layout-gap) 0;
  border: none;
  border-top: 2px solid #c4c4c4;
}




/*
 * RATIONALE
 * Establish a unified vertical and horizontal spacing rhythm across all
 * standard pages (Examples, Services Provided, About Us, Contact Us).
 * The --layout-gap variable defines the core spacing unit used for:
 *   - top-of-page → page title
 *   - page title → filter bar (when present)
 *   - filter bar → divider
 *   - divider → first row of cards
 *   - bottom row of cards → divider
 *   - bottom divider → footer
 *   - horizontal and vertical card grid gaps
 * This creates a consistent, maintainable layout system driven by a
 * single spacing token. The Home page is excluded because it uses a
 * distinct hero layout.
 */

/* ============================================
   GLOBAL SPACING VARIABLES
   ============================================ */
:root {
  --layout-container-width: 1290px;  /* unified container width */
  --layout-gap: 24px;  /* unified spacing token */
}

/* ============================================
   GLOBAL STANDARD PAGE SPACING
   Applies to all standard pages except Home
   ============================================ */
.page,
.page-template,
.page-id,
.page-about-us,
.page-contact-us,
.page-services-provided,
.examples-page {
  padding-top: var(--layout-gap);
}

/* Page title spacing (global) */
.page .page-title,
.examples-page .examples-page__title {
  margin-top: 0;
  margin-bottom: var(--layout-gap);
}

/* ============================================
   EXAMPLES PAGES — GLOBAL SPACING SYSTEM
   Applies to Client, Industry, and Project Examples
   ============================================ */
.examples-page {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
}

/* Filter bar spacing */
.examples-page .filter-bar {
  margin-bottom: var(--layout-gap);
}

/* Bottom spacing before footer */
.examples-page {
  padding-bottom: var(--layout-gap);
}



/*
==============================================================
2. HEADER — GLOBAL LAYOUT
==============================================================
*/

/* Header — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* Header — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* Header — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}



/*
==============================================================
3. NAVIGATION — GLOBAL LAYOUT
==============================================================
*/

/* Navigation — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* Navigation — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* Navigation — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}



/*
==============================================================
4. HOME PAGE — GLOBAL LAYOUT
==============================================================
*/

/* Home Page — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* Home Page — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* Home Page — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}





/*
==============================================================
EXAMPLES PAGES — CANONICAL CARD SYSTEM (FINAL CONSOLIDATED)
Defines the shared card architecture for Client, Industry,
and Project Examples. Page-specific overrides appear below
this block and must not be merged into the canonical layer.
==============================================================
*/

/*
--------------------------------------------------------------
CARD BASE
--------------------------------------------------------------
*/

.examples-card {
  background: #fff;
  border: var(--examples-card-border, 1px solid #ccc);
  border-radius: 6px;
  padding: var(--examples-card-padding, 16px);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

.examples-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/*
--------------------------------------------------------------
CARD HEADER — STRUCTURE
--------------------------------------------------------------
*/

.examples-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
}

/*
--------------------------------------------------------------
CARD HEADER — VISUAL WRAPPER
Centers or aligns the logo/image depending on page-level
overrides. Height is controlled by page-specific rules.
--------------------------------------------------------------
*/

.examples-card__visual-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

/*
--------------------------------------------------------------
CARD HEADER — VISUAL ELEMENT
--------------------------------------------------------------
*/

.examples-card__visual {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/*
--------------------------------------------------------------
CARD TITLE
--------------------------------------------------------------
*/

.examples-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/*
==============================================================
METADATA BLOCK — NORMALIZED SPACING
==============================================================
*/

.examples-card__meta {
  margin-top: var(--layout-gap);  /* 24px — aligns with divider rhythm */
}

.examples-card__meta-group {
  margin-bottom: var(--layout-gap);  /* 24px — consistent group spacing */
}

.examples-card__meta-label {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-8);  /* 8px — clearer label → list spacing */
}

/*
--------------------------------------------------------------
METADATA LIST RESET
--------------------------------------------------------------
*/

.examples-card__meta-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.examples-card__meta-item {
  margin-bottom: var(--space-4);  /* 4px — consistent item spacing */
  padding-left: 0;
}

/*
--------------------------------------------------------------
METADATA LIST — BULLETS FOR NON‑SERVICE GROUPS
--------------------------------------------------------------
*/

.examples-card__meta-group:not(.services) .examples-card__meta-list {
  list-style: disc;
  padding-left: 20px;
}

/*
==============================================================
SERVICES PROVIDED — ICONS + TEXT
==============================================================
*/

.examples-card__meta-item--service {
  display: flex;
  align-items: center;
  gap: 4px;
}

/*
--------------------------------------------------------------
SERVICE ICON
--------------------------------------------------------------
*/

.examples-card__service-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

/*
==============================================================
CTA LINK
==============================================================
*/

.examples-card__cta {
  display: inline-block;
  margin-top: 0.5rem;
  background: none;
  padding: 0;
  border: none;
  color: var(--brand-link);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.examples-card__cta:hover {
  color: var(--brand-link-hover);
  text-decoration: underline;  /* underline on hover only */
}

/*
==============================================================
CARD DIVIDER
==============================================================
*/

.examples-card .section-separator {
  margin: 1.25rem 0;
  border: none;
  border-top: 2px solid #c4c4c4;
}







/*
--------------------------------------------------------------
LAYOUT PARAMETERS
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
PAGE-LEVEL GRID CONFIGURATION
--------------------------------------------------------------
Each Examples page sets its own default card count using:

--examples-cards-per-row

Responsive overrides adjust this value at 1280px, 900px, and 600px.

These variables are consumed by the canonical grid:
.examples-page__content
--------------------------------------------------------------
*/

.page-template-page-client-examples {
  --examples-cards-per-row: 4;
}

.page-template-page-industry-examples {
  --examples-cards-per-row: 3;
}

.page-template-page-project-examples {
  --examples-cards-per-row: 3;
}


/* 
 * RATIONALE
 * Refine spacing and alignment inside expanded toggle sections
 * on Project Examples cards. This update corrects:
 *   1. Excess whitespace caused by default <p> margins.
 *   2. Too much space below “– Hide …” headings.
 *   3. Slightly loose spacing between list items.
 *   4. Wrapped lines aligning under icons instead of text.
 *
 * These rules apply ONLY to Project Examples toggle content.
 * No global typography or layout systems are affected.
 */

/*
--------------------------------------------------------------
1. Remove browser-default <p> margins inside toggles
--------------------------------------------------------------
*/
.example-card__collapsible p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.45;
}

/*
--------------------------------------------------------------
2. Tighten spacing around toggle headings
--------------------------------------------------------------
*/
.example-card__toggle {
  margin-top: var(--space-12);  /* was 8px */
  margin-bottom: var(--space-4);  /* was 8px */
  display: inline-block;
}

/*
--------------------------------------------------------------
3. Tighten spacing around collapsible container
--------------------------------------------------------------
*/
.example-card__collapsible {
  margin-top: var(--space-0);  /* was 8px */
  margin-bottom: var(--space-12);  /* was 16px */
}

/*
--------------------------------------------------------------
4. Convert lists to proper bullets + align text
--------------------------------------------------------------
*/
.example-card__collapsible-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

/*
--------------------------------------------------------------
5. Slightly reduce spacing between list items
--------------------------------------------------------------
*/
.example-card__collapsible-item {
  margin-bottom: var(--space-0);  /* was 8px */
}

/*
--------------------------------------------------------------
6. Align wrapped lines under text, not icons
--------------------------------------------------------------
*/
.example-card__collapsible-item a {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;  /* was 8px */
  line-height: 1.35;
}

.example-card__collapsible-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* 
 * RATIONALE
 * Ensure toggle text on Project Examples cards uses the same
 * font family, weight, and size as the canonical CTA link
 * (“View Project Examples”) used on Client and Industry pages.
 *
 * This corrects:
 *   1. Toggle text rendering in Arial Bold (fallback).
 *   2. Inconsistent font weight and visual hierarchy.
 *   3. Mismatch between toggle text and CTA link styling.
 *
 * Applies ONLY to .example-card__toggle.
 */

/*
--------------------------------------------------------------
7. Match toggle font to canonical CTA link font
--------------------------------------------------------------
*/
.example-card__toggle {
  font-family: var(--font-heading);  /* Segoe UI */
  font-weight: 600;  /* matches CTA semibold */
  font-size: 0.95rem;  /* matches CTA size */
  letter-spacing: 0;  /* CTA uses no extra spacing */
  color: var(--brand-link);  /* consistent link color */
  background: none;  /* ensure no UA button styling */
  border: none;  /* remove UA button border */
  padding: 0;  /* remove UA button padding */
  cursor: pointer;  /* preserve interactive affordance */
}

.example-card__toggle:hover {
  color: var(--brand-link-hover);
  text-decoration: underline;  /* matches CTA hover behavior */
}


/*
--------------------------------------------------------------
MEDIA RESOURCES — PROJECT EXAMPLES CARDS
--------------------------------------------------------------
*/

.media-resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.media-resource-item {
  margin-bottom: 0.75rem;
}

.media-video-embed {
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 */
  height: 0;
  overflow: hidden;
}

.media-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*
==============================================================
8. SERVICES PROVIDED — GLOBAL LAYOUT
==============================================================
*/

/* Services Provided — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* Services Provided — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* Services Provided — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}

/*
--------------------------------------------------------------
GLOBAL WRAPPER
--------------------------------------------------------------
*/

.page-services-provided {
  padding-top: 0;
  padding-bottom: 40px;
}

/*
--------------------------------------------------------------
PAGE HEADER
--------------------------------------------------------------*/


.page-services-provided__header {
  text-align: left;
  margin-bottom: 40px;
}

.page-services-provided__header .page-intro {
  font-size: 1rem;
  color: #555;
}

/*
--------------------------------------------------------------
SERVICES LIST
--------------------------------------------------------------*/


.services-provided__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/*
--------------------------------------------------------------
SERVICE CARD
--------------------------------------------------------------
*/

.service-card {
  position: relative;  /* enables absolute positioning inside */
  width: 66%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 24px 24px 20px 24px;  /* extra bottom padding for toggle */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.service-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/*
--------------------------------------------------------------
CARD HEADER
--------------------------------------------------------------*/


/* Service Card:  bounding box */
   .service-card__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

/* Service Card:  Icon */
.service-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-top: 30px;  /* Adjust so that card's icon and title are vertically aligned as desired */
}

/* Service Card:  Title */
.service-card__title {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Service Card:  "More Info" toggle link */
.service-card__toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  margin-top: 0;
  font-size: 1.2rem;
  background: none;
  border: none;
  color: #0055a5;
  cursor: pointer;
  font-weight: 600;
}

.service-card__toggle:hover {
  text-decoration: underline;
}

/*
--------------------------------------------------------------
CARD DETAILS (EXPANDABLE)
--------------------------------------------------------------
*/

.service-card__details {
  display: none;
  margin-top: 12px;
}

.service-card__details.open {
  display: block;
}

/* Service Card:  Text displayed when "More Info" is clicked */
.service-card__details p {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* Service Card:  Text displayed -- if in bulleted list -- when "More Info" is clicked */
.service-card__details ul {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 16px;
  padding-left: 20px;
}

/*
--------------------------------------------------------------
CTA BUTTON
--------------------------------------------------------------
*/

.service-card__cta {
  margin-top: 12px;
}

.cta-button {
  display: inline-block;
  padding: 8px 16px;
  font-size: 1rem;
  background-color: #0A1F44;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-weight: 500;
}

.cta-button:hover {
  background-color: #003f7d;
}

/*
--------------------------------------------------------------
RESPONSIVE BREAKPOINTS
--------------------------------------------------------------
*/

@media (max-width: 900px) {
  .service-card {
    width: 90%;
  }
}

@media (max-width: 600px) {
  .service-card {
    width: 100%;
    padding: 20px;
  }

  .service-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-card__toggle {
    margin-left: 0;
    margin-top: 8px;
  }
}



/*
==============================================================
9. ABOUT US — GLOBAL LAYOUT
==============================================================
*/

/* About Us — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* About Us — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* About Us — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}

/*
--------------------------------------------------------------
ABOUT US PAGE
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
ABOUT US — ARCHITECTURE NOTE

The About Us and Contact Us pages share a parallel layout structure:
a wrapper that controls page-level spacing and an inner element
(grid or card) that controls content layout.

This symmetry is intentional and should be preserved during
future refactors.
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
ABOUT US — WRAPPER RATIONALE

This wrapper provides consistent top and bottom spacing for the
About Us section. It mirrors the structure used on the Contact Us
page, where the wrapper controls page-level spacing and the card/grid
handles internal layout.

Keeping spacing responsibilities at the wrapper level prevents
card-level margins from stacking unpredictably and simplifies
future refactors.
--------------------------------------------------------------
*/

.page-about-us-card-wrapper {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-64);
}

.page-about-us-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-top: 32px;
}

/*
--------------------------------------------------------------
ABOUT US — CARD SPACING NOTE

This card intentionally does not define bottom margin. Vertical spacing
between cards is handled by the grid gap, and spacing above the footer
is handled by the wrapper (.page-about-us-card-wrapper).

This separation of concerns keeps layout predictable and consistent
with the Contact Us page structure.
--------------------------------------------------------------
*/

.page-about-us-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 24px;
  width: 300px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.page-about-us-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.page-about-us-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 16px;
}

.page-about-us-card__name {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.page-about-us-card__role {
  font-size: 1rem;
  margin-bottom: 16px;
  color: #333;
}

.page-about-us-card__bio {
  font-size: 1rem;
  margin-bottom: 16px;
  line-height: 1.4;
}

.page-about-us-card__contact-info p {
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.page-about-us-card__contact-info i {
  margin-right: 8px;
  color: #0A1F44;
}

/*
--------------------------------------------------------------
ABOUT US — LINK STYLING
--------------------------------------------------------------
*/

.page-about-us-card__contact-item a {
  color: var(--brand-link);
  text-decoration: none;
}

.page-about-us-card__contact-item a:hover {
  color: var(--brand-link-hover);
  text-decoration: underline;
}



/*
==============================================================
10. CONTACT US — GLOBAL LAYOUT
==============================================================
*/

/* Contact Us — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* Contact Us — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* Contact Us — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}

/*
--------------------------------------------------------------
CONTACT US PAGE
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
CONTACT US — ARCHITECTURE NOTE

This section mirrors the About Us layout structure to maintain
consistent spacing, rhythm, and maintainability across pages.
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
CONTACT US — WRAPPER RATIONALE

This wrapper controls page-level spacing for the Contact Us layout.
Padding-bottom matches the About Us wrapper to ensure consistent
spacing above the footer across both pages.

The card inside (.page-contact-us-card) handles internal layout
and centering only.
--------------------------------------------------------------
*/

.page-contact-us-card-wrapper {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-0);
}

/*
--------------------------------------------------------------
CONTACT US — CARD SPACING NOTE

To match the vertical spacing above the footer on the About Us page,
we apply bottom margin of var(--space-64) to .page-contact-us-card.

This mirrors the combined effect of:
- .page-about-us-card margin-bottom: var(--space-32)
- .page-about-us-card-wrapper padding-bottom: var(--space-64)

Without this margin, the Contact Us card floats higher due to flex
layout. This fix ensures consistent visual rhythm across both pages.
--------------------------------------------------------------
*/

.page-contact-us-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--radius-6);
  padding: var(--space-16);
  width: 280px;
  margin: var(--space-32) auto var(--space-64);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  /* Optional but recommended for visual balance */
  display: flex;
  flex-direction: column;
  }

.page-contact-us-link {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1.4;  /* controls spacing within each line */
  margin-bottom: 12px;  /* controls spacing between lines */
}

.page-contact-us-card__content {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.page-contact-us-link__icon {
  margin-right: 12px;
  color: #0A1F44;
  font-size: 1.2rem;
}

.page-contact-us-link__text {
  color: var(--brand-link);
  text-decoration: none;
}

.page-contact-us-link__text:hover {
  color: var(--brand-link-hover);
  text-decoration: underline;
}



/*
==============================================================
11. FOOTER — GLOBAL LAYOUT
==============================================================
*/

/* Footer — Desktop Layout (min-width: 901px) */
@media (min-width: 901px) {}

/* Footer — Tablet Layout (max-width: 900px) */
@media (max-width: 900px) {}

/* Footer — Mobile Layout (max-width: 600px) */
@media (max-width: 600px) {}

/* ------------------------------------------
   FOOTER — LINK STYLING
   ------------------------------------------ */

.site-footer a {
  text-decoration: none;
  color: inherit;
}

.site-footer a:hover {
  text-decoration: underline;
  color: var(--brand-link-hover);
}



/*
==============================================================
12. OVERRIDES & UTILITY CLASSES
==============================================================
*/

/*
==============================================================
PROJECT EXAMPLES — CONTEXTUAL HEADER (CLIENT & INDUSTRY)
Right‑aligned contextual header placed between page title
and filter bar. Supports 1‑line (Industry) and 2‑line (Client)
variants without wasted vertical space.
==============================================================
*/

/*
==============================================================
PROJECT EXAMPLES — CONTEXTUAL HEADER (INLINE WITH PAGE TITLE)
==============================================================
*/

.examples-page__header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;  /* FIX: prevents baseline height jump */
}

.project-context-header {
  text-align: right;
  line-height: 1.0;    /* FIX: reduces height to match <h1> */
  margin-bottom: var(--layout-gap);  /* Spacing only when contextual header exists */
}

.context-line1 {
  font-weight: 600;
  margin-bottom: 4px;
}

.context-return-link {
  font-size: 0.95rem;
  color: var(--brand-link);
  text-decoration: none;
}

.context-return-link:hover {
  color: var(--brand-link-hover);
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {
  .examples-page__header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .project-context-header {
    text-align: left;
  }
}

/*
============================================================
GLOBAL ELEMENTS & BASE UTILITIES
============================================================
*/

/* About Us Grid Layout */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.about-card {
  text-align: center;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.about-card img {
  width: 100%;
  max-width: 250px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(100%);
  border-radius: 6px;
  margin: 0 auto 1rem;
}

.about-card h3 {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.about-card .role {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.5rem;
}

.about-card .bio {
  font-size: 0.95rem;
  color: #666;
  margin-top: 0.5rem;
}

.contact-info p {
  margin: 0.25rem 0;
}

.about-card i {
  margin-right: 0.5rem;
  color: #0055a5;
}

.about-card a {
  color: #0055a5;
  text-decoration: none;
}

.about-card a:hover {
  text-decoration: underline;
}

/*
==============================================================
GLOBAL — HEADER & NAVIGATION (CUSTOM THEME)
==============================================================
*/

/* Header wrapper */
.site-header {
  background-color: #f8f8f8;
  padding: 0.05rem 0;  /* reduced vertical padding */
  border-bottom: 1px solid #ddd;
}

/* Container */
.container {
  max-width: var(--layout-container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header layout */
.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

/* Branding block (logo + tagline) */
.site-header__branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__logo img {
  display: block;
  max-height: 70px;
  width: auto;
}

.site-header__tagline {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 25px;
  font-weight: 500;
  color: #3A4F66;
  letter-spacing: 0;
  line-height: 1.2;
}

/* Navigation container */
.main-nav {
  display: flex;
  align-items: center;
}

/* Top-level menu */
.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.nav-menu li {
  margin: 0;
  position: relative;
}

.nav-menu a {
  padding: 0.4rem 0;  /* tighter vertical spacing */
  display: inline-block;
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: #2872fa;
}

.nav-menu .current-menu-item>a {
  color: #2872fa;
  border-bottom: 2px solid #2872fa;
}

/* Dropdown arrow */
.nav-menu .menu-item-has-children>a::after {
  content: " ▼";
  font-size: 0.8em;
  margin-left: 4px;
  color: inherit;
}

/* Dropdown menu */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  list-style: none;
  padding: 0.5rem 0;
  display: none;
  z-index: 1000;

  background-color: #192a3d;
  border: none;
}

.nav-menu li:hover>.sub-menu {
  display: block;
}

.nav-menu .sub-menu a {
  padding: 0.5rem 1rem;
  display: block;
  color: #e6b800;
  font-weight: 500;
  text-transform: none;
}

.nav-menu .sub-menu a:hover {
  background-color: #1559ed;
  color: #ffffff;
}

/*
==============================================================
CONTACT US PAGE BLOCKS
==============================================================
*/

.contact-section {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.contact-section h2 {
  margin-bottom: 1.5rem;
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 1.5rem;
  line-height: 3rem;
  color: #0055a5;
  text-decoration: none;
  margin: 1.25rem 0;
}

.contact-link i {
  font-size: 2rem;
  color: #0055a5;
  margin-top: 0.1rem;
}

.contact-link a {
  padding: 0.25rem 0;
  display: inline-block;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-link a:hover {
  color: #003f7f;
}

@media (max-width: 768px) {
  .contact-link {
    font-size: 1rem;
  }

  .contact-link i {
    font-size: 1.1rem;
  }
}

/*
==============================================================
CLIENT & PROJECT LOGO SIZING
==============================================================
*/

.client-logo-img {
  max-width: 200px;
  max-height: 150px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.logo-wide {
  max-width: 200px;
  max-height: 120px;
}

.logo-tall {
  max-width: 150px;
  max-height: 150px;
}

/*
==============================================================
FOOTER STYLING
==============================================================
*/

.custom-footer {
  margin-top: 0;
  padding-top: 0;
}

.footer-powered {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  margin: 0.5rem 0 1.25rem 0;
  background: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.footer-powered img.tsem-logo {
  height: 22px;
  width: auto;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.footer-bar {
  background: #f2f2f2;
  padding: 0.5rem 1rem;  /* reduced vertical padding */
  font-size: 0.95rem;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.footer-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
  text-align: left;
}

.footer-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.footer-right {
  text-align: right;
}

.footer-bar a {
  color: #0055a5;
  text-decoration: none;
  padding: 0.2rem 0;
  display: inline-block;
}

.footer-bar a:hover {
  color: #003f7f;
  text-decoration: underline;
}

.footer-separator {
  margin: 0 0.65rem;
  color: #333;
}

@media (max-width: 768px) {
  .footer-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    text-align: center;
    flex: unset;
  }
}

@media (max-width: 860px) {
  .footer-bar-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: static;
    width: 100%;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
    flex: unset;
  }

  .footer-center {
    transform: none;
    left: auto;
    white-space: normal;
    position: static;
  }

  .footer-right {
    margin-bottom: 0;
  }

  .footer-bar a {
    margin: 0;
    padding: 0;
  }

  .footer-right a {
    display: block;
  }

  .footer-separator {
    display: none;
  }

  .footer-bar {
    padding-bottom: 0.25rem;
  }
}

/*
==============================================================
HOME PAGE — TOP BANNER
Wrapper for the top banner image at the top of the homepage
==============================================================
*/

.page-home-top-banner {
  margin-bottom: 0.25rem;
}

.page-home-top-banner img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 32px;  /* restores spacing below banner image */
}

/*
==============================================================
HOME PAGE — PAGE HEADER (Two-Line Title)
Includes:
- page-home-header
- page-home-header-title-1
- page-home-header-title-2
==============================================================
*/

.page-home-header {
  text-align: center;
  margin-bottom: 12px;
}

.page-home-header-title-1 {
  font-family: "Segoe UI";
  font-weight: 700;
  font-style: normal;
  font-size: 42px;
  line-height: 70px;
  color: #3A4F66;
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0.2rem;
}

.title-1-brand {
  font-style: italic;
}

.page-home-header-title-2 {
  font-family: "Segoe UI";
  font-weight: 700;
  font-style: normal;
  font-size: 36px;
  line-height: 60px;
  color: #3A4F66;
  display: block;
  margin-top: 0.1rem;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

/*
==============================================================
HOME PAGE — SEPARATORS
==============================================================
*/

.page-home-separator {
  border-top: 3px solid #0A1F44 !important;
  opacity: 1 !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

/*
==============================================================
HOME PAGE — CAROUSEL SECTION
Wrapper for the Carousel Slider v2 block
==============================================================
*/

.page-home-carousel {
  margin-top: 24px;
  margin-bottom: 40px;
}

.page-home-carousel .carousel-divider {
  margin-top: 24px;
  margin-bottom: 24px;
}

/*
==============================================================
HOME PAGE — CAROUSEL (Semantic Architecture) 
==============================================================
*/

.page-home-carousel-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  max-width: 1290px;
  margin: 0 auto;
  position: relative;
}

.page-home-carousel-section {
  width: 100%;
  margin: 20px auto;
}

.page-home-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;  /* narrower wrapper for arrow placement */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
}

.page-home-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.5, 1);
  will-change: transform;
}

.page-home-carousel-slide {
  flex: 0 0 100%;
  height: auto;
  position: relative;
}

.page-home-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.page-home-carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 2rem;
  border-radius: 4px;
  z-index: 10;
  transition: background 0.2s ease;
}

.page-home-carousel-button:hover {
  background: rgba(0, 0, 0, 0.4);
}

.page-home-carousel-button--prev {
  left: 0;
}

.page-home-carousel-button--next {
  right: 0;
}

.page-home-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.page-home-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s ease;
}

.page-home-carousel-dot.active {
  background: #0A1F44;
  /* your brand color */
}

@media (max-width: 900px) {
  .page-home-carousel-button {
    font-size: 1.5rem;
    padding: 8px 12px;
  }
}

@media (max-width: 600px) {
  .page-home-carousel-button {
    font-size: 1.2rem;
    padding: 6px 10px;
  }
}

/*
==============================================================
HOME PAGE — CAROUSEL IMAGE SIZING
==============================================================
*/

.page-home-carousel-slide-content {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1290px;
  margin: 0 auto;
}

.page-home-carousel-slide-left {
  flex: 0 0 200px;
}

.page-home-carousel-slide-left img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.page-home-carousel-slide-right {
  flex: 1 1 0;
}

.page-home-carousel-title,
.page-home-carousel-text {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.page-home-carousel-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #0A1F44;
}

.page-home-carousel-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

/*
--------------------------------------------------------------
Carousel stacking for mobile (max-width: 600px)
--------------------------------------------------------------
*/

@media (max-width: 600px) {
  .page-home-carousel-slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .page-home-carousel-slide-left,
  .page-home-carousel-slide-right {
    width: 100%;
  }

  .page-home-carousel-slide-left img {
    width: 100%;
    height: auto;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/*
==============================================================
HOME PAGE — HIGHLIGHT BOXES (Semantic Architecture)
==============================================================
*/

/* Wrapper for the 3 highlight boxes */
.page-home-highlight-boxes {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 1290px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

/* For each highlight box */
.page-home-highlight-box {
  flex: 1 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;  /* This sets the vertical spacing between all direct children (icon, label, value) */
  margin-bottom: 0;
  background-color: var(--palette-color-5, #e1e8ed);
  border: 2px solid var(--palette-color-5, #e1e8ed);
  border-radius: 12px;
  padding: 12px 16px 6px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

/* For icon in each highlight box */
.page-home-highlight-box-icon img {
  width: 48px;
  height: 48px;
  display: block;
  margin-bottom: 6px;  /* This sets vertical spacing between the icon and the label */
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(500%) hue-rotate(190deg);
}

/* For label (e.g., "Since") in each highlight box */
.page-home-highlight-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 2px 0;
  color: #0A1F44;
}

/* For value (e.g., "1995") in each highlight box */
.page-home-highlight-value {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  color: #0A1F44;
}

/* For hover effect for each highlight box */
.page-home-highlight-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/*
--------------------------------------------------------------
Tablet / Small Desktop (max-width: 1024px)
--------------------------------------------------------------
*/

@media (max-width: 1024px) {
  .page-home-highlight-boxes {
    gap: 24px;
  }

  .page-home-highlight-box {
    min-width: 280px;
  }
}

/*
--------------------------------------------------------------
Mobile (max-width: 600px)
--------------------------------------------------------------
*/

@media (max-width: 600px) {
  .page-home-highlight-label {
    font-size: 0.9rem !important;
  }

  .page-home-highlight-value {
    font-size: 1.35rem !important;
  }
}

/*
--------------------------------------------------------------
Mobile Narrowest (max-width: 320px)
--------------------------------------------------------------*/


@media (max-width: 320px) {
  .page-home-highlight-box {
    min-width: auto !important;
    max-width: 288px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Shared wrapper for highlight boxes and separators */
.shared-home-section-wrapper {
  max-width: 1290px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .page-home-header-title-2 {
    font-size: 2.2rem;
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 600px) {
  .page-home-header-title-2 {
    font-size: 1.8rem;
  }
}

/*
==============================================================
HOME PAGE — THREE-COLUMN SECTION (Semantic Architecture)
==============================================================
*/

.page-home-three-column-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 1290px;
  width: 100%;
  margin: 5px auto 5px auto;  /* top spacing + bottom spacing */
}

/* Left and right columns share available space */
.page-home-left-column,
.page-home-right-column {
  flex: 1 1 0;
}

/* Middle spacer column: fixed width */
.page-home-middle-column-spacer {
  flex: 0 0 32px;
}

/* Bullet rows */
.page-home-bullet-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

/* Bullet icons */
.page-home-bullet-icon svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: #0A1F44;  /* matches highlight box blue */
}

/* Bullet text */
.page-home-bullet-text {
  margin: 0;
  color: #0A1F44;
}

/* Headings inside columns */
.page-home-left-heading,
.page-home-bullet-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
  color: #0A1F44;
}

/*
--------------------------------------------------------------
   Home Page — Desktop Layout (min-width: 901px)
--------------------------------------------------------------
*/

@media (min-width: 901px) {

/* Add breathing room between left and right columns */
  .page-home-left-column {
    padding-right: 24px;
  }

  .page-home-right-column {
    padding-left: 24px;
  }

/* Larger spacing for large-font paragraphs */
  .page-home-three-column-section p {
    margin-bottom: 10px;
  }
}

/*
--------------------------------------------------------------
Footer — Desktop Layout (min-width: 901px) 
Rebalance column widths to prevent wrapping 
--------------------------------------------------------------
*/

@media (min-width: 901px) {
  .footer-left {
    flex: 0.6;
    text-align: left;
  }

  .footer-center {
    flex: 0.4;
    text-align: center;
  }

  .footer-right {
    flex: 1.2;
    text-align: right;
  }
}

/*
--------------------------------------------------------------
Tablet (max-width: 900px)
--------------------------------------------------------------
*/

@media (max-width: 900px) {

/* Typography scaling */
  .page-home-three-column-section p {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  .page-home-bullet-text {
    font-size: 1rem;
  }

  .page-home-bullet-icon img {
    width: 28px;
    height: 28px;
  }
}

/*
--------------------------------------------------------------
Mobile (max-width: 600px)
--------------------------------------------------------------
*/

@media (max-width: 600px) {
  
  /* Bullet icons */
  .page-home-bullet-icon img {
    width: 26px;
    height: 26px;
  }

  /* Bullet text */
  .page-home-bullet-text {
    font-size: 0.95rem;
  }
}

/*
==============================================================
HOME PAGE — THREE COLUMN SECTION (New Semantic Naming)
==============================================================
*/

.page-home-three-column-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 1290px;
  width: 100%;
  margin: 0 auto 0 auto;;
}

/* Column widths */
.page-home-three-column-left,
.page-home-three-column-right {
  flex: 1 1 0;
}

.page-home-three-column-center {
  flex: 0 0 32px;  /* spacer */
}

/*
--------------------------------------------------------------
Typography — Headings
--------------------------------------------------------------
*/

.page-home-three-column-left-heading,
.page-home-three-column-right-heading {
  font-family: "Segoe UI";
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
  color: #0A1F44;
}

.page-home-three-column-right-heading {
  margin-bottom: 28px;
}

/*
--------------------------------------------------------------
Typography — Paragraphs
--------------------------------------------------------------
*/

.page-home-three-column-left-paragraph {
  font-family: "Segoe UI";
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 18px;
  color: #0A1F44;
}

/*
--------------------------------------------------------------
Bullet List Structure
--------------------------------------------------------------
*/

.page-home-three-column-right-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-home-three-column-bullet-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.page-home-three-column-bullet-icon svg,
.page-home-three-column-bullet-icon img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: #0A1F44;
}

.page-home-three-column-bullet-text {
  margin: 0;
  font-family: "Segoe UI";
  font-size: 1.3rem;
  line-height: 1.3;
  color: #0A1F44;
}

/*
--------------------------------------------------------------
Responsive — Tablet
--------------------------------------------------------------
*/

@media (max-width: 900px) {

  .page-home-three-column-wrapper {
    flex-direction: column;
    gap: 24px;
  }

  .page-home-three-column-center {
    display: none;
/* spacer not needed */
  }

  .page-home-three-column-left-paragraph,
  .page-home-three-column-bullet-text {
    font-size: 1rem;
    line-height: 1.45;
  }

  .page-home-three-column-bullet-icon img {
    width: 28px;
    height: 28px;
  }
}

/*
--------------------------------------------------------------
Responsive — Mobile
--------------------------------------------------------------
*/

@media (max-width: 600px) {

  .page-home-three-column-bullet-icon img {
    width: 26px;
    height: 26px;
  }

  .page-home-three-column-bullet-text {
    font-size: 0.95rem;
  }
}

/*
==============================================================
HOME PAGE — BOTTOM BANNER
Wrapper for the bottom banner image
==============================================================
*/

.page-home-bottom-banner {
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-home-bottom-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/*
==============================================================
HOME PAGE — BULLET SYSTEM (SVG-BASED)
Clean, semantic layout for rebuilt column-3
==============================================================
*/

/* Column 3 heading */
.page-home-bullet-column>p:first-of-type {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
}

/* Bullet row: icon + text horizontally */
.page-home-bullet-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

/* Vertical spacing between bullet rows */
.page-home-bullet-row+.page-home-bullet-row {
  margin-top: 6px;  /* tighter spacing between rows */
}

.page-home-bullet-icon img {
  width: 22px;
  height: 22px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin-top: 2px;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(500%) hue-rotate(190deg);
}

/* Remove empty paragraphs Gutenberg inserts inside bullet rows */
.page-home-bullet-row p:empty {
  display: none !important;
}

/*
==============================================================
HOME PAGE — TYPOGRAPHY NORMALIZATION
Ensures consistent text rhythm across the homepage
==============================================================
*/

/* Left column headline */
.page-home-left-column p:first-of-type {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.2rem;
}

.page-home-left-column p,
.page-home-right-column p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #333;
}

/* Right column bullet text already defined above */


/*
==============================================================
HOME PAGE — SPACING NORMALIZATION
Vertical rhythm between major homepage sections
==============================================================
*/

.page-home-header {
  margin-bottom: 12px;
}

.page-home-carousel {
  margin-bottom: 40px;
}

.page-home-three-column-section {
  margin-top: 5px;
  margin-bottom: 5px;
}

.page-home-bottom-banner {
  margin-top: 20px;
  margin-bottom: 20px;
}

/*
==============================================================
COLUMN-1 TYPOGRAPHY
==============================================================
*/

.page-home-left-column p:first-of-type {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.2rem !important;
}

.page-home-left-column p:not(:first-of-type) {
  font-size: 1.3rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1.2rem !important;
}

/*
==============================================================
THREE-COLUMN SECTION SPACING
==============================================================
*/

.page-home-three-column-section {
  padding-bottom: 2px !important;
}

/*
==============================================================
BOTTOM BANNER
==============================================================
*/

.page-home-bottom-banner {
  margin-top: 20px;
  margin-bottom: 20px;}

.page-home-bottom-banner img {
  aspect-ratio: 7 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/*
==============================================================
TOP BANNER
==============================================================
*/

.page-home-top-banner {
  margin-top: 24px;
  margin-bottom: 0.25rem !important;
}

.page-home-top-banner img {
  aspect-ratio: 7 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/*
==============================================================
HOME PAGE — BULLET TYPOGRAPHY & SPACING FINAL OVERRIDE
==============================================================
*/

/* Bullet text */
.page-home-bullet-text {
  font-size: 1.2rem !important;
  line-height: 1.28 !important;
  margin: 0 !important;
}

/* Kill paragraph spacing inside bullet rows */
.page-home-bullet-row p {
  margin-bottom: 0 !important;
}

/* Remove block-gap inside each bullet row */
.page-home-bullet-row {
  gap: 12px !important;  /* icon + text spacing */
  row-gap: 0 !important;  /* remove Gutenberg vertical block gap */
}

/* Apply/control spacing between rows */
.page-home-bullet-row+.page-home-bullet-row {
  margin-top: 8px !important;  /* vertical spacing between bullets -- adjust to preference */
}

/* Disable Gutenberg block gap on bullet wrapper Group (correct selector) */
.page-home-bullet-column .wp-block-group.is-layout-stack {
  gap: 0 !important;
  row-gap: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/*
==============================================================
STARTED APPENDING THE FOLLOWING ON THE EVENING OF
FEBRUARY 3, 2026
==============================================================
*/




/*
==============================================================
TOGGLE BLOCKS — INTERACTION & VISUAL STYLING
Unified styling for collapsible sections on Project cards.
Includes toggle button, collapsed/expanded states, and
content container transitions.
==============================================================
*/

/*
--------------------------------------------------------------
TOGGLE BLOCK WRAPPER
--------------------------------------------------------------
*/
.example-card__toggle-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/*
--------------------------------------------------------------
TOGGLE BUTTON
--------------------------------------------------------------
*/
.example-card__toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #005bbb;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}

.example-card__toggle:hover {
  text-decoration: underline;
}

/*
--------------------------------------------------------------
COLLAPSIBLE CONTAINER
--------------------------------------------------------------
*/
.example-card__collapsible {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
  max-height: 0;
  opacity: 0;
}

/* Expanded state */
.example-card__collapsible.is-open {
  max-height: 500px;
  /* Safe upper bound for smooth animation */
  opacity: 1;
}

/* Hidden state (JS toggles this class) */
.example-card__collapsible.is-hidden {
  max-height: 0;
  opacity: 0;
}

/*
--------------------------------------------------------------
COLLAPSIBLE CONTENT
--------------------------------------------------------------
*/
.example-card__collapsible-content,
.example-card__collapsible-list {
  padding-left: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.example-card__collapsible-item a {
  font-size: 0.95rem;
  color: #333;
  text-decoration: none;
}

.example-card__collapsible-item a:hover {
  text-decoration: underline;
}


/*
==============================================================
EXAMPLES PAGE — LAYOUT, GRID, FILTERS, AND UTILITIES
Unified styling for the overall Examples page structure.
Applies to Client, Industry, and Project Examples pages.
==============================================================
*/

/*
--------------------------------------------------------------
PAGE TITLE
--------------------------------------------------------------
*/
.examples-page__title {
  font-size: 2rem;
  font-weight: 600;
  color: #0A1F44;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  margin-top: 24px;
  margin-bottom: var(--layout-gap);
} 

/*
--------------------------------------------------------------
PAGE DIVIDERS
--------------------------------------------------------------
*/
.examples-page__divider {
  border: none;
  border-top: 2px solid #e0e0e0;
  margin: 0.5rem 0 1rem;
}

/*
--------------------------------------------------------------
CARD GRID (CANONICAL + PARAMETERIZED)
--------------------------------------------------------------
*/
.examples-page__content {
  display: grid;
  gap: var(--layout-gap);
  grid-template-columns: repeat(var(--examples-cards-per-row), minmax(0, 1fr));
  padding: 0;
}

/* 
 * RATIONALE
 * Correct grid wrapping and card-width issues on the Client Examples page.
 *
 * The previous grid allowed 4 cards per row down to 900px, which caused:
 *   1. Logo overflow at 1024px and 991px.
 *   2. Unpredictable wrapping between 1024px–900px.
 *   3. Occasional horizontal scrollbars.
 *
 * This update applies ONLY to the Client Examples page and adjusts the
 * --examples-cards-per-row variable at key breakpoints to ensure:
 *   • Predictable wrapping
 *   • No logo overflow
 *   • Stable card widths
 *   • Clean grid behavior across all devices
 *
 * No global grid rules are modified.
 * No Industry or Project Examples grids are affected.
 */

/*
--------------------------------------------------------------
CLIENT EXAMPLES — GRID OVERRIDES (TASK 5.07)
--------------------------------------------------------------
*/

/* ≥ 1280px — desktop and large screens */
.page-template-page-client-examples {
  --examples-cards-per-row: 4;
}

/* ≤ 1279px — reduce to 3 columns to prevent logo overflow */
@media (max-width: 1279px) {
  .page-template-page-client-examples {
    --examples-cards-per-row: 3;
  }
}

/* ≤ 1023px — maintain 3 columns for stable wrapping */
@media (max-width: 1023px) {
  .page-template-page-client-examples {
    --examples-cards-per-row: 3;
  }
}

/* ≤ 899px — reduce to 2 columns for tablet widths */
@media (max-width: 899px) {
  .page-template-page-client-examples {
    --examples-cards-per-row: 2;
  }
}

/* ≤ 767px — maintain 2 columns for large mobile */
@media (max-width: 767px) {
  .page-template-page-client-examples {
    --examples-cards-per-row: 2;
  }
}

/* ≤ 599px — single-column layout for small mobile */
@media (max-width: 599px) {
  .page-template-page-client-examples {
    --examples-cards-per-row: 1;
  }
}

/* ------------------------------
   INDUSTRY EXAMPLES
   ------------------------------ */
.page-template-page-industry-examples {
  --examples-cards-per-row: 3;
}

@media (max-width: 900px) {
  .page-template-page-industry-examples {
    --examples-cards-per-row: 2;
  }
}

@media (max-width: 600px) {
  .page-template-page-industry-examples {
    --examples-cards-per-row: 1;
  }
}

/* ------------------------------
   PROJECT EXAMPLES
   ------------------------------ */
.page-template-page-project-examples {
  --examples-cards-per-row: 3;
}

@media (max-width: 900px) {
  .page-template-page-project-examples {
    --examples-cards-per-row: 2;
  }
}

@media (max-width: 600px) {
  .page-template-page-project-examples {
    --examples-cards-per-row: 1;
  }
}

/*
--------------------------------------------------------------
EMPTY STATE
--------------------------------------------------------------
*/
.examples-page__empty {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  padding: 2rem 0;
}

.examples-empty-message {
  text-align: center;
  font-style: italic;
  color: #666;
  padding: 16px 0;  /* 16px above and below */
  font-size: 1rem;
  margin: 0;
}

/*
--------------------------------------------------------------
BACK TO TOP BUTTON
--------------------------------------------------------------
*/
.examples-page__back-to-top {
  background: #005bbb;
  color: #fff;
  border: none;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  border-radius: 4px;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
}

.examples-page__back-to-top:hover {
  background: #004999;
}

/*
--------------------------------------------------------------
   COLLAPSIBLE ICON SIZING (Media Resources & External Links)
--------------------------------------------------------------
*/
.example-card__collapsible-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}



/* ============================================================
   PHASE 3 — FILTER BAR (S‑3)
   Unified styling for Client, Industry, and Project Examples
   ============================================================ */

/* ------------------------------
   FILTER BAR WRAPPER
   ------------------------------ */
.filter-bar {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 1.25fr 0.4fr;
  gap: 2rem;
  margin-top: 0;
  margin-bottom: var(--layout-gap);
  padding-bottom: 0;
}

/* ------------------------------
   FILTER GROUP
   ------------------------------ */
.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.filter-group__label {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
}

/* Right-align Clear Filters button within its column */
.filter-group--clear {
  width: 100%;
  display: flex;
  flex-direction: column;  /* ensure vertical stacking */
  justify-content: flex-start;  /* top-align vertically */
  align-items: flex-end;  /* right-align horizontally */
}

/* ------------------------------
   PILL CONTAINER
   ------------------------------ */
.filter-group__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ------------------------------
   PILL BUTTONS (INACTIVE)
   ------------------------------ */
.filter-pill {
  background-color: #ffffff;
  border: 1px solid #c8c8c8;
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  color: #333;
  line-height: 1.2;
}

.filter-pill:hover {
  border-color: #999;
}

/* ------------------------------
   PILL BUTTONS (ACTIVE)
   ------------------------------ */
.filter-pill.active {
  background-color: #457B9D;
  color: #ffffff;
  border-color: #457B9D;
}
/* Hover state for active pills */
.filter-pill.active:hover {
  background-color: #3A6C8A;  /* slightly darker version of #457B9D */
  border-color: #3A6C8A;
}

/* ------------------------------
   CLEAR FILTERS BUTTON
   ------------------------------ */
.filter-clear {
  background-color: #f5f5f5;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  margin-top: 0;
}

.filter-clear:hover {
  background-color: #e8e8e8;
  border-color: #999;
}

/* ------------------------------
   RESPONSIVE BEHAVIOR
   ------------------------------ */
@media (max-width: 1024px) {
  .filter-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

@media (max-width: 640px) {
  .filter-bar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Override inherited top padding for Examples pages only */
.examples-page .filter-bar {
  padding-top: 0;
}

/* Disable Blocksy flex layout on Examples pages */
/* Add top spacing between site header and page title */
.examples-page {
  display: block !important;
  row-gap: 0 !important;
  padding-top: var(--layout-gap);
}

/* Canonical container width for Examples pages */
.examples-page {
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}



/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
/* Back to Top — sticky inside the Examples page */
.back-to-top-wrapper {
  position: sticky;
  bottom: 48px;
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
  z-index: 20;
  margin-bottom: -16px;
}

.back-to-top {
  background: #eee;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.back-to-top:hover {
  background-color: #e8e8e8;
  border-color: #999;
}

.back-to-top--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ============================================================
   CLEAR FILTERS BUTTON — VERTICAL ALIGNMENT
   ============================================================ */
.filter-group--clear {
  display: flex;
  align-items: center;
  padding-top: 2px;
}



/* ============================================
   CLIENT LOGO — FINAL CANONICAL RULE (70px)
   ============================================ */
/* 
 * RATIONALE
 * Client logos vary dramatically in aspect ratio.
 * To maintain a consistent header rhythm and ensure client names
 * align across each row, the wrapper uses a fixed height (70px).
 * Logos are vertically centered for visual balance and left-aligned
 * for architectural consistency with the card layout.
 */

.examples-page--client .examples-card__visual {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  display: block;
  margin: 0;
}



/*
==============================================================
ADDED 2/13/2026:
UPDATES THIS FILE TO USE NORMALIZED NAMES FOR
CLASSES, SELECTORS, ETC.
==============================================================
*/

/*
==============================================================
FOR EXAMPLES PAGES:  CANONICAL CARD VARIABLES (ARCHITECTURE)
==============================================================
Defines the variables used by the unified grid + card system.
Page‑specific templates assign their own values.
==============================================================
*/

.examples-page {
  --examples-card-gap: var(--layout-gap);
  --examples-card-padding: 1.5rem;
  --examples-card-radius: 8px;
  --examples-card-border: 1px solid #c4c4c4;
  --examples-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}


/*
==============================================================
EXAMPLES PAGES — PAGE-SPECIFIC CARD OVERRIDES (CANONICAL)
==============================================================
These overrides apply consistent, parallel rules to the three
Examples pages using the reliable WordPress body classes:
  - page-template-page-client-examples
  - page-template-page-industry-examples
  - page-template-page-project-examples
==============================================================
*/

/*
==============================================================
CARD HEADER ALIGNMENT
==============================================================
*/

/* Client Examples page and Project Examples page = left-aligned */
.page-template-page-client-examples .examples-card__header,
.page-template-page-project-examples .examples-card__header {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Industry Examples page = centered */
.page-template-page-industry-examples .examples-card__header {
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/*
==============================================================
VISUAL WRAPPER (LOGO / HERO IMAGE) SIZING
==============================================================
*/

/* Client Examples page and Project Examples page — medium logo, left-aligned */
.page-template-page-client-examples .examples-card__visual-wrapper,
.page-template-page-project-examples .examples-card__visual-wrapper {
  width: 210px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/* Industry Examples page — normalized hero image sizing */
.page-template-page-industry-examples .examples-card__visual-wrapper {
  width: 240px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-template-page-industry-examples .examples-card__visual {
  max-height: 120px;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Client Examples page and Project Examples page — image sizing */
.page-template-page-client-examples .examples-card__visual,
.page-template-page-project-examples .examples-card__visual {
  max-height: 70px;
  height: auto;
  width: auto;
  object-fit: contain;
}




/*
--------------------------------------------------------------
NEUTRALIZE OLD CLIENT-SPECIFIC CARD OVERRIDES
--------------------------------------------------------------
*/

.examples-page--client .examples-card {
  padding: var(--examples-card-padding) !important;
  background: #fff !important;
  border: var(--examples-card-border) !important;
}


/*
--------------------------------------------------------------
CARD TITLE
--------------------------------------------------------------
*/

.examples-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}


/*
==============================================================
MOBILE HEADER + NAVIGATION (Task 5.11 + Option 2)
Breakpoint: max-width 767px
==============================================================
*/

/*
--------------------------------------------------------------
Hamburger Button Styling
--------------------------------------------------------------
*/

.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: none;
  /* shown in mobile */
}

.nav-toggle-bar {
  width: 24px;
  height: 3px;
  background-color: #333;
  display: block;
  transition: background-color 0.2s ease;
}

/*
--------------------------------------------------------------
Mobile Navigation Container
--------------------------------------------------------------
*/

.mobile-nav {
  background-color: #ffffff;
  border-top: 1px solid #ddd;
  padding: 1rem 0;
  display: none;  /* JS toggles this */
}

.mobile-nav.open {
  display: block;
}

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu li {
  margin: 0;
  padding: 0.2rem 1.25rem;
}

.mobile-nav-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  display: block;
}

.mobile-nav-menu li a:hover {
  background-color: #f5f5f5;
}

/*
--------------------------------------------------------------
Header Layout (Desktop Defaults)
--------------------------------------------------------------
*/

.site-header {
  border-bottom: 1px solid #ddd;
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}

.site-header__branding {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo {
  height: 48px;
  width: auto;
}

/*
--------------------------------------------------------------
Mobile Adjustments (≤ 767px)
--------------------------------------------------------------
*/

@media (max-width: 767px) {

  /* Hide desktop nav */
  .desktop-nav {
    display: none;
  }

  /* Hide tagline */
  .site-header__tagline {
    display: none;
  }

  /* Show hamburger */
  .nav-toggle {
    display: flex;
  }

  /* Center the branding block (logo) */
  .site-header__inner {
    justify-content: center;
    position: relative;
  }

  /* Right-align hamburger */
  .nav-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Mobile logo sizing */
  .site-logo {
    height: 40px;
  }

  /* Reduce indentation for mobile submenu items */
  .mobile-nav-menu .sub-menu {
    padding-left: 1.2rem;    /* was ~20px = 1.25rem */
  }

  .mobile-nav-menu .sub-menu li {
    padding-left: 0.15rem;    /* tighten bullet-to-text spacing */
  }

}

/*
--------------------------------------------------------------
Desktop Mode (≥ 768px)
--------------------------------------------------------------
*/

@media (min-width: 768px) {

  .desktop-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }
}