/*
 * /clientportal: Business and Commercial Law.
 * Design rules for this portal only. Loaded after site.css by Areas/ClientPortal/Views/Shared/_Layout.cshtml.
 * Identity: boardroom hero with the visiting card's double gold stripes, practice areas as a corporate list,
 * and About Us on charcoal.
 */

/* A darker, charcoal-led version of the burgundy theme colour for dark surfaces. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .portal--clientportal {
        --deep: color-mix(in srgb, var(--brand) 42%, #0b0d12);
        /* Derived colours are computed where they are declared, so they are restated with the new --deep. */
        --deep-veil: color-mix(in srgb, var(--deep) 90%, transparent);
        --deep-veil-soft: color-mix(in srgb, var(--deep) 42%, transparent);
        --hero-veil: color-mix(in srgb, var(--deep) 80%, transparent);
    }
}

/* The two diagonal gold stripes from the visiting card. */
@media (min-width: 64rem) {
    .portal--clientportal .hero--stripes::after {
        content: "";
        position: absolute;
        top: var(--header-height);
        bottom: -12%;
        right: 12%;
        width: 6.5rem;
        background: linear-gradient(90deg, var(--accent) 0 13%, transparent 13% 40%, var(--accent) 40% 53%, transparent 53%);
        opacity: .85;
        transform: skewX(17deg);
        pointer-events: none;
    }

    .portal--clientportal .hero--stripes .hero__content { max-width: 40rem; }
}

/* Practice areas as a list: number, title and summary, arrow. */
.portal--clientportal .practice--list .card-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}

.portal--clientportal .practice--list .card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas:
        "num title"
        "num text"
        "num more";
    column-gap: 1.25rem;
    padding: 1.9rem .5rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.portal--clientportal .practice--list .card::before { display: none; }
.portal--clientportal .practice--list .card:hover { transform: translateX(6px); box-shadow: none; }
.portal--clientportal .practice--list .card__link::after { border-radius: 0; }

.portal--clientportal .practice--list .card__num { grid-area: num; margin: .15rem 0 0; font-size: 1.9rem; }
.portal--clientportal .practice--list .card__title { grid-area: title; margin-bottom: .35rem; }
.portal--clientportal .practice--list .card__text { grid-area: text; margin-bottom: .8rem; }
.portal--clientportal .practice--list .card__more { grid-area: more; }

@media (min-width: 48rem) {
    .portal--clientportal .practice--list .card {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
        grid-template-areas:
            "num title more"
            "num text more";
        column-gap: 2rem;
        padding: 2.2rem 1rem;
    }

    .portal--clientportal .practice--list .card__text { margin-bottom: 0; max-width: 46rem; }
    .portal--clientportal .practice--list .card__more { align-self: center; }
}

/* Corporate squared buttons for this portal. */
.portal--clientportal .btn { border-radius: 0; }

.portal--clientportal .about--dark .about__frame::before { top: -1.75rem; right: -1.75rem; }

/* ------------------------------------------------------------------ Fee Structure page (site/fee-structure.php) */
.portal--clientportal .fees--tint { background: var(--ivory); }

.portal--clientportal .fee-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow-lift);
}

.portal--clientportal .fee-table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.portal--clientportal .fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    color: var(--text);
}

.portal--clientportal .fee-table th,
.portal--clientportal .fee-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.portal--clientportal .fee-table tbody tr:last-child th,
.portal--clientportal .fee-table tbody tr:last-child td { border-bottom: 0; }

.portal--clientportal .fee-table thead th {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--deep);
    border-bottom: 2px solid var(--accent);
}

.portal--clientportal .fee-table tbody th { font-weight: 500; color: var(--ink); }
.portal--clientportal .fee-table tbody tr:nth-child(even) { background: var(--ivory); }

.portal--clientportal .fee-table__num { text-align: center !important; font-variant-numeric: tabular-nums; }
.portal--clientportal .fee-table__charge { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.portal--clientportal .fee-table__none { color: var(--muted); }

.portal--clientportal .fee-table__price-row th,
.portal--clientportal .fee-table__price-row td { background: var(--gold-soft); }

.portal--clientportal .fee-table__price {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
}

.portal--clientportal .fee-table--compare { min-width: 20rem; }
.portal--clientportal .fee-table--compare thead th:first-child,
.portal--clientportal .fee-table--compare tbody th { width: 34%; }

/* Phones: the comparison table fits the screen (it scrolls sideways only on very narrow screens). */
@media (max-width: 40rem) {
    .portal--clientportal .fee-table th,
    .portal--clientportal .fee-table td { padding: .8rem .65rem; }
    .portal--clientportal .fee-table--compare { font-size: .86rem; }
    .portal--clientportal .fee-table--compare thead th { font-size: .62rem; letter-spacing: .06em; }
    .portal--clientportal .fee-table__price { font-size: 1.08rem; }
}

/* The three packages as cards: what each one includes. */
.portal--clientportal .fee-packages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: clamp(2.25rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .portal--clientportal .fee-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.portal--clientportal .fee-package {
    padding: 1.9rem 1.75rem 1.75rem;
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    background: var(--paper);
}

.portal--clientportal .fee-package__name { margin: 0 0 .4rem; font-size: 1.3rem; }

.portal--clientportal .fee-package__price {
    margin: 0 0 1.25rem;
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--ink);
}

.portal--clientportal .fee-package__from {
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-ink);
    vertical-align: middle;
}

.portal--clientportal .fee-package__label {
    margin: 0 0 .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.portal--clientportal .fee-package__list { margin: 0; padding: 0; list-style: none; }

.portal--clientportal .fee-package__list li {
    position: relative;
    padding: .3rem 0 .3rem 1.4rem;
    color: var(--text);
}

.portal--clientportal .fee-package__list li::before {
    content: "";
    position: absolute;
    top: .95em;
    left: 0;
    width: .55rem;
    height: 2px;
    background: var(--accent);
}

/* What the services cover. */
.portal--clientportal .fee-services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .portal--clientportal .fee-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal--clientportal .fee-service {
    padding: 1.75rem 1.75rem 1.6rem;
    border-left: 3px solid var(--accent);
    background: var(--paper);
}

.portal--clientportal .fee-service__title { margin: 0 0 .55rem; font-size: 1.25rem; }
.portal--clientportal .fee-service__text { margin: 0; color: var(--text); }

/* Page limits and add-on charges side by side on wide screens. */
.portal--clientportal .fee-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 64rem) {
    .portal--clientportal .fee-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal--clientportal .fee-column { min-width: 0; }
.portal--clientportal .fee-column__title { margin-bottom: 1.4rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.portal--clientportal .fee-text { margin: 1.4rem 0 0; color: var(--text); }

.portal--clientportal .fee-note {
    margin: 1.2rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--accent);
    background: var(--ivory);
    color: var(--ink);
}

.portal--clientportal .fee-note__label {
    display: block;
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

/* Terms of Service: numbered clauses, two columns on wide screens. */
.portal--clientportal .fee-terms {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 clamp(2rem, 5vw, 4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 64rem) {
    .portal--clientportal .fee-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal--clientportal .fee-term {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}

.portal--clientportal .fee-term__num {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--gold-num);
}

.portal--clientportal .fee-term__title { margin: 0 0 .45rem; font-size: 1.12rem; }
.portal--clientportal .fee-term__text { margin: 0; font-size: .95rem; color: var(--text); }

/* ------------------------------------------------------------------ Fee Structure on the home page (fee-summary.php) */
.portal--clientportal .fee-summary { color: rgba(255, 255, 255, .78); background: var(--charcoal); }
.portal--clientportal .fee-summary .eyebrow { color: var(--gold-light); }
.portal--clientportal .fee-summary .section-title { color: #fff; }
.portal--clientportal .fee-summary .section-lead { color: rgba(255, 255, 255, .72); }

.portal--clientportal .fee-summary__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .portal--clientportal .fee-summary__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

.portal--clientportal .fee-summary__item {
    padding: 1.75rem 1.75rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-top: 3px solid var(--accent);
    background: rgba(255, 255, 255, .04);
}

.portal--clientportal .fee-summary__name { margin: 0 0 .6rem; font-size: 1.3rem; color: #fff; }

.portal--clientportal .fee-summary__price {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 600;
    color: #fff;
}

.portal--clientportal .fee-summary__from {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.portal--clientportal .fee-summary__actions { margin: clamp(2rem, 4vw, 2.75rem) 0 0; }