/* * styling specific to services.html, everything shared lives in style.css */

.page-hero,
.pricing-content,
.projects-content,
.faq-content,
.cta-content {
    max-width: 1200px;
}


/* * price sheet */
.pricing-intro {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.price-sheet {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
}

.price-sheet th,
.price-sheet td {
    padding: 1.5rem 1.25rem 1.65rem 0;
    vertical-align: top;
    font-weight: normal;
}

/* header row: legend on the left, one column per pack */
.price-sheet thead th,
.price-sheet thead td {
    vertical-align: bottom;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--secondary-black);
}

.price-sheet .price-key {
    width: 46%;
    padding-left: .75rem;
}

.price-key p {
    margin: .4rem 0 0;
    font-size: var(--fs-small);
}

.price-key p:first-child {
    margin-bottom: .75rem;
    opacity: .62;
}

.pack-head span {
    display: block;
}

.pack-audience {
    font-size: var(--fs-body);
    font-weight: bold;
    font-variant: small-caps;
    opacity: .62;
}

.pack-name {
    margin-top: .35rem;
    font-size: var(--fs-title);
    font-weight: bold;
    line-height: 1.05;
}

.pack-price {
    margin-top: 1.5rem;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: bold;
    line-height: 1;
}

.pack-note {
    margin-top: .6rem;
    font-size: var(--fs-small);
    line-height: 1.35;
    opacity: .7;
}

/* group labels ("Alltid inkludert", "Tillegg") */
.price-group th {
    padding: 3.5rem 0 .75rem .75rem;
    border-bottom: 1px solid rgba(1, 1, 1, .55);
    font-size: var(--fs-body);
    font-weight: bold;
    font-variant: small-caps;
}

.price-sheet tbody:first-of-type .price-group th {
    padding-top: 2.25rem;
}

.price-row {
    border-bottom: 1px solid rgba(1, 1, 1, .55);
    transition: background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .price-row:hover {
        background-color: color-mix(in srgb, var(--primary-purple) 14%, transparent);
    }
}

.price-row th {
    padding-left: .75rem;
}

.price-service {
    display: block;
    font-size: var(--fs-title);
    font-weight: bold;
    line-height: 1.05;
}

.price-description {
    display: block;
    max-width: 420px;
    margin-top: .65rem;
    font-size: var(--fs-body);
    line-height: 1.4;
}

.price-row td {
    padding-top: 1.75rem;
    font-size: var(--fs-lead);
    font-weight: bold;
}

/* markers, also used by the legend. both take up 1.1em so the values line up */
.is-included::before {
    content: "";
    display: inline-block;
    width: .55em;
    height: .55em;
    margin-right: .55em;
    border-radius: 50%;
    background-color: var(--primary-purple);
}

.is-addon::before {
    content: "+";
    display: inline-block;
    width: .6em;
    margin-right: .5em;
    font-weight: bold;
    color: var(--primary-purple);
}


/* * larger projects, laid out with .column-list from style.css.
   * margin-top auto pushes the price to the bottom so all three line up */
.column-item .project-price {
    margin-top: auto;
    padding-top: 1.75rem;
    font-weight: bold;
    font-variant: small-caps;
}


/* * FAQ */
.faq-intro p {
    opacity: .76;
}

.faq-intro a {
    color: var(--primary-purple);
}

.faq-list {
    max-width: 900px;
    margin-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid color-mix(in srgb, var(--tertiary-white) 22%, transparent);
}

.faq-item {
    border-bottom: 1px solid color-mix(in srgb, var(--tertiary-white) 22%, transparent);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
    list-style: none;
    cursor: pointer;
    font-size: var(--fs-title);
    font-weight: bold;
    line-height: 1.2;
    transition: color .2s ease;
}

/* hides the default triangle in Safari */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.4em;
    font-weight: normal;
    line-height: 1;
    color: var(--primary-purple);
    transition: transform .2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item summary:hover {
    color: var(--primary-purple);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--primary-purple);
    outline-offset: 4px;
}

/* direct children only, so the label inside #faq-button keeps the button's own styling */
.faq-item > p {
    max-width: 640px;
    margin: 0 0 1.75rem;
    font-size: var(--fs-body);
    line-height: 1.5;
    opacity: .76;
}

/* button under the process answer; style comes from style.css */
.faq-item #faq-button {
    margin: -.5rem 0 1.75rem;
}


/* * styling for mobile devices and small screens */
@media (max-width: 700px) {
    /* price sheet: each service gets a full-width row, with the two packs side by side underneath */
    .price-sheet,
    .price-sheet thead,
    .price-sheet tbody {
        display: block;
    }

    .price-sheet tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
    }

    .price-sheet thead tr {
        border-bottom: 2px solid var(--secondary-black);
    }

    .price-sheet thead th,
    .price-sheet thead td {
        border-bottom: none;
    }

    .price-sheet .price-key {
        grid-column: 1 / -1;
        width: auto;
        padding-bottom: 1rem;
    }

    /* subgrid shares each header line across both packs, so the prices line up even when text wraps */
    .pack-head {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        align-content: start;
    }

    .pack-audience {
        font-size: var(--fs-small);
    }

    .pack-name {
        font-size: var(--fs-lead);
    }

    .price-group th,
    .price-row th {
        grid-column: 1 / -1;
    }

    .price-row th {
        padding-bottom: 0px;
    }

    /* the pack name comes from data-pack and sits above the value; the marker and text share the second line */
    .price-row td {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding: 1rem .5rem 1.25rem .75rem;
    }

    .price-row td::after {
        content: attr(data-pack);
        grid-row: 1;
        grid-column: 1 / -1;
        margin-bottom: .3rem;
        font-size: var(--fs-small);
        font-weight: normal;
        opacity: .62;
    }

    .faq-item summary {
        gap: 1rem;
    }
}