/**
 * Longevity-Ready Cities and Communities Accelerator — landing page
 *
 * The page is ordinary Divi so comms can edit every word; the look comes from
 * the classes below, typed into each module's CSS Class field. Nothing in PHP
 * emits them. Loaded only on pages whose content carries "ifa-acc"
 * (inc/enqueue.php). Signed-off design: the "Longevity-Ready Cities
 * Accelerator" design canvas.
 *
 * Palette is the Accelerator's own (CCA_Colour_Palette.pptx). Its four light
 * tones are backgrounds only, since none reaches 4.5:1 as text; text is navy,
 * and actions follow the site rule: dark teal at rest, navy on hover.
 *
 * Sections (.et_pb_section):
 *   .ifa-acc                 every section: type, spacing, 1080px rows (the site header's width)
 *   .ifa-acc-hero            cityscape hero (motif is the section background)
 *   .ifa-acc-band            navy statement band
 *   .ifa-acc--mint / --cream background tones
 *   .ifa-acc-signoff         acknowledgement above the footer
 * Rows:     .ifa-acc-cards        Key Priorities cards, one per row
 *           .ifa-acc-event        event card (duplicate the row for a new event)
 * Columns:  .ifa-acc-event__panel navy date panel inside .ifa-acc-event
 *           .ifa-acc-contact      mint contact card
 * Modules:  .ifa-acc-tagline (text), .ifa-acc-stat (text), .ifa-acc-quote (text),
 *           .ifa-acc-card + .ifa-acc-card--sand (blurb), .ifa-acc-media (image),
 *           .ifa-acc-logo (image: partner logo), .ifa-acc-placeholder (text: stand-in content)
 * Buttons:  .ifa-teal (existing), .ifa-acc-btn--outline, .ifa-acc-btn--light,
 *           .ifa-acc-btn--mail
 * In text:  <p class="ifa-acc-kicker">, <nav class="ifa-acc-crumbs">,
 *           <p class="ifa-acc-date">, <ol class="ifa-acc-steps">
 */

.ifa-acc {
    --acc-navy: var(--ifa-dark-blue, #203248);
    --acc-teal: var(--ifa-dark-teal, #255F71);
    --acc-green: var(--ifa-green, #49B461);
    --acc-sage: #8FAF9A;
    --acc-mint: #DBE7DC;
    --acc-sand: #EDE3CF;
    --acc-cream: #F7F9F4;
    --acc-paper: #FDFCFA; /* sampled from the motif's own ground, so the image has no visible edge */
    --acc-ink-2: #2B3D52;
    --acc-serif: 'Libre Baskerville', Georgia, serif;
    --acc-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Section rhythm and type ---------- */
.et_pb_section.ifa-acc {
    padding: 112px 0;
    font-family: var(--acc-sans);
    color: var(--acc-navy);
}

/* 1080px: the site header and footer rows' width, so the page's left edge
   lines up with the logo instead of sitting 60px outside it. */
.ifa-acc .et_pb_row {
    width: calc(100% - 64px);
    max-width: 1080px;
    padding: 0;
}

.ifa-acc .et_pb_row + .et_pb_row { margin-top: 40px; }

.ifa-acc p,
.ifa-acc li {
    font-family: var(--acc-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--acc-navy);
}

.ifa-acc .et_pb_text p { padding-bottom: 0; margin-bottom: 20px; }
.ifa-acc .et_pb_text p:last-child { margin-bottom: 0; }

.ifa-acc h1,
.ifa-acc h2,
.ifa-acc h3 {
    font-family: var(--acc-serif);
    color: var(--acc-navy);
    padding-bottom: 0;
}

.ifa-acc h1 {
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    max-width: 820px;
    margin: 0 0 28px;
}

.ifa-acc h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.25;
    margin: 0 0 28px;
}

.ifa-acc h3 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }

/* Small uppercase label above a heading. On a text module, or a <p> in one. */
/* Specific enough to win over the section-level paragraph rules below,
   e.g. the sign-off's serif quote. */
.ifa-acc .et_pb_text p.ifa-acc-kicker {
    font-family: var(--acc-sans);
    line-height: 1.5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-teal);
    margin-bottom: 12px;
}

/* The hero's eyebrow carries a short green rule: green as an accent, never text. */
.ifa-acc-hero .ifa-acc-kicker::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 3px;
    margin: -2px 10px 0 0;
    background: var(--acc-green);
    border-radius: 2px;
}

.ifa-acc a:not(.et_pb_button) { color: var(--acc-teal); }
.ifa-acc a:not(.et_pb_button):hover { color: var(--acc-navy); }

/* ---------- Backgrounds ---------- */
.et_pb_section.ifa-acc--mint  { background-color: var(--acc-mint) !important; }
.et_pb_section.ifa-acc--cream { background-color: var(--acc-cream) !important; }

/* ---------- Hero ---------- */
.et_pb_section.ifa-acc-hero {
    background-color: var(--acc-paper) !important;
    /* Not cover: the motif is 3:1, and cover blew it up to one building on a
       phone. Full width (never under 1100px, so the skyline keeps its scale),
       anchored to the bottom; the paper colour fills the sky above it. */
    background-size: max(100%, 1100px) auto !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    min-height: 760px;
    padding: 72px 0 340px;
}

.ifa-acc-hero .ifa-acc-tagline p {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.55;
    color: var(--acc-ink-2);
    max-width: 640px;
}

.ifa-acc-crumbs { font-size: 14px; margin-bottom: 40px; color: #4A5B6E; }
.ifa-acc-crumbs a + a::before {
    content: "/";
    margin: 0 8px;
    color: #4A5B6E;
}

/* Divi stacks every button module; the hero's two sit side by side. */
.ifa-acc-hero .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 40px 14px 0 0;
}

/* ---------- Statement band ---------- */
.et_pb_section.ifa-acc-band {
    background-color: var(--acc-navy) !important;
    padding: 88px 0;
}

.ifa-acc-band .et_pb_row { display: flex; flex-wrap: wrap; align-items: center; }

.ifa-acc-stat .ifa-acc-stat__figure {
    font-family: var(--acc-serif);
    font-size: clamp(64px, 9vw, 120px);
    line-height: 1;
    color: var(--acc-sand);
    margin-bottom: 16px;
}

.ifa-acc-band p { color: var(--acc-mint); font-size: 18px; }

.ifa-acc-band .ifa-acc-quote p {
    font-family: var(--acc-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.45;
    color: #fff;
}

/* ---------- Image with offset sand card ---------- */
/* The offset card is a hard shadow: a ::before behind the module painted
   over the module's own background, hiding the placeholder box. */
.ifa-acc .ifa-acc-media {
    margin: 0 20px 20px 0 !important;
    border-radius: 20px;
    box-shadow: 20px 20px 0 var(--acc-sand);
}

/* Cropped to the same 4:5 portrait as the placeholder, so swapping in a
   landscape photo doesn't change the section's layout. */
.ifa-acc-media img {
    border-radius: 20px;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* ---------- Key Priorities cards ----------
   One full-width card per priority, in a single Divi column: icon tile,
   keyword, sentence. Five narrow columns made tall cards with empty space
   under the short ones. */
.ifa-acc .ifa-acc-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 12px !important;
}

.ifa-acc .ifa-acc-card:last-child { margin-bottom: 0 !important; }

.ifa-acc-card .et_pb_blurb_content {
    max-width: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Keyword and sentence side by side; they stack on narrow screens below. */
.ifa-acc-card .et_pb_blurb_container {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    column-gap: 24px;
    align-items: center;
}

/* Divi sizes the blurb image box from the image, which turned a round tile
   into an oval. The tile is the wrap, with both sides fixed. */
/* Fixed at the tile's width: Divi sizes this box to the module's full width,
   which squeezed the keyword and sentence to nothing beside it. */
.ifa-acc .ifa-acc-card .et_pb_main_blurb_image {
    flex: 0 0 56px !important;
    width: 56px !important;
    max-width: 56px !important;
    margin: 0 !important;
    text-align: left;
}

.ifa-acc-card .et_pb_main_blurb_image .et_pb_image_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 !important; /* Divi centres the wrap with auto margins */
    border-radius: 14px;
    background: var(--acc-mint);
}

.ifa-acc-card--sand .et_pb_main_blurb_image .et_pb_image_wrap { background: var(--acc-sand); }

.ifa-acc-card .et_pb_main_blurb_image img { width: 28px; height: 28px; }

.ifa-acc .ifa-acc-card .et_pb_module_header {
    font-family: var(--acc-serif);
    font-size: 22px;
    color: var(--acc-navy);
    padding-bottom: 0;
    margin: 0;
}

.ifa-acc-card .et_pb_blurb_description p { font-size: 16px; line-height: 1.6; }

@media (max-width: 767px) {
    .ifa-acc .ifa-acc-card { padding: 20px; }
    .ifa-acc-card .et_pb_blurb_content { align-items: flex-start; gap: 16px; }
    .ifa-acc-card .et_pb_blurb_container { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}

/* ---------- Event card ---------- */
.ifa-acc .ifa-acc-event.et_pb_row {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(32, 50, 72, .06), 0 24px 48px -24px rgba(32, 50, 72, .25);
}

.ifa-acc-event .et_pb_column {
    margin: 0 !important;
    padding: 48px 44px;
    box-sizing: border-box;
}

@media (min-width: 981px) {
    .ifa-acc-event .et_pb_column { width: 45% !important; }
    .ifa-acc-event .et_pb_column:last-child { width: 55% !important; }
}

.ifa-acc-event .et_pb_column.ifa-acc-event__panel { background: var(--acc-navy); }

.ifa-acc-event__panel p { color: #E9EEF2; }
.ifa-acc-event__panel h2,
.ifa-acc-event__panel h3 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 12px; }
.ifa-acc-event__panel em { font-family: var(--acc-serif); font-size: 19px; color: var(--acc-mint); }

.ifa-acc-date {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 28px !important;
}

.ifa-acc-date__day {
    font-family: var(--acc-serif);
    font-size: 96px;
    line-height: .85;
    color: var(--acc-sand);
}

.ifa-acc-date__when {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
}

.ifa-acc-date__when strong {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acc-mint);
}

.ifa-acc p.ifa-acc-event__lead {
    font-family: var(--acc-serif);
    font-size: 22px !important;
    margin-bottom: 28px !important;
}

/* Numbered tiles drawn by CSS, so the list stays a plain editable <ol>. */
.ifa-acc-steps {
    counter-reset: acc-step;
    list-style: none !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
}

/* Tile and text in a flex row, centred against each other, so a two- or
   three-line question sits evenly beside its number. */
.ifa-acc-steps li {
    counter-increment: acc-step;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin-bottom: 24px;
}

.ifa-acc-steps li::before {
    content: counter(acc-step);
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--acc-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--acc-serif);
    font-weight: 700;
    color: var(--acc-navy);
}

.ifa-acc-steps li:nth-child(even)::before { background: var(--acc-sand); }

.ifa-acc-event__note {
    padding-top: 24px;
    border-top: 1px solid var(--acc-mint);
    font-size: 15px !important;
    color: var(--acc-ink-2) !important;
}

/* ---------- Contact card ---------- */
.ifa-acc .et_pb_column.ifa-acc-contact {
    background: var(--acc-mint);
    border-radius: 20px;
    padding: 40px 36px;
}

.ifa-acc-contact p {
    font-family: var(--acc-serif);
    font-size: 22px;
    line-height: 1.35;
}

@media (min-width: 981px) {
    .ifa-acc .et_pb_row.ifa-acc-split { display: flex; align-items: center; }
}

/* ---------- Buttons ----------
   buttons.css paints every Divi button navy with
   `#page-container .et_pb_button_module_wrapper a.et_pb_button:not(.light-btn)`
   — an ID selector, so no class-only rule (.ifa-teal included) can beat it.
   These repeat its shape plus .ifa-acc and the variant class, one step more
   specific, and the same for its :hover rule. */
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-teal,
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--outline,
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--light,
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--mail {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px !important;
    border-radius: 8px !important;
    font-family: var(--acc-sans);
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-teal,
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--mail {
    background: var(--acc-teal) !important;
    border: 1px solid var(--acc-teal) !important;
    color: #fff !important;
}

#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-teal:hover,
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--mail:hover {
    background: var(--acc-navy) !important;
    border-color: var(--acc-navy) !important;
    color: #fff !important;
}

/* Divi hides every button ::before, and gives it a -1em left margin that
   pushed this one, the mail icon, out of the button. */
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--mail::before {
    content: "";
    display: block !important;
    flex: none;
    margin: 0 !important;
    left: auto !important;
    width: 20px;
    height: 20px;
    background: url("../images/accelerator/mail.svg") center / contain no-repeat;
    position: static;
    opacity: 1;
}

/* Solid white: it sits over the motif, where an outline-only button was hard to read. */
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--outline {
    background: #fff !important;
    border: 1.5px solid var(--acc-navy) !important;
    color: var(--acc-navy) !important;
    box-shadow: 0 6px 16px -8px rgba(32, 50, 72, .35);
}

#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--outline:hover {
    background: var(--acc-navy) !important;
    border-color: var(--acc-navy) !important;
    color: #fff !important;
}

/* White on the navy event panel. */
#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--light {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: var(--acc-navy) !important;
}

#page-container .ifa-acc .et_pb_button_module_wrapper a.et_pb_button.ifa-acc-btn--light:hover {
    background: var(--acc-sand) !important;
    border-color: var(--acc-sand) !important;
    color: var(--acc-navy) !important;
}

.ifa-acc .et_pb_button.ifa-acc-btn--outline::after,
.ifa-acc .et_pb_button.ifa-acc-btn--light::after,
.ifa-acc .et_pb_button.ifa-acc-btn--mail::after {
    display: none !important;
}

/* ---------- Sign-off: acknowledgement ---------- */
/* The bottom padding is 60px more than the top: the footer section's
   curved top overlaps the section above it by that much. */
.et_pb_section.ifa-acc-signoff {
    background-color: var(--acc-paper) !important;
    padding: 88px 0 148px;
}

.ifa-acc-signoff .ifa-acc-quote p { font-family: var(--acc-serif); font-size: 22px; line-height: 1.45; }

/* Partner logo (an Image module). Use a transparent PNG: the site refuses
   SVG uploads, and a logo on white shows as a box on the paper background. */
.ifa-acc .ifa-acc-logo { text-align: right; margin-bottom: 0; }

.ifa-acc .ifa-acc-logo .et_pb_image_wrap { display: inline-block; }

/* !important: Divi's phone rule sets module images to full width. */
.ifa-acc .ifa-acc-logo img { display: block; width: 160px !important; max-width: 100%; height: auto; }

@media (max-width: 980px) {
    .ifa-acc .ifa-acc-logo { text-align: left; margin-top: 24px; }
}

/* ---------- Placeholders ----------
   Calm but unmistakable: anything with this class is waiting for real content. */
.ifa-acc .ifa-acc-placeholder {
    border: 2px dashed var(--acc-sage);
    border-radius: 20px;
    background: var(--acc-cream);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ifa-acc .ifa-acc-placeholder p { font-size: 15px; color: var(--acc-ink-2); margin-bottom: 4px; }

.ifa-acc .ifa-acc-placeholder p:first-child {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc-teal);
}

.ifa-acc .ifa-acc-media.ifa-acc-placeholder { aspect-ratio: 4 / 5; }
.ifa-acc-signoff .ifa-acc-placeholder { border-radius: 12px; background: #fff; min-height: 96px; }

/* ---------- Small screens ---------- */
@media (max-width: 980px) {
    .et_pb_section.ifa-acc { padding: 72px 0; }
    .et_pb_section.ifa-acc-hero { min-height: 0; padding: 48px 0 220px; }
    .et_pb_section.ifa-acc-signoff { padding: 72px 0 132px; }
    .ifa-acc-event .et_pb_column { padding: 36px 28px; }
    .ifa-acc-date__day { font-size: 72px; }
    .ifa-acc .ifa-acc-media { margin: 0 12px 32px 0 !important; box-shadow: 12px 12px 0 var(--acc-sand); }
    .ifa-acc .et_pb_row { width: calc(100% - 40px); }
    .ifa-acc-hero .et_pb_button_module_wrapper { margin: 12px 12px 0 0; }
    .ifa-acc-hero .ifa-acc-tagline + .et_pb_button_module_wrapper { margin-top: 32px; }
}
