/*
Theme Name: Centurion GC
Author: Benjamin Pearsey
Version: 1.0
*/

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #F6F7F7;
    color: #333333;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: #1A2234;
    color: #FFFFFF;
    padding: 20px 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    color: #1A2234;
}

.site-header {
    background-color: #0B1A2E;
    padding: 20px 0;
    position: relative;
    z-index: 10;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-height: 100px;    /* up from 60px */
    width: auto;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links li a {
    color: #e4b36b;        /* updated gold */
    text-decoration: none;
    font-weight: bold;
}

/* ☑️ Hero container spans full viewport */
.hero {
    position: relative;
    width: 100vw;          /* full viewport width */
    left: 50%;             /* center it */
    right: 50%;
    margin-left: -50vw;    /* shift back half the viewport */
    margin-right: -50vw;
    height: 100vh;
    overflow: hidden;
}

/* video background */
.hero-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* fallback bg if no video */
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('<?php echo esc_url($bg); ?>');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* content stays centered inside the normal container */
.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 30vh;
    text-align: center;
    color: #fff;
}

/* -------------------------------------------------------------- */
/*  S E R V I C E S  A R C H I V E                                */
/* -------------------------------------------------------------- */
.services-heading{
  font-size:2.25rem;
  font-weight:700;
  text-align:center;
  margin-bottom:2.5rem;
  color:#0B1A2E;
}

.services-wrap{ background:#F4F5F7; padding:5rem 0; }
.services-grid{ justify-items:center; }

/* -------------------------------------------------------------- */
/*  S I N G L E  S E R V I C E                                    */
/* -------------------------------------------------------------- */
.service-hero{ background:#F4F5F7; padding:4rem 0 0; }
.service-hero-img{ width:100%; height:auto; display:block; }

.service-body{ padding:4rem 0; }
.service-title{
  font-size:2rem; font-weight:700; margin:0 0 1.5rem; color:#0B1A2E;
}
.service-content{ font-size:1.1rem; line-height:1.7; color:#333; }
.service-content h2,
.service-content h3{ color:#0B1A2E; margin-top:2rem; }
/* -------------------------------------------------------------- */
/*  GENERAL FIX ‑ enough padding so content clears fixed header   */
/* -------------------------------------------------------------- */
.page-hero,
.service-hero { padding-top:6.5rem; }     /* header = 100px incl. blur */

/* -------------------------------------------------------------- */
/*  PAGE HERO / SERVICE HERO                                      */
/* -------------------------------------------------------------- */
.page-hero,
.service-hero{
  position:relative;
  background:#0B1A2E url("") center/cover no-repeat;
  color:#fff;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-hero::before,
.service-hero::before{                  /* subtle overlay */
  content:""; position:absolute; inset:0;
  background:rgba(11,26,46,.55);
}
.page-hero-inner,
.service-hero-inner{ position:relative; z-index:2; }

.page-hero h1,
.service-hero h1{
  font-size:2.5rem; font-weight:700; margin:0; text-align:center; color:#e4b36b
}

/* -------------------------------------------------------------- */
/*  SERVICES GRID  (already mostly styled)                         */
/* -------------------------------------------------------------- */
.services-wrap{ background:#F4F5F7; padding:5rem 0; }
@media(max-width:768px){ .page-hero h1, .service-hero h1{font-size:1.9rem;} }

/* -------------------------------------------------------------- */
/*  SINGLE SERVICE BODY                                           */
/* -------------------------------------------------------------- */
.service-body{ padding:4rem 0 6rem; max-width:840px; font-size:1.1rem; line-height:1.7; }
.service-body h2, .service-body h3{ color:#0B1A2E; margin-top:2.5rem;}

/* nice typographic baseline */
.service-body img{ max-width:100%; height:auto; margin:2rem 0; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.07);}


.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.team-card {
    flex: 1 1 calc(33.333% - 20px);
    background-color: #FFFFFF;
    padding: 20px;
    text-align: center;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
}

.contact-form button {
    background-color: #E00122;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 15px;
}

.site-footer {
    background-color: #0B1A2E;
    color: #FFFFFF;
    padding: 40px 0;
    text-align: center;
}

/* default: light overlay */
.site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.3s ease, padding 0.3s ease;
    backdrop-filter: blur(4px);
    padding: 30px 0;
}

.site-header.scrolled {
    position: fixed;
    background: rgba(11, 26, 46, 0.95);
    padding: 15px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 999;
}

.site-header .nav-links li a {
    color: #1A2234;        /* dark blue */
    transition: color 0.3s ease;
}

.site-header.scrolled .nav-links li a {
    color: #e4b36b;        /* updated gold */
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

/* Strength / Honor / Integrity */
.strength-section {
    background: #fff;
    padding: 4rem 0;
}

.strength-list {
    display: flex;
    justify-content: center;
    gap: 5rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.strength-item {
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0B1A2E;
    text-transform: uppercase;
    cursor: pointer;
}

.strength-icon {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    font-size: 2.5rem;
    color: #e4b36b;        /* updated gold */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.strength-item:hover .strength-icon {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* -----------------------------
   MOBILE OPTIMISATION (≤ 768px)
   ----------------------------- */
@media (max-width: 768px) {
    .strength-list {
        flex-direction: column;      /* stack items vertically */
        align-items: center;
        gap: 2rem;                  /* tighter spacing */
    }

    .strength-item {
        font-size: 2rem;            /* slightly smaller type */
    }

    .strength-icon {
        font-size: 2rem;            /* match reduced text size */
        transform: translate(-50%, 8px); /* adjust baseline offset */
    }
}


/* Divider between Strength & Why Work */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
}
.divider-line {
    flex: 1;
    height: 1px;
    background: #E0E0E0;
}
.divider-icon {
    margin: 0 1rem;
    color: #e4b36b;        /* updated gold */
    font-size: 1.5rem;
}

/* Why Work Section — Card Style */
.why-work {
    background: #0B1A2E;
    padding: 4rem 0;
}
.why-work h2 {
    color: #e4b36b;        /* updated gold */
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}
.why-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}
.why-item {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.why-icon-wrap {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4b36b;    /* updated gold */
    border-radius: 50%;
}
.why-icon-wrap i {
    color: #0B1A2E;
    font-size: 1.5rem;
}
.why-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B1A2E;
    margin-bottom: 0.75rem;
}
.why-desc {
    color: #333333;
    line-height: 1.6;
}

/* ------ Services band visual tweaks ------ */
.services-wrap         { background:#F4F5F7; padding:4rem 0; }
.homepage-services     { background:transparent; color:#0B1A2E; }
.services-wrap h2 {
  color:#0B1A2E;
  font-size:2.25rem;
  font-weight:700;
  text-align:center;
  margin-bottom:2.5rem;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
  justify-items:center;               /* keeps single card centred */
}

.service-card {
  background:#FFFFFF;
  border:1px solid #ECECEC;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .3s, box-shadow .3s;
}
.service-card:hover {
  transform:translateY(-6px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* image always fills the card width */
.service-img { width:100%; display:block; }

.service-thumb { position:relative; }

.service-overlay {
  position:absolute; inset:0;
  background:rgba(228,179,107,.9);          /* brand gold tint */
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.service-thumb:hover .service-overlay { opacity:1; }

.learn-more-btn {
  background:#0B1A2E;
  color:#e4b36b;
  padding:.6rem 1.4rem;
  text-decoration:none;
  font-weight:600;
  border-radius:4px;
}

.service-card h3 {
  margin:0;
  padding:1rem 1.25rem;
  font-size:1.15rem;
  font-weight:700;
  color:#0B1A2E;
  text-align:center;
}

/* cta-section */
.cta-section{
  position:relative;
  background:#0B1A2E;                   /* deep navy band */
  overflow:hidden;
  padding:5rem 0;
}
/* subtle diagonal flair */
.cta-section::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.05) 25%,transparent 50%);
  opacity:.25;
  pointer-events:none;
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;                       /* stacks on mobile */
}
.cta-title{
  flex:1 1 300px;
  font-size:2.25rem;
  font-weight:700;
  color:#FFFFFF;
  margin:0;
}
.btn-primary{
  background:#e4b36b;                   /* brand gold */
  color:#0B1A2E;
  font-size:1.125rem;
  font-weight:700;
  padding:1rem 2.75rem;
  border-radius:50px;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .2s;
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
/* mobile tweak */
@media (max-width:768px){
  .cta-inner { flex-direction:column; text-align:center; }
  .cta-title { font-size:1.75rem; }
}

/* --- COMMON HERO PADDING (matches services) --- */
.page-hero{padding-top:6.5rem;}          /* keeps title clear of navbar */

/* --- NEWS ARCHIVE GRID --- */
.news-wrap      {background:#F4F5F7; padding:5rem 0;}
.news-grid      {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.news-card      {background:#fff;border:1px solid #ECECEC;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;}
.news-card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.1);}
.news-img       {width:100%;display:block;}
.news-card a    {color:inherit;text-decoration:none;display:block;padding-bottom:1.5rem;}
.news-meta      {font-size:.825rem;color:#696969;padding:1rem 1.25rem 0;}
.news-card h3   {font-size:1.25rem;margin:.4rem 1.25rem .6rem;color:#0B1A2E;}
.news-card p    {margin:0 1.25rem 1rem;color:#444;}
.read-more      {display:block;margin:0 1.25rem;font-weight:600;color:#e4b36b;}

/* --- SINGLE POST --- */
.post-body      {max-width:820px;padding:4rem 0 6rem;font-size:1.1rem;line-height:1.7;}
.post-body img  {max-width:100%;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.07);margin:2rem 0;}
.post-date      {margin-top:.5rem;font-size:1rem;font-weight:400;color:#e4b36b;}

@media(max-width:768px){
  .news-grid{grid-template-columns:1fr;}
  .news-card h3{font-size:1.15rem;}
}
/* ——— ABOUT HERO ——— */
.about-hero{padding-top:6.5rem;min-height:320px;background-size:cover;background-position:center;display:flex;align-items:center}
.about-hero h1{font-size:3rem;font-weight:700;color:#fff;text-shadow:0 3px 8px rgba(0,0,0,.45)}
@media(max-width:768px){.about-hero{min-height:240px}.about-hero h1{font-size:2.25rem}}

/* ——— INTRO COPY ——— */
.about-intro{background:#0B1A2E;color:#e4b36b;padding:4rem 0;font-size:1.1rem;line-height:1.8}
.about-intro p{max-width:820px;margin:0 auto 1.75rem}

/* ——— HIGHLIGHTS GRID ——— */
.about-highlights{background:#F4F5F7;padding:4.5rem 0}
.highlights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.highlight-card{background:#fff;border:1px solid #ECECEC;border-radius:8px;padding:2.25rem 1.75rem;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.highlight-icon{width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;background:#e4b36b;display:flex;align-items:center;justify-content:center}
.highlight-icon i{font-size:1.75rem;color:#0B1A2E}
.highlight-card p{margin:0;color:#333;font-weight:600;}

/* ——— CTA (uses same styles you already have) ——— */
/* ======================================
   Bright “About‑Intro” variant
   ====================================== */
.about-intro{
  background:#F5F7FA;               /* light canvas           */
  padding:5rem 0 6rem;
  position:relative;
  overflow:hidden;
}

/* faint abstract texture */
.about-intro::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(228,179,107,.18) 0,transparent 35%) ,
             radial-gradient(circle at 80% 70%,rgba(11,26,46,.05) 0,transparent 55%);
  background-size:400px 400px;
  opacity:.35;
  pointer-events:none;
}

/* thin gold accent bar across the top */
.about-intro::after{
  content:"";
  position:absolute; top:0; left:50%;
  width:160px; height:4px;
  background:#e4b36b;
  transform:translateX(-50%);
  border-radius:2px;
}

.about-intro__inner{
  max-width:960px;
  margin:0 auto;
  padding:0 1.5rem;
  text-align:center;
  color:#0B1A2E;                    /* deep navy text         */
  font-size:1.125rem;               /* 18 px base             */
  line-height:1.8;
}

/* first paragraph punchier */
.about-intro__inner > p:first-of-type{
  font-size:1.4rem;                 /* ~22 px                 */
  font-weight:600;
  color:#0B1A2E;
  margin-bottom:1.75rem;
}

/* optional headings inside block */
.about-intro__inner h2,
.about-intro__inner h3{
  color:#e4b36b;                    /* brand gold             */
  margin:2.75rem 0 1rem;
  font-weight:700;
}

/* mobile tweak */
@media(max-width:768px){
  .about-intro{ padding:4rem 0 5rem; }
  .about-intro__inner{ font-size:1rem; }
}
/* =========================================================
   TEAM  (archive + single) – refined corporate style
   ========================================================= */

/* ---------- hero band ---------- */
.team-hero{
  background:#0B1A2E;
  color:#FFF;
  text-align:center;
  padding:4.5rem 1rem 5.5rem;
  position:relative;
  padding-top:10.5rem;
}
.team-hero::after{         /* faint diagonal gloss */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 60%);
  pointer-events:none;
}
.team-hero__title{
  font-size:clamp(2.25rem,5vw,3.5rem);
  margin:0 0 .75rem;
  letter-spacing:.5px;
  color:#e4b36b
}
.team-hero__tag{
  font-size:1.25rem;
  color:#e4b36b;
  font-weight:600;
}

/* ---------- archive grid ---------- */
.team-archive{ padding:4rem 0; }

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2.25rem;
}

.team-card{
  background:#FFFFFF;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .25s, box-shadow .25s;
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.team-card__inner{ text-decoration:none; color:inherit; display:block; }

/* ---------- TEAM GRID ---------- */
.team-card__img{
  width: 100%;            /* always fill card width   */
  height: 280px;          /* ← pick any square size   */
  object-fit: cover;      /* crop‑zoom to fill square */
  border-radius: 50%;     /* ← comment‑out for squares */
  display: block;
}

/* if you’d like a subtle white ring around the circle */
.team-card__img{
  border: 6px solid #fff;         /* matches card background   */
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.team-card__name{
  margin:1.25rem 1.25rem .5rem;
  font-size:1.25rem;
  font-weight:700;
  color:#0B1A2E;
}
.team-card__excerpt{
  margin:0 1.25rem 1.5rem;
  color:#4A4A4A;
  min-height:4.3rem;                /* keeps heights even */
}
.team-card__more{
  display:block;
  background:#e4b36b;
  color:#0B1A2E;
  padding:.75rem;
  text-align:center;
  font-weight:600;
  transition:background .2s;
}
.team-card__inner:hover .team-card__more{ background:#d7a358; }

/* ─── Keep head‑shots perfectly circular ─── */
.team-card__img{
  /* 1) make the box square  */
  width: 280px;          /* same as the old height      */
  height: 280px;
  
  /* 2) centre it inside the card */
  margin: 0 auto;        /* horizontal centre           */
  display: block;
  
  /* 3) keep the photo cropped nicely */
  object-fit: cover;
  border-radius: 50%;    /* circle, not an ellipse      */
}

/* (optional) if you’d like the cards themselves centred
   when there are just one or two of them) */
.team-grid{
  justify-content: center;
}


/* ---------- single layout ---------- */
.single-team{ padding:4rem 0 6rem; }

.single-team__header{
  display:flex;
  align-items:center;
  gap:2.5rem;
  flex-wrap:wrap;
  margin-bottom:2.75rem;
  color:#e4b36b;
}
.single-team__photo{
  width:280px; height:280px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.single-team__name{
  font-size:2rem;
  font-weight:700;
  color:#e4b36b;
  margin:0;
}

/* bio text */
.single-team__bio{
  font-size:1.0625rem;
  line-height:1.85;
  color:#333;
}
.single-team__bio h2,
.single-team__bio h3{ color:#0B1A2E; margin-top:2.5rem; }

@media(max-width:768px){
  .single-team__header{ flex-direction:column; text-align:center; }
  .single-team__photo{ width:220px; height:220px; }
}

/* --- hero slim band ------------------------------------------------ */
.hero--slim{
  height: 38vh;               /* shorter than homepage */
  background: url(/wp-content/themes/centuriongc/assets/img/contact-bg.png) center/cover,
              #0B1A2E;        /* fallback navy */
}
.hero--slim h1{
  font-size: 2.5rem;         /* larger than normal */
  font-weight: 700;
  color: #e4b36b;           /* brand gold */
  text-align: center;
  margin: 0;
}
.hero--slim .hero-content{
  position:absolute;          /* make sure it’s absolutely positioned */
  left:50%;                   /* ★ this line centers the block horizontally */
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  width:100%;                 /* keeps multiline headings centred */
  color:#fff;                 /* or whatever colour you prefer */
}

/* --- contact layout ----------------------------------------------- */
.contact-page{
  max-width: 640px;
  margin: 0 auto 6rem;
}

.success-msg{
  background: #e6ffe9;
  border: 1px solid #28a74555;
  color: #23733c;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 2rem;
}

.contact-card{
  background:#FFFFFF;
  border:1px solid #ECECEC;
  border-radius:8px;
  padding:2.5rem 2rem 3rem;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.field{ margin-bottom:1.5rem; }
.field label{
  display:block;
  font-weight:700;
  margin-bottom:.4rem;
  color:#0B1A2E;
}
.field label span{ color:#d33; }
.field input,
.field textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid #C8CDD4;
  border-radius:4px;
  font-size:1rem;
  background:#FDFDFD;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:#e4b36b;
  box-shadow:0 0 0 3px rgba(228,179,107,.25);
}

/* button already exists, but slightly bigger for this page */
.contact-card .btn-primary{
  width:100%;
  font-size:1.125rem;
  padding:1rem 0;
}