/* PH7 typography and spacing. Shared across templates and languages. */
:root {
    --ph7-text-size: 0.875rem;
    --ph7-heading-size: 1rem;
    --ph7-text-line: 1.375rem;
    --ph7-heading-line: 1.25rem;
    --ph7-space-1: 4px;
    --ph7-space-2: 8px;
    --ph7-space-3: 12px;
    --ph7-space-4: 16px;
    --ph7-space-6: 24px;
    --ph7-space-8: 32px;
    --ph7-space-12: 48px;
    --ph7-pair-gap: 2px;
    --ph7-ci-size-offset: 2pt;
    --ph7-reading-width: 68ch;
    --ph7-content-width: 72rem;
    --ph7-page-gutter: 32px;
    --ph7-page-gutter-tablet: 32px;
    --ph7-page-gutter-mobile: 28px;
    --ph7-section-gap-lg: var(--ph7-space-8);
    --ph7-section-gap-md: var(--ph7-space-6);
    --ph7-thumb-wall-gutter: var(--ph7-space-3);
    --ph7-thumb-wall-row-gap: var(--ph7-space-6);
}

body.ph7-modern-ui,
body.page-template-page-header-lab {
    font-family: var(--font-primary);
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
    font-weight: 400;
    color: var(--color-secondary);
}

/* Keep a calm, consistent breathing space around the main content. */
.ph7-modern-ui #content {
    padding-top: var(--ph7-space-4);
}

/* These overrides bridge old Tatsu inline styles until block migration. */
.ph7-modern-ui #content .tatsu-text-inner {
    font-family: var(--font-primary);
    font-size: var(--ph7-text-size) !important;
    line-height: var(--ph7-text-line) !important;
    color: var(--color-secondary);
    max-width: var(--ph7-reading-width);
    padding: 0 !important;
}

.ph7-modern-ui #content .tatsu-text-inner :is(p, ul, ol, dl, div) {
    font-size: inherit !important;
    line-height: inherit !important;
}

.ph7-modern-ui #content .tatsu-text-inner :is(span, a, strong, b, em, i) {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 400;
}

.ph7-modern-ui #content :is(h1, h2, h3, h4, h5, h6),
.ph7-header-lab :is(h1, h2, h3, h4, h5, h6),
.ph7-modern-ui .portfolio-info__title {
    font-family: var(--font-heading) !important;
    font-size: var(--ph7-heading-size) !important;
    line-height: var(--ph7-heading-line) !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    color: var(--color-tertiary);
    margin: var(--ph7-space-6) 0 var(--ph7-space-2);
}

.ph7-modern-ui #content .tatsu-text-inner > :first-child {
    margin-top: 0;
}

.ph7-modern-ui #content .tatsu-text-inner :is(p, ul, ol, dl) {
    margin-top: 0;
    margin-bottom: var(--ph7-space-2);
}

.ph7-modern-ui #content .tatsu-text-inner :is(ul, ol) {
    padding-left: var(--ph7-space-6);
}

.ph7-modern-ui #content .tatsu-text-inner li {
    margin-bottom: var(--ph7-space-1);
}

.ph7-modern-ui #content .tatsu-text-inner > :last-child {
    margin-bottom: 0;
}

.ph7-modern-ui #content .tatsu-section-pad {
    padding-top: var(--ph7-space-8) !important;
    padding-bottom: var(--ph7-space-8) !important;
}

.ph7-modern-ui #content .tatsu-section-pad > .tatsu-row-wrap {
    width: calc(100% - var(--ph7-page-gutter) * 2);
    max-width: var(--ph7-content-width);
    margin-left: auto;
    margin-right: auto;
}

.ph7-modern-ui #content .tatsu-text-block-wrap {
    margin-bottom: var(--ph7-space-4);
}

.ph7-modern-ui #content .tatsu-row > .tatsu-column {
    margin-bottom: 0 !important;
}

/* Header and menu. Icon geometry is deliberately independent of text sizes. */
.ph7-header-lab {
    --ph7-header-lab-brand-text-size: calc(var(--ph7-heading-size) + 0.125rem);
    --ph7-header-lab-brand-gap: var(--ph7-space-4);
    --ph7-header-lab-brand-copy-offset-x: var(--ph7-space-2);
    --ph7-header-lab-brand-offset-y: 71px;
}

.ph7-header-lab__brand-copy {
    gap: var(--ph7-pair-gap);
    margin-top: var(--ph7-header-lab-brand-offset-y) !important;
    margin-bottom: 0 !important;
}

.ph7-header-lab__brand-title,
.ph7-header-lab__brand-subtitle {
    line-height: var(--ph7-heading-line);
    font-weight: 400;
}

.ph7-header-lab__nav-panel {
    padding: var(--ph7-space-6);
    padding-top: calc(var(--ph7-space-12) + var(--ph7-space-4));
}

.ph7-header-lab__languages {
    top: var(--ph7-space-3);
    left: var(--ph7-space-6);
    gap: var(--ph7-space-4);
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
}

.ph7-header-lab__menu > li > a,
.ph7-header-lab__menu .sub-menu a {
    font-size: var(--ph7-text-size);
    font-weight: 400;
    line-height: var(--ph7-text-line);
    letter-spacing: 0;
}

.ph7-header-lab__menu > li > a {
    padding: var(--ph7-space-1) 0;
}

.ph7-header-lab__menu .sub-menu {
    gap: var(--ph7-space-1);
    padding-bottom: var(--ph7-space-2);
}

/* Profile: name and occupation form one typographic unit. */
.ph7-modern-ui #content .ph7-profile__copy h1,
.ph7-modern-ui #content .ph7-profile__copy .ph7-profile__role {
    font-family: var(--font-heading);
    font-size: var(--ph7-heading-size) !important;
    line-height: var(--ph7-heading-line) !important;
    font-weight: 400;
    color: var(--color-secondary);
}

.ph7-modern-ui #content .ph7-profile__copy h1 {
    margin: 0 0 var(--ph7-pair-gap);
}

.ph7-modern-ui #content .ph7-profile__copy .ph7-profile__role {
    margin: 0 0 var(--ph7-space-4);
}

.ph7-profile__copy {
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
}

.ph7-profile__bio > div {
    gap: var(--ph7-space-3);
    margin-bottom: var(--ph7-space-1);
}

.ph7-modern-ui #content .ph7-profile__copy .ph7-profile__membership {
    margin: var(--ph7-space-4) 0 0;
}

/* Portfolio: one page gutter and one gap for every gallery type. */
.ph7-modern-ui .ph7-home-portfolio-page #content-wrap.ph7-home-portfolio-wrap,
.ph7-modern-ui .ph7-portfolio-template #content-wrap.no-page-builder {
    padding: var(--ph7-space-8) var(--ph7-page-gutter) 0 !important;
}

.ph7-modern-ui #content .ph7-portfolio-media--gallery {
    padding-left: 0;
    padding-right: 0;
    gap: var(--ph7-space-6);
}

.ph7-modern-ui #content .ph7-portfolio-media[data-ph7-masonry] {
    --ph7-masonry-gap: 28px;
}

.ph7-portfolio-media--single,
.ph7-portfolio-sidebar--single {
    padding-left: 0;
    padding-right: 0;
}

.ph7-modern-ui .portfolio-info,
.ph7-modern-ui .portfolio-info__item,
.ph7-modern-ui .portfolio-info .label {
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
    font-weight: 400;
}

.ph7-modern-ui .portfolio-info {
    margin-top: var(--ph7-space-6);
}

.ph7-modern-ui .portfolio-info__item {
    gap: var(--ph7-space-1) var(--ph7-space-2);
    margin-bottom: var(--ph7-space-1);
}

/* Portfolio copy is edited in Gutenberg and follows the same compact CI rhythm. */
.ph7-modern-ui #content .ph7-portfolio-copy {
    margin-top: var(--ph7-space-6);
    max-width: var(--ph7-reading-width);
    font-family: var(--font-primary);
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
    color: var(--color-secondary);
}

.ph7-modern-ui #content .ph7-portfolio-title {
    margin: 0 0 var(--ph7-space-2);
    font-family: var(--font-heading) !important;
    font-size: calc(var(--ph7-heading-size) + var(--ph7-ci-size-offset)) !important;
    line-height: var(--ph7-heading-line) !important;
    font-weight: 400 !important;
    color: var(--color-secondary);
}

.ph7-modern-ui #content .ph7-portfolio-description :is(p, ul, ol, h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    margin-bottom: var(--ph7-space-1);
    font-size: inherit;
    line-height: inherit;
    color: var(--color-secondary) !important;
}

.ph7-modern-ui #content .ph7-portfolio-description :is(strong, b, .label) {
    font-family: var(--font-heading);
    font-size: calc(1em + var(--ph7-ci-size-offset));
    font-weight: 400;
}

.ph7-modern-ui #content .ph7-portfolio-description a {
    color: var(--color-accent) !important;
}

.ph7-modern-ui .ph7-portfolio-navigation {
    max-width: var(--ph7-content-width);
    margin: var(--ph7-space-12) auto 0;
    padding: 0 var(--ph7-page-gutter);
}

.ph7-modern-ui .ph7-portfolio-navigation__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 52px;
}

.ph7-modern-ui .ph7-portfolio-navigation__arrow,
.ph7-modern-ui .ph7-portfolio-navigation__grid {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 160ms ease, opacity 160ms ease;
}

.ph7-modern-ui .ph7-portfolio-navigation__arrow {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 0;
    line-height: 0;
}

.ph7-modern-ui .ph7-portfolio-navigation__arrow span {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.ph7-modern-ui .ph7-portfolio-navigation__arrow span::after {
    content: '';
    position: absolute;
    top: 1px;
    width: 11px;
    height: 11px;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
}

.ph7-modern-ui .ph7-portfolio-navigation__arrow--previous span::after { left: 2px; transform: rotate(45deg); }
.ph7-modern-ui .ph7-portfolio-navigation__arrow--next span::after { right: 2px; border-width: 2px 2px 0 0; transform: rotate(45deg); }

.ph7-modern-ui .ph7-portfolio-navigation__arrow--previous { justify-content: flex-start; }
.ph7-modern-ui .ph7-portfolio-navigation__arrow--next { justify-content: flex-end; }

.ph7-modern-ui .ph7-portfolio-navigation__arrow:hover,
.ph7-modern-ui .ph7-portfolio-navigation__grid:hover {
    color: var(--color-secondary);
}

.ph7-modern-ui .ph7-portfolio-navigation__grid {
    display: inline-flex;
    padding: 8px;
}

.ph7-modern-ui .ph7-portfolio-navigation__grid span {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 2px;
}

.ph7-modern-ui .ph7-portfolio-navigation__grid i {
    display: block;
    width: 4px;
    height: 4px;
    background: currentColor;
}

/* Contact pages use the same readable measure and page gutters as the rest of PH7. */
.ph7-modern-ui #content.ph7-simple-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ph7-content-width);
    margin: 0 auto;
    padding: var(--ph7-space-12) var(--ph7-page-gutter) var(--ph7-space-12);
}

.ph7-modern-ui .ph7-simple-page__inner {
    width: 100%;
    max-width: var(--ph7-content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--ph7-space-8);
}

.ph7-modern-ui .ph7-simple-page__intro {
    max-width: var(--ph7-reading-width);
    margin: 0 0 var(--ph7-space-6);
    grid-column: 1;
    grid-row: 1;
}

.ph7-modern-ui .ph7-simple-page__intro h1 {
    margin: 0 0 var(--ph7-space-2);
    font-family: var(--font-heading) !important;
    font-size: var(--ph7-heading-size) !important;
    line-height: var(--ph7-heading-line) !important;
    font-weight: 400 !important;
}

.ph7-modern-ui .ph7-simple-page__intro p,
.ph7-modern-ui .ph7-contact-form p {
    margin: 0 0 var(--ph7-space-2);
    font-family: var(--font-primary);
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
}

.ph7-modern-ui .ph7-contact-form p:last-of-type {
    margin-top: var(--ph7-space-4);
}

.ph7-modern-ui .ph7-contact-form input,
.ph7-modern-ui .ph7-contact-form textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--ph7-space-2) var(--ph7-space-3);
    border: 1px solid var(--color-secondary);
    border-radius: 0;
    background: transparent;
    color: var(--color-tertiary);
    font-family: var(--font-primary);
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
}

.ph7-modern-ui .ph7-contact-form textarea {
    min-height: 136px;
    max-height: 60vh;
    resize: vertical !important;
    overflow-y: auto;
}

.ph7-modern-ui .ph7-contact-form input:focus,
.ph7-modern-ui .ph7-contact-form textarea:focus {
    border-color: var(--color-accent);
    outline: 2px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
    outline-offset: 1px;
}

.ph7-modern-ui .ph7-contact-form button {
    padding: var(--ph7-space-2) var(--ph7-space-4);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
    cursor: pointer;
}

.ph7-modern-ui .ph7-contact-form button:hover,
.ph7-modern-ui .ph7-contact-form button:focus-visible {
    background: var(--color-tertiary);
    border-color: var(--color-tertiary);
}

.ph7-modern-ui .ph7-contact-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ph7-modern-ui .ph7-contact-form__status {
    color: var(--color-tertiary);
}

.ph7-modern-ui .ph7-contact-page__layout {
    display: contents;
}

.ph7-modern-ui .ph7-contact-page__layout .ph7-contact-map {
    min-width: 0;
}

.ph7-modern-ui .ph7-contact-page__layout .ph7-contact-form {
    grid-column: 1;
    grid-row: 2;
}

.ph7-modern-ui .ph7-contact-page__layout .ph7-contact-map {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: var(--ph7-space-6);
}

.ph7-modern-ui .ph7-contact-map {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--color-secondary) 35%, transparent);
    background: var(--background-color);
}

.ph7-modern-ui .ph7-contact-map__viewport {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.ph7-modern-ui .ph7-contact-map__viewport {
    display: block;
    width: 100%;
}

.ph7-modern-ui .ph7-contact-map iframe {
    display: block;
    width: 100%;
    height: 320px;
}

.ph7-modern-ui .ph7-contact-map--static {
    position: relative;
}

.ph7-modern-ui .ph7-contact-map__svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ph7-modern-ui .ph7-contact-map__canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ph7-surface, #f4f4f2);
}

.ph7-modern-ui .ph7-contact-map:not(.is-map-ready) .ph7-contact-map__canvas { visibility: hidden; }
.ph7-modern-ui .ph7-contact-map.is-map-ready .ph7-contact-map__svg { visibility: hidden; }
.ph7-modern-ui .ph7-contact-map .maplibregl-map,
.ph7-modern-ui .ph7-contact-map .maplibregl-canvas { width: 100%; height: 100%; }
.ph7-modern-ui .ph7-contact-map .maplibregl-ctrl-group { border-radius: 0; box-shadow: 0 2px 8px rgba(16,35,52,.16); }
.ph7-modern-ui .ph7-contact-map .maplibregl-popup-content { font-family: var(--ph7-font-body, Helvetica, Arial, sans-serif); color: var(--ph7-blue, #17324d); }

.ph7-modern-ui .ph7-contact-map__caption {
    position: absolute;
    z-index: 2;
    top: var(--ph7-space-4);
    left: var(--ph7-space-4);
    display: grid;
    gap: var(--ph7-space-1);
    font-family: var(--font-heading);
    color: var(--color-tertiary);
}

.ph7-modern-ui .ph7-contact-map__caption span {
    font-family: var(--font-primary);
    font-size: var(--ph7-text-size);
}

.ph7-modern-ui .ph7-contact-map__caption small {
    font-family: var(--font-primary);
    font-size: 0.6875rem;
}

.ph7-modern-ui .ph7-contact-map__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ph7-space-3) var(--ph7-space-4);
    padding: var(--ph7-space-3) var(--ph7-space-4);
    background: var(--background-color);
    border-top: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.ph7-modern-ui .ph7-contact-map__link {
    color: var(--color-accent);
    font-size: var(--ph7-text-size);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 860px) {
    .ph7-modern-ui .ph7-simple-page__inner {
        display: block;
    }

    .ph7-modern-ui .ph7-contact-page__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ph7-space-6);
    }

    .ph7-modern-ui .ph7-contact-page__layout .ph7-contact-form,
    .ph7-modern-ui .ph7-contact-page__layout .ph7-contact-map {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
    }
}

/* Forms use the same two size steps, with consistent field spacing. */
.ph7-modern-ui #content :is(input, textarea, select) {
    font-family: var(--font-primary);
    font-size: var(--ph7-heading-size) !important;
    line-height: var(--ph7-text-line) !important;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-secondary);
}

.ph7-modern-ui #content :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select) {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 var(--ph7-space-4) !important;
    padding: var(--ph7-space-2) var(--ph7-space-3);
}

.ph7-modern-ui #content :is(input[type="submit"], button[type="submit"]) {
    font-size: var(--ph7-text-size) !important;
    line-height: var(--ph7-text-line) !important;
    padding: var(--ph7-space-2) var(--ph7-space-4);
    margin: 0;
}

.ph7-modern-ui #content :is(.contact_form, .wpcf7) {
    padding-bottom: 0 !important;
}

.ph7-modern-ui #content textarea {
    min-height: 136px;
    height: auto;
    max-height: 60vh;
    resize: vertical !important;
    overflow-y: auto;
}

.ph7-modern-ui #content :is(input[type="submit"], button[type="submit"]) {
    color: var(--background-color) !important;
}

.ph7-modern-ui #content .contact_status {
    margin: var(--ph7-space-4) 0;
}

.ph7-modern-ui #content .wpcf7-form p {
    margin-bottom: 0;
}

/* Footer has the same text measures and spacing as the rest of the site. */
.ph7-modern-ui .site-footer {
    margin-top: calc(var(--ph7-space-12) + var(--ph7-space-6));
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
}

.ph7-modern-ui .footer-container {
    gap: var(--ph7-space-6);
    padding: 0 var(--ph7-page-gutter) var(--ph7-space-6);
}

.ph7-modern-ui .footer-column {
    min-width: 0;
    max-width: none;
}

.ph7-modern-ui .footer-column h3 {
    font-size: var(--ph7-heading-size);
    line-height: var(--ph7-heading-line);
    font-weight: 400;
    margin: 0 0 var(--ph7-space-2);
}

.ph7-modern-ui .footer-column :is(p, ul, a) {
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
}

.ph7-modern-ui .footer-column ul li {
    margin-bottom: var(--ph7-space-1);
}

@media (max-width: 860px) {
    .ph7-header-lab__brand {
        /* Keep the stacked wordmark visually close to the logo. */
        gap: 2px;
    }
}

@media (max-width: 767px) {
    .ph7-modern-ui #content .tatsu-section-pad {
        padding-top: var(--ph7-space-6) !important;
        padding-bottom: var(--ph7-space-6) !important;
    }

    .ph7-modern-ui #content .tatsu-row > .tatsu-column:not(:last-child) {
        margin-bottom: var(--ph7-space-6) !important;
    }

    .ph7-modern-ui .ph7-home-portfolio-page #content-wrap.ph7-home-portfolio-wrap,
    .ph7-modern-ui .ph7-portfolio-template #content-wrap.no-page-builder {
        padding-top: var(--ph7-space-6) !important;
    }

    .ph7-modern-ui #content .ph7-portfolio-media--gallery {
        gap: var(--ph7-space-4);
    }

    .ph7-modern-ui #content .ph7-portfolio-media[data-ph7-masonry] {
        --ph7-masonry-gap: 20px;
    }

    .ph7-modern-ui .ph7-portfolio-navigation {
        margin-top: var(--ph7-space-8);
        padding: 0 var(--ph7-space-4);
    }
}

/* Preview pages use the same typography as published content. */
.ph7-header-lab__lead,
.ph7-header-lab__eyebrow,
.ph7-header-lab__nav-copy,
.ph7-header-lab__card,
.ph7-header-lab__card span,
.ph7-header-lab__grid p {
    font-size: var(--ph7-text-size);
    line-height: var(--ph7-text-line);
    color: var(--color-secondary);
}

.ph7-header-lab__card strong {
    font-size: var(--ph7-heading-size);
    line-height: var(--ph7-heading-line);
    font-weight: 400;
}

.ph7-header-lab__hero,
.ph7-header-lab__grid,
.ph7-header-lab__hero-cards {
    gap: var(--ph7-space-6);
}

.ph7-header-lab__hero {
    min-height: 0;
    padding: var(--ph7-space-12) 0 var(--ph7-space-8);
}

.ph7-header-lab__card,
.ph7-header-lab__grid article {
    padding: var(--ph7-space-6);
}