/*
 * FILE: assets/css/pages/about.css
 * ROLE: Styles specific to the About page (pages/about.html).
 * HOW TO MODIFY: Add styles for content sections, charts, or callouts unique to this page.
 * EXTENSION POINTS: None.
 */

:root {
    --hgi-blue: #304DC8;
    --hgi-deep: #00236E;
    --hgi-midnight: #101D54;
    --hgi-accent: #2645B5;
    --hgi-gray: #929497;
    --hgi-black: var(--black);
}


/* Make sure parent sections don’t hide content */
.flashy-section {
    overflow: visible !important;
}

/* If wrap container restricts overflow, remove it */
.wrap {
    overflow: visible !important;
}

/* Flashy Team Card */
.team-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--reg-border);
    transition: all var(--anim-med) ease;
    position: relative;
    box-shadow: var(--shadow-1);
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, transparent, var(--card-border-before), transparent);
    transform: scaleX(0);
    transition: transform var(--anim-med) ease;
}

.team-card:hover::before {
    transform: scaleX(1);
}

.team-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-2);
    border-color: var(--card-hover);
}

.team-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform var(--anim-med) ease;
}

.team-card:hover img {
    transform: scale(1.05);
}

.team-card h2 {
    margin: 1.5rem 1.5rem 0.5rem;
    font-size: 1.75rem;
    color: var(--teal-800);
}

.team-card .role {
    margin: 0 1.5rem 1rem;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.95rem;
}

.team-card p {
    margin: 0 1.5rem 1.5rem;
    line-height: 1.7;
}

/* Flashy Table */
.team-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
    table-layout: fixed;
}

.team-table th,
.team-table td {
    padding: 0.75rem 1.5rem;
    text-align: start;
    border-bottom: 1px solid var(--reg-border);
    transition: background var(--anim-fast) ease;
}

.team-table th {
    background: var(--gray2-bg);
    color: var(--teal-800);
    font-weight: 600;
    width: 38%;
}

.team-table tr:hover td {
    background: var(--teal2-bg);
}

.team-table a {
    color: var(--black);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}


/* Two-column layout */
.team-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

/* Prevent outer team-grid from acting as a grid */
.team-grid {
    display: block !important;
}

/* Fix table column sizing for name/photo row */
.team-table th.name-cell {
    width: auto;
    white-space: nowrap;
}

/* Keep photo column tight */
.team-table td.photo-cell {
    width: 1%;
}

/* Center the heading */
.team-heading {
    padding: 2rem;
}

/* Cell that holds the photo */
.photo-cell {
    display: flex;
    align-items: flex-end;
    padding: 0.5rem 0;
    border-bottom: none !important;
}

/* The actual photo */
.photo-cell .team-photo {
    width: 120px;               /* Set image size */
    height: 120px;
    object-fit: cover;         /* Ensures the face stays centered */
    border-radius: 14px;       /* Smooth rounding */
    border: 2px solid #e5e7eb; /* Light gray border */
    box-shadow:
            0 4px 12px var(--black),
            0 1px 3px var(--black);  /* Soft professional drop shadow */
    background: #fff;
}

.name-cell {
    background: #ffffff !important;
    padding: 0.75rem 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #064e3b; /* dark teal */
}

/* Icon Styling */
.icon {
    width: 1.1em;
    height: 1.1em;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.vv-digital-tools {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.vv-digital-tools .section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--h2-text);
}

.vv-digital-tools .section-intro {
    max-width: 700px;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}


/************************************************************
 * V&V Digital Tools Section — Cleaned & Optimized CSS
 * Only includes classes used in your current HTML
 ************************************************************/

/* -----------------------------------------------
   Compact Icon Row (Google, Facebook, Instagram, LinkedIn)
------------------------------------------------ */
.tool-mini-row {
    display: flex;
    gap: 1.75rem;
    margin: 1.5rem 0 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.tool-mini-row .mini-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--h2-text);
    opacity: 0.9;
}

.tool-mini-row .mini-item i {
    width: 20px;
    height: 20px;
    color: var(--icon-sm);
}


/* -----------------------------------------------
   Section Secondary Title
------------------------------------------------ */
.tool-subheader {
    margin-top: 2rem;
    color: var(--navy-700);
}


/* -----------------------------------------------
   MINI GRID (half-size cards)
------------------------------------------------ */

.tools-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.25rem;
    padding-bottom: 1.5rem;
}

/* Mini Card */
.mini-team-card {
    background: var(--gray-bg);
    border: 1px solid var(--reg-border);
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: 0.25s ease;
    text-align: left;
    min-height: 110px; /* Compact, half-height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--card-clr);
}

/* Mini Card Icon */
.mini-team-card i {
    width: 22px;
    height: 22px;
    margin-bottom: 0.35rem;
}

/* Mini Card Title */
.mini-team-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--teal-800);
}

/* Mini Card Description */
.mini-team-card p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--gray3-bg);
}

/* Hover Elevation */
.mini-team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    background: var(--gray3-bg);
    color: var(--white);
}

.mini-team-card:hover h4,
.mini-team-card:hover p{
    color: var(--white);
}

/* ========================================================== */
/* ETHICS JOURNEY PATH (Option A) */
/* ========================================================== */

.ethics-journey {
    position: relative;
    overflow: visible;
}

/* Curved journey line */
.journey-wrapper {
    position: relative;
    margin: 3rem 0;
    padding: 2rem 1rem;
}

.journey-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    width: 4px;
    height: 100%;
    background: linear-gradient(
            to bottom,
            var(--backdrop-color),
            var(--btn-accent-hover),
            var(--card-border-before)
    );
    border-radius: 4px;
    opacity: 0.6;
}

/* Step blocks */
.journey-step {
    position: relative;
    padding-left: 120px;
    margin: 3rem 0;
    max-width: 760px;
}

.journey-step h3 {
    margin-bottom: 0.5rem;
    color: var(--h3-text);
    font-family: var(--font-serif);
}

.journey-step p {
    margin-bottom: 0.5rem;
}

/* Icons as guideposts */
.journey-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    background: var(--white);
    border: 3px solid var(--icon-lg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-2);
    animation: pulseIcon 4s ease-in-out infinite;
}

.journey-icon i {
    width: 34px;
    height: 34px;
    color: var(--btn-accent-hover);
}

/* Pulse animation */
@keyframes pulseIcon {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px var(--teal2-bg); }
    50% { transform: scale(1.08); box-shadow: 0 0 18px var(--teal2-bg); }
}

/* Links inside compliance step */
.journey-links {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.journey-links li {
    margin-bottom: 0.4rem;
}

.journey-links a {
    color: var(--link-clr);
    text-decoration: underline;
}





/* MISSION PAGE */

.timeline {
    position: relative;
    margin: 3rem auto;
    padding-left: 2.5rem;
    border-left: 3px solid var(--section-border);
}

.timeline-step {
    margin-bottom: 3rem;
    position: relative;
    padding-left: 1.5rem;
}

.timeline-step::before {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: 0.35rem;
    width: 1.3rem;
    height: 1.3rem;
    background: var(--section-border);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--reg-shadow);
}

.step-image {
    width: 100%;
    border-radius: var(--radius-sm);
    margin: 1rem 0 1.5rem;
    object-fit: cover;
    max-height: 260px;
}

.impact-stats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 2rem;
}

.impact-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--teal-800);
}

.impact-label {
    opacity: 0.9;
}


/* ============================================================
   HGI — CLEAN MINIMAL VERSION (Only what your table uses)
   ============================================================ */

/* Hide utility */
.hidden {
    display: none !important;
}

.contact-table {
    width: 100%;
}

.contact-table td {
    padding: .5rem;
}

.form-contact {
    background: var(--white);
    backdrop-filter: blur(6px);
    padding: 2rem;
    max-width: 600px;
    margin: 2rem auto;
    border-radius: var(--radius);
    border: 2px solid var(--form-border-accent);
    box-shadow: var(--shadow-1);
    text-align: left;
    width: 100%;
    font-family: var(--font-serif);
}

.form-contact input,
.form-contact select,
.form-contact textarea{
    width: 95%;
    padding: 1rem;
    border: 1px solid var(--form-border-accent);
    border-radius: var(--radius-sm);
    background: var(--gray-bg);
    color: var(--black);
}


/* Main Section */
#hgi-section {
    margin-top: 1.25rem;
    border-radius: 15px;
    background: var(--gray-bg);
    border: 1px solid var(--black);
    border-left: 5px solid var(--hgi-midnight);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

/* ===============================
   HGI TABLE — Layout + Styling
   =============================== */

.hgi-table {
    width: 90%;
    border-collapse: separate;
    border-spacing: 0.75rem 0.85rem;
}
.hgi-table-in td {
    align-content: center;
}
.hgi-table td {
    vertical-align: top;
    padding: 0.15rem 0.35rem;
}

.hgi-select-col {
    background: var(--hgi-accent);
    color: var(--white);
    border-radius: 8px;
    border: 1px solid var(--hgi-accent);
}

/* Labels */
.hgi-table label {
    font-weight: 600;
    color: var(--hgi-midnight);
    font-size: 0.92rem;
}

/* Inputs + Selects */
.hgi-table input,
.hgi-table select,
.hgi-table textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--hgi-accent);
    font-size: 0.9rem;
    background: #fff;
}

/* Larger textarea */
.hgi-table textarea {
    resize: vertical;
}

/* Radio Row */
.hgi-radio-row {
    display: flex;
    gap: 1.5rem;
    padding: 0.35rem 0;
    align-items: center;
}

.hgi-radio-row label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

/* Checkbox Row */
.hgi-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 0.5rem;
}

.hgi-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

/* Header Banner Above Table */
.hgi-banner {
    background: var(--hgi-midnight);
    color: #fff;
    padding: 0.85rem 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    border-radius: 8px;
}

/* When hidden, wipe visuals */
#hgi-section.hidden {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Experience textarea */
#hgi-experience {
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--hgi-accent);
    resize: vertical;
}