/* Site-specific overrides layered on top of the vendored Verdicta theme.
   Keep the vendored 01-13 stylesheets and style.css/responsive.css untouched —
   anything Phoenix-Attorneys-specific belongs here instead, loaded last so it
   can override them. */

/* About section photo collage (homepage + about.php): three equal-size photos
   instead of a single portrait. All three tiles share the same width (via
   flex-grow) and the same aspect-ratio, so none renders larger or smaller
   than the others regardless of each source photo's own dimensions. */
.about-one__img--collage {
    display: flex;
    align-items: stretch;
    gap: 15px;
}

.about-one__collage-main,
.about-one__collage-side-single {
    flex: 1 1 0;
    aspect-ratio: 3 / 7;
}

.about-one__collage-main {
    position: relative;
    border-radius: var(--verdicta-bdr-radius);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.about-one__collage-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 16px;
    background: linear-gradient(0deg, rgba(13, 15, 14, 0.85) 0%, rgba(13, 15, 14, 0) 100%);
    color: var(--verdicta-white);
    font-family: var(--verdicta-font-two);
    font-weight: 700;
    font-size: 15px;
}

.about-one__collage-caption--small {
    padding: 6px 10px;
    font-size: 12px;
}

.about-one__collage-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* This photo's face sits right-of-center in the source image, so the default
   center crop leaves too much empty background on the left and pushes the
   right side of the face toward the edge. Shifting the horizontal anchor
   right re-centers the crop on the actual face position. */
.about-one__collage-main img[src*="jude"] {
    object-position: 62% top;
}

.about-one__collage-side {
    flex: 2 1 0;
    display: flex;
    gap: 15px;
}

.about-one__collage-side-single {
    position: relative;
    border-radius: var(--verdicta-bdr-radius);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.about-one__collage-side-single img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* This particular photo is framed much further back (full torso, wide suit)
   than the other two headshots, so the standard crop leaves the face small
   against a lot of suit/tie. Scaling it up and anchoring near the top crops
   in tighter on the face specifically, without affecting the other photos. */
.about-one__collage-side-single img[src*="amari"] {
    transform: scale(1.35);
    transform-origin: 50% 15%;
}

@media only screen and (max-width: 575px) {
    .about-one__img--collage {
        flex-direction: column;
    }

    /* The desktop 3-across math (flex: 1 1 0 with a very tall 3/7 aspect
       ratio) only makes sense in a single row. On phones all three photos
       stack in one column, full width, at the same aspect ratio — so all
       three stay equal in size, matching the desktop layout, instead of
       one large photo on top of two smaller ones. */
    .about-one__collage-main,
    .about-one__collage-side-single {
        flex: none;
        aspect-ratio: 3 / 4;
    }

    .about-one__collage-side {
        flex: none;
        flex-direction: column;
    }

    /* The extra zoom on this photo (above) was tuned for the desktop tile's
       tall, narrow 3/7 shape. On this much wider 3/4 mobile tile the same
       fixed scale crops in far too tight, so it's dialed back here. */
    .about-one__collage-side-single img[src*="amari"] {
        transform: scale(1.1);
        transform-origin: 50% 20%;
    }
}

/* Buttons (thm-btn, used for every CTA site-wide): a green-to-black gradient
   fill, matching the reference site. Only the background changes here — the
   theme's own inline-block sizing and icon stay untouched, since switching
   display to flex for a divider/badge treatment (tried earlier) is what made
   the button stretch full-width instead of sizing to its own text. */
.thm-btn {
    background: linear-gradient(120deg, var(--verdicta-base) 0%, var(--verdicta-black) 100%);
}

/* Firm brand palette/typography. style.css defines these as CSS variables and
   references them (300+ times) instead of hardcoded colors, so redeclaring
   them here re-skins buttons, icons, borders and headings sitewide without
   touching a single vendored selector. --verdicta-gray-bg is intentionally
   left alone — it's also used for form inputs/pagination, where a green tint
   would look wrong — so the mint tint below is its own variable instead. */
:root {
    --verdicta-base: #1ea34c;
    --verdicta-base-rgb: 30, 163, 76;
    --verdicta-black: #0d0f0e;
    --verdicta-black-rgb: 13, 15, 14;
    --verdicta-font-two: "Playfair Display", Georgia, "Times New Roman", serif;
    --pa-mint-bg: #e7f8ec;
}

/* Tinted variant of the "Team One" section (attorney grid) so it isn't plain
   white — kept light (rather than the page's dark section color) since this
   section sits directly under the page header, which is already dark;
   stacking two dark blocks back to back looked heavy. */
.team-one--tinted {
    background: var(--pa-mint-bg);
}

/* Practice Areas carousel: mint tint to match the firm's brand background. */
.services-one {
    background-color: var(--pa-mint-bg);
}

/* Practice area cards: reshaped from the theme's stacked photo-then-white-card
   layout into the firm's own side-by-side photo + dark green panel, with a
   real two-zone "View Details" button (white label zone, green divider line,
   black icon zone) in place of a plain "Read more" text link. The floating
   hexagon icon badge is dropped since the reference cards don't carry one. */
.services-one__carousel .services-one__single {
    display: flex;
    align-items: stretch;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.services-one__carousel .services-one__single-img {
    flex: 0 0 42%;
    max-width: 42%;
    border-radius: 0;
}

.services-one__carousel .services-one__single-img img {
    height: 100%;
    object-fit: cover;
}

.services-one__carousel .services-one__single-content {
    flex: 1 1 auto;
    background: #0f3a24;
    padding: 40px 32px 32px;
}

.services-one__carousel .services-one__single-content .icon-box {
    display: none;
}

.services-one__carousel .services-one__single-content h2 a {
    color: var(--verdicta-white);
}

.services-one__carousel .services-one__single-content h2 a:hover {
    color: var(--pa-mint-bg);
}

.services-one__carousel .services-one__single-content p {
    color: rgba(255, 255, 255, 0.75);
}

/* Shared two-zone button (white label zone, green divider line, black icon
   zone) — used on dark-green panels: practice-area cards and the CTA banner
   below both reuse this same class instead of two copies of the same rules. */
.services-one__carousel .services-one__single-content .btn-box a,
.btn-split-white {
    display: flex;
    align-items: center;
    width: fit-content;
    height: 46px;
    padding-left: 22px;
    background: var(--verdicta-white);
    border-radius: 5px;
    color: var(--verdicta-black);
    overflow: hidden;
}

.services-one__carousel .services-one__single-content .btn-box a:hover,
.btn-split-white:hover {
    background: var(--pa-mint-bg);
    color: var(--verdicta-black);
}

.services-one__carousel .services-one__single-content .btn-box a span,
.btn-split-white span {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: none;
    width: 46px;
    margin-left: 16px;
    background: var(--verdicta-black);
    color: var(--verdicta-white);
    border-left: 2px solid var(--verdicta-base);
    font-size: 14px;
    top: 0;
}

@media only screen and (max-width: 767px) {
    .services-one__carousel .services-one__single {
        flex-direction: column;
    }

    .services-one__carousel .services-one__single-img {
        flex-basis: auto;
        max-width: 100%;
        height: 220px;
    }
}

/* CTA banner ("Ready To Discuss Your Legal Matter?" etc.): same side-by-side
   photo + dark green panel treatment as the practice-area cards above,
   in place of the theme's plain solid-color box. */
.cta-one__inner--split {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #1c6b3c 0%, #0f3a24 45%, var(--verdicta-black) 100%);
    padding: 0;
    overflow: hidden;
}

.cta-one__inner--split .cta-one__shape {
    display: none;
}

.cta-one__img {
    flex: 0 0 42%;
    max-width: 42%;
}

.cta-one__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-one__inner--split .cta-one__content {
    flex: 1 1 auto;
    padding: 60px 50px;
}

.cta-one__inner--split .cta-one__content p {
    color: rgba(255, 255, 255, 0.75);
}

@media only screen and (max-width: 767px) {
    .cta-one__inner--split {
        flex-direction: column;
    }

    .cta-one__img {
        flex-basis: auto;
        max-width: 100%;
        height: 220px;
    }

    .cta-one__inner--split .cta-one__content {
        padding: 32px 24px 40px;
    }
}

/* Homepage "Meet Our Legal Team" section: a dark panel with a wave divider on
   each edge, matching the firm's own site rather than an all-white page. Kept
   to the homepage teaser only — the full /attorneys.php directory stays on
   the light .team-one--tinted variant, where a long list of cards reads
   better on a light background. */
.team-one--dark {
    position: relative;
    background: linear-gradient(180deg, #1c6b3c 0%, #0f3a24 35%, var(--verdicta-black) 80%);
}

.team-one--dark .sec-title__tagline h4,
.team-one--dark .sec-title__title {
    color: var(--verdicta-white);
}

.team-one--dark::before,
.team-one--dark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.team-one--dark::before {
    top: 0;
    transform: translateY(-100%);
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C20%20C240%2C90%20480%2C90%20720%2C40%20C960%2C-10%201200%2C10%201440%2C50%20L1440%2C100%20L0%2C100%20Z%22%20fill%3D%22%231c6b3c%22%2F%3E%3Cpath%20d%3D%22M0%2C20%20C240%2C90%20480%2C90%20720%2C40%20C960%2C-10%201200%2C10%201440%2C50%22%20fill%3D%22none%22%20stroke%3D%22%231ea34c%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E");
}

.team-one--dark::after {
    bottom: 0;
    transform: translateY(100%);
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C80%20C240%2C10%20480%2C10%20720%2C60%20C960%2C110%201200%2C90%201440%2C50%20L1440%2C0%20L0%2C0%20Z%22%20fill%3D%22%230d0f0e%22%2F%3E%3Cpath%20d%3D%22M0%2C80%20C240%2C10%20480%2C10%20720%2C60%20C960%2C110%201200%2C90%201440%2C50%22%20fill%3D%22none%22%20stroke%3D%22%231ea34c%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E");
}

/* Attorney cards inside the dark section: give the name/role block its own
   white card face (the theme's default just prints text straight onto the
   section background, which disappears on black) and echo the small round
   accent badge from the firm's reference site. */
.team-one--dark .team-one__single-img-inner {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.team-one--dark .team-one__single-content {
    position: relative;
    background: var(--verdicta-white);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}

.team-one--dark .team-one__single-content::before {
    content: "\2197";
    position: absolute;
    top: -20px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--verdicta-base);
    color: var(--verdicta-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* Footer: green-to-black gradient instead of flat black, matching the buttons
   and other dark panels. The bottom copyright strip (site-footer__bottom)
   stays flat black — a solid anchor at the very base of the page. */
.site-footer {
    background: linear-gradient(180deg, #1c6b3c 0%, #0f3a24 20%, var(--verdicta-black) 55%);
}

/* Mobile menu panel: same gradient treatment — flat black previously, no
   competing dark elements sitting on top of it. */
.mobile-nav__content {
    background: linear-gradient(180deg, #1c6b3c 0%, #0f3a24 30%, var(--verdicta-black) 70%);
}

/* Homepage "About Phoenix Attorneys" section: unlike the sections above, this
   one starts out light with dark headings/body text, so a dark background
   here also means flipping that text to white/light — not just a background
   swap. The icon badges (green hexagon, white inner, black glyph) already
   read fine on dark and need no change. */
.about-one--dark {
    background: linear-gradient(135deg, #1c6b3c 0%, #0f3a24 45%, var(--verdicta-black) 100%);
}

.about-one--dark .about-one__content-text p {
    color: rgba(255, 255, 255, 0.8);
}

.about-one--dark .content-box h3 {
    color: var(--verdicta-white);
}

.about-one--dark .content-box p {
    color: rgba(255, 255, 255, 0.75);
}

.about-one--dark .sec-title__title {
    color: var(--verdicta-white);
}

/* Inner-page header banners (About, Attorneys, Articles, Contact, etc — not
   the homepage hero): the photo's dark tint becomes a green-to-black
   gradient tint instead of a flat one, still translucent enough to keep the
   photo visible underneath. */
.page-header__bg::before {
    background: linear-gradient(135deg, rgba(28, 107, 60, 0.7) 0%, rgba(13, 15, 14, 0.85) 100%);
}

/* Preloader: firm name instead of the template's three bouncing dots, on a
   green-to-black gradient background instead of the theme's plain white. */
.loader {
    background: linear-gradient(135deg, var(--verdicta-base) 0%, var(--verdicta-black) 100%);
}

.loader__brand {
    width: 160px;
    height: auto;
    margin: 0;
    animation: loader-brand-pulse 1.4s ease-in-out infinite;
}

@media (max-width: 400px) {
    .loader__brand {
        width: 130px;
    }
}

@keyframes loader-brand-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Attorney photo cards (homepage carousel + /attorneys.php grid): the theme's own rule
   only sets width:100% with no height, so each card's height follows whatever aspect
   ratio that attorney's uploaded photo happens to have — portrait vs. landscape photos
   produce visibly uneven card bottoms in a row, and on /attorneys.php it throws off the
   Isotope masonry grid's row-packing (it measures each card's real height, and photos of
   wildly different heights make that math misbehave, showing up as an oversized gap
   before the next row). Fixing every photo to the same aspect ratio makes each card's
   height fixed and predictable — a portrait ratio, since headshots are usually taller
   than wide — solving both at once.
   object-position is biased toward the top so a face near the top of the frame is never
   the part that gets cropped off; a little extra room below the shoulders is a much
   safer crop than a cropped forehead. */
.team-one__single-img-inner {
    aspect-ratio: 3 / 4;
}

.team-one__single-img-inner img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* A modest extra zoom on top of object-fit's own cropping — this trims more of the
       background off photos taken from further back (e.g. arms-crossed, torso-and-up
       shots), pulling them visually closer to a tighter headshot. It can only crop
       further in, though — it can't invent pixels a already-tight close-up photo
       doesn't have, so a very close crop and a very wide one will still look somewhat
       different. The real fix for that is asking attorneys for photos shot at a
       similar distance/framing to begin with. */
    transform: scale(1.15);
    transform-origin: center top;
}

/* Article body text alignment (Justify/Center/Right from the admin editor). The editor
   itself is styled by quill.snow.css, but that file isn't loaded on public pages, so
   these same ql-align-* classes need their own rule here for the published article to
   actually show the alignment the writer chose. */
.blog-details__content .ql-align-center {
    text-align: center;
}

.blog-details__content .ql-align-right {
    text-align: right;
}

.blog-details__content .ql-align-justify {
    text-align: justify;
}

/* Page header (the dark hero banner at the top of every inner page) never had a mobile
   padding override anywhere in the theme — style.css's 201px-top/198px-bottom padding
   was used unchanged on every screen size, including phones. That's excessive on its
   own, and turns genuinely bad once a long, multi-line title (a long article headline,
   say) is stacked on top of it. */
@media only screen and (max-width: 767px) {
    .page-header {
        padding: 110px 0px 90px;
    }
}

@media only screen and (max-width: 480px) {
    .page-header__inner h2 {
        font-size: 24px;
        line-height: 1.25em;
    }
}

/* WhatsApp float button. Bottom-left, deliberately — .scroll-to-top already owns the
   bottom-right corner (it's a thin vertical strip, but still), so this avoids overlap
   without needing to fight its z-index/positioning. */
.whatsapp-float {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.whatsapp-float:hover {
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 480px) {
    .whatsapp-float {
        left: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 25px;
    }
}