/* Styling for the quark2-child footer override (templates/partials/footer.html.twig) */

.quark2-child-footer {
    padding: 2rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
}

.quark2-child-footer__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quark2-child-footer__copyright {
    opacity: 0.75;
}

.quark2-child-footer__links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}

.quark2-child-footer__links a {
    text-decoration: none;
    opacity: 0.85;
}

.quark2-child-footer__links a:hover {
    opacity: 1;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .quark2-child-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dark mode support, in case Quark 2's theme-mode toggle sets a data-theme attribute */
[data-theme="dark"] .quark2-child-footer {
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* ---------------------------------------------------------------------
   Modular "Blog Posts" block (templates/modular/blogposts.html.twig)
   --------------------------------------------------------------------- */

.modular-blogposts-header h2 {
    margin-bottom: 0.25rem;
}

.modular-blogposts-intro {
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.modular-blogposts-more {
    margin-top: 1.75rem;
    text-align: center;
}

.modular-blogposts-empty {
    opacity: 0.7;
}

/* Note: the post grid itself uses Quark 2's own .blog-grid class
   unmodified, so it keeps the theme's default responsive 1 / 2 / 3
   column behavior — no override needed here. */

/* ---------------------------------------------------------------------
   Modular "People" block (templates/modular/people.html.twig)
   --------------------------------------------------------------------- */

.modular-people-header h2 {
    margin-bottom: 0.25rem;
}

.modular-people-intro {
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.modular-people-empty {
    opacity: 0.7;
}

/* People cards reuse Quark 2's .card + .blog-grid (same grid as the Blog
   Posts module and the default blog listing), but use their own square
   photo treatment instead of .card-image's 16:9 crop. */
.person-card {
    text-align: center;
}

.person-photo {
    display: block;
}
.person-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.person-body {
    padding-top: 1.25rem;
}

.person-name {
    margin: 0 0 0.15rem;
    font-family: var(--pico-font-family-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--q2-text-strong);
}

.person-position {
    margin: 0 0 0.4rem;
    font-size: 0.875rem;
    color: var(--q2-text-muted);
}

.person-email {
    margin: 0;
}
.person-email a {
    font-size: 0.875rem;
    color: var(--q2-link);
    text-decoration: none;
    word-break: break-word;
}
.person-email a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Modular "Text + iFrame (GDPR)" block
   (templates/modular/text-iframe.html.twig, js/gdpr-iframe.js)
   --------------------------------------------------------------------- */

/* Reuses .modular-text's existing responsive columns/order-swap CSS
   (from quark2's own theme.css) unchanged — this box just replaces the
   image that would normally sit in the second column. */

.gdpr-iframe {
    position: relative;
    width: 100%;
    border-radius: var(--q2-radius-md);
    box-shadow: var(--q2-shadow-card);
    overflow: hidden;
    background: var(--q2-bg-muted);
}

.gdpr-iframe-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.gdpr-iframe-placeholder-inner {
    max-width: 32rem;
    text-align: center;
}

.gdpr-iframe-text {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--q2-text-muted);
}
.gdpr-iframe-text a {
    color: var(--q2-link);
}

.gdpr-iframe-frame,
.gdpr-iframe-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------------
   Custom blog item template (templates/item-image-top.html.twig)
   --------------------------------------------------------------------- */

/* Rounded corners on the image (still no crop — height stays auto so the
   native aspect ratio is preserved), and the gap below it is sized to
   roughly one line-height of the title (h2) that follows, using the same
   responsive clamp() as h2's own font-size (see quark2's theme.css) so it
   scales the same way across screen sizes. */
.blog-item-top-image {
    margin: 0 0 clamp(1.7rem, 2.9vw + 0.6rem, 2.45rem);
}
.blog-item-top-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--q2-radius-lg);
}

/* Reuses the Blog Posts module's .modular-blogposts-header class for the
   title block, matching its look — but this extra spacing below it (title
   -> breadcrumbs) is scoped to this template only, so it doesn't affect
   the Blog Posts module itself. */
.blog-item-image-top .modular-blogposts-header {
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------
   Header page title (templates/partials/base.html.twig header override)
   --------------------------------------------------------------------- */

/* The title is the flexible element that shrinks/truncates first; the
   nav (.desktop-menu) is pinned to its natural width via .has-page-title
   below, so nav items never get compressed or wrap to make room. */
.navbar-section.page-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.page-title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 1rem;
    border-left: 1px solid var(--q2-nav-border);
    font-family: var(--pico-font-family-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--q2-text-muted);
}

.navbar.has-page-title .desktop-menu {
    flex: 0 0 auto;
}

/* Hide below the theme's own nav breakpoint (matches where Quark 2
   already hides .desktop-menu / .actions in favor of the mobile
   hamburger menu), keeping the mobile header uncluttered. */
@media (max-width: 860px) {
    .navbar-section.page-title {
        display: none;
    }
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo svg,
.brand-logo img {
    display: block;
    height: 50px; /* adjust as needed */
    width: auto;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-line-1 {
    font-weight: 600;
}

.brand-line-2 {
    font-size: 0.9rem;
}