/* Contact page sidebar: broker profile, contact details, hours, social.
   Shared by contact.php and about.php.
   Brand: green #007e3f, deep green #00522a, light green #7ce0aa, navy #221e71.

   NOTE ON ICONS: Font Awesome is loaded as a KIT, which runs in SVG+JS mode
   and REPLACES every <i> with an <svg class="svg-inline--fa">. Rules that
   target `i` alone stop matching after that swap, so every icon rule here
   names both. */

/* ------------------------------------------------------------------
   PAGE LAYOUT
   Plain CSS grid, not uk-grid: the old markup carried inline width:65% /
   width:35% on uk-grid children, which collapses the moment UIkit's grid
   does not initialise.
   ------------------------------------------------------------------ */
.cpr-contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}

@media (min-width: 960px) {
    .cpr-contact-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

.cpr-contact-form-card {
    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 1px 2px rgba(10, 47, 34, .04), 0 8px 24px rgba(10, 47, 34, .06);
}

@media (max-width: 480px) { .cpr-contact-form-card { padding: 1.25rem; } }

.cpr-contact-side { display: grid; gap: 1.5rem; align-content: start; }

/* The panels stack in a grid, so the margin rules further down would double
   up on the gap. */
.cpr-contact-side .cpr-panel + .cpr-panel,
.cpr-contact-side .cpr-broker + .cpr-panel,
.cpr-contact-side .cpr-panel + .cpr-broker { margin-top: 0; }

/* --- Why CPR: full width below the two columns --- */
.cpr-why { margin-top: 3.5rem; }

.cpr-why-heading {
    margin: 0 0 1.75rem;
    text-align: center;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: #1d2b24;
}

.cpr-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpr-why-item {
    position: relative;
    padding: 1.5rem 1.4rem 1.4rem;
    border: 1px solid #e8ece9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 47, 34, .04), 0 8px 24px rgba(10, 47, 34, .06);
}

.cpr-why-item h3 {
    margin: .9rem 0 .4rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1d2b24;
}

.cpr-why-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: #55665e;
}

/* Drawn, not a font glyph: this sits next to Font Awesome icons and must not
   depend on the kit having loaded. */
.cpr-why-check {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #edf6f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007e3f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}

/* ------------------------------------------------------------------
   BROKER CARD
   ------------------------------------------------------------------ */
.cpr-broker {
    position: relative;          /* the photo is positioned against the CARD */
    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(10, 47, 34, .04), 0 8px 24px rgba(10, 47, 34, .06);
}

/* Texture lifted from the communities section: logo gradient plus a tree
   watermark, masked so one SVG can be tinted. */
/* overflow:hidden here, not just on the card: the watermark below is
   positioned past the right edge, and without clipping it at the band the
   card reports 14px of phantom scroll width. */
.cpr-broker-top {
    position: relative;
    overflow: hidden;
    height: 132px;
    background:
        radial-gradient(420px 220px at 80% 0%, rgba(0, 126, 63, .45), transparent 65%),
        linear-gradient(150deg, #0a3b2a 0%, #0d3b30 45%, #10233f 100%);
}

.cpr-broker-top::before {
    content: '';
    position: absolute;
    right: -26px;
    bottom: -34px;
    width: 118px;
    height: 118px;
    background-color: rgba(255, 255, 255, .07);
    -webkit-mask: url('/media/svg/cpr-tree.svg') center / contain no-repeat;
    mask: url('/media/svg/cpr-tree.svg') center / contain no-repeat;
    pointer-events: none;
}

/* Straddles the band's bottom edge: band 132px, photo 116px, so top:74px
   centres it on the boundary. Positioned against .cpr-broker rather than the
   band, because the band needs overflow:hidden for its watermark and that was
   clipping the photo's overhang flat. */
.cpr-broker-photo {
    position: absolute;
    left: 50%;
    top: 74px;
    transform: translateX(-50%);
    width: 116px;
    height: 116px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    background: #eef1ef;
    box-shadow: 0 6px 18px rgba(10, 47, 34, .18);
}

.cpr-broker-body {
    padding: 4rem 1.5rem 1.5rem;
    text-align: center;
}

.cpr-broker-eyebrow {
    margin: 0 0 .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #007e3f;
}

.cpr-broker-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1d2b24;
}

.cpr-broker-title {
    margin: .2rem 0 0;
    font-size: .92rem;
    color: #6a7a72;
}

.cpr-broker-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
}

.cpr-broker-tags li {
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #edf6f1;
    color: #00522a;
    font-size: .72rem;
    font-weight: 600;
}

.cpr-broker-bio {
    margin: 1rem 0 0;
    font-size: .92rem;
    line-height: 1.6;
    color: #55665e;
}

.cpr-broker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.cpr-broker-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1rem;
    border: 1px solid #007e3f;
    border-radius: 10px;
    background: #007e3f;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.cpr-broker-btn,
.cpr-broker-btn:hover,
.cpr-broker-btn:focus,
.cpr-broker-btn:active,
.cpr-broker-btn:visited { text-decoration: none; }

.cpr-broker-btn:hover, .cpr-broker-btn:focus { background: #00662f; color: #fff; }

.cpr-broker-btn-ghost { background: #fff; color: #007e3f; }
.cpr-broker-btn-ghost:hover, .cpr-broker-btn-ghost:focus { background: #edf6f1; color: #00522a; }

.cpr-broker-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem .8rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #eef1ef;
}

.cpr-broker-lic {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9aa8a1;
}

.cpr-broker-social { display: inline-flex; gap: .35rem; }

.cpr-broker-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #edf6f1;
    color: #00522a;
    font-size: .8rem;
    transition: background .2s ease, color .2s ease;
}

.cpr-broker-social a:hover,
.cpr-broker-social a:focus { background: #007e3f; color: #fff; text-decoration: none; }

.cpr-broker-more,
.cpr-broker-more:visited {
    display: inline-block;
    margin-top: 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: #007e3f;
    text-decoration: none;
}

.cpr-broker-more:hover, .cpr-broker-more:focus { text-decoration: underline; }

/* ------------------------------------------------------------------
   CONTACT DETAIL ROWS
   ------------------------------------------------------------------ */
.cpr-panel {
    background: #fff;
    border: 1px solid #e8ece9;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(10, 47, 34, .04), 0 8px 24px rgba(10, 47, 34, .06);
}

.cpr-panel + .cpr-panel,
.cpr-broker + .cpr-panel,
.cpr-panel + .cpr-broker { margin-top: 1.5rem; }

.cpr-panel-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d2b24;
}

.cpr-panel-title i,
.cpr-panel-title svg { color: #007e3f; font-size: .95rem; }

.cpr-info { display: grid; gap: .35rem; }

.cpr-info-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem;
    margin: 0 -.6rem;
    border-radius: 12px;
    color: inherit;
    transition: background .2s ease;
}

a.cpr-info-row,
a.cpr-info-row:hover,
a.cpr-info-row:focus,
a.cpr-info-row:active,
a.cpr-info-row:visited { text-decoration: none; color: inherit; }

a.cpr-info-row:hover, a.cpr-info-row:focus { background: #f4faf7; }

.cpr-info-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #edf6f1;
    color: #007e3f;
    font-size: 1rem;
    transition: background .2s ease, color .2s ease;
}

.cpr-info-icon i, .cpr-info-icon svg { color: inherit; }

a.cpr-info-row:hover .cpr-info-icon,
a.cpr-info-row:focus .cpr-info-icon { background: #007e3f; color: #fff; }

.cpr-info-body { min-width: 0; }

.cpr-info-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9aa8a1;
}

.cpr-info-value {
    display: block;
    margin-top: .1rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1d2b24;
    word-break: break-word;
}

/* ------------------------------------------------------------------
   HOURS
   ------------------------------------------------------------------ */
.cpr-hours { list-style: none; margin: 0; padding: 0; }

.cpr-hours li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    font-size: .92rem;
    color: #55665e;
}

.cpr-hours li + li { margin-top: .15rem; }

/* Today, so the visitor does not have to work out which row applies. */
.cpr-hours li.is-today {
    background: #edf6f1;
    color: #00522a;
    font-weight: 600;
}

.cpr-hours .cpr-hours-time { color: #1d2b24; font-weight: 600; }
.cpr-hours li.is-today .cpr-hours-time { color: #00522a; }

.cpr-today-pill {
    margin-left: .45rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #007e3f;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: .1em;
}

/* ------------------------------------------------------------------
   SOCIAL ROW
   ------------------------------------------------------------------ */
.cpr-social-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.cpr-social-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #edf6f1;
    color: #00522a;
    font-size: 1rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.cpr-social-row a:hover,
.cpr-social-row a:focus {
    background: #007e3f;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .cpr-broker-btn, .cpr-broker-social a, .cpr-info-row,
    .cpr-info-icon, .cpr-social-row a { transition: none; }
    .cpr-social-row a:hover, .cpr-social-row a:focus { transform: none; }
}