/* Punch's integration with the Azuriom core and plugin views. */
.punch-site { min-height: 100svh; display: flex; flex-direction: column; }
.punch-site #punch-main { flex: 1; min-width: 0; }
.punch-site img { max-width: 100%; }
:where(.punch-site) a { color: inherit; }
:where(.punch-site) a:hover { color: var(--punch-accent-hover); }
.punch-site .text-theme { color: var(--punch-accent); }
.punch-site :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }
.punch-site .punch-hero, .punch-site .punch-hero h1 { color: var(--punch-text); background-color: var(--punch-bg); }
.punch-site .punch-hero h1 { background: transparent; }
.punch-site .punch-hero-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--punch-bg) 50%, transparent), color-mix(in srgb, var(--punch-bg) 45%, transparent) 57%, var(--punch-bg)); }
.punch-site .punch-hero-description { color: var(--punch-text); }
.punch-site .punch-hero-actions { flex-wrap: wrap; }
.punch-site .punch-socials { flex-wrap: wrap; }
.punch-site .punch-page-content { min-height: 50svh; padding-top: calc(var(--navbar-height) + 48px); padding-bottom: 80px; }
.punch-site .punch-page-content > h1 { margin-bottom: 32px; font: 600 clamp(26px, 4vw, 40px)/1.3 var(--punch-font-display); }
.punch-site .punch-page-content > .container { padding-inline: 0; }
.punch-site .content { min-width: 0; }
.punch-site .user-html-content { overflow-wrap: anywhere; }
.punch-site .user-html-content :is(img, iframe, video) { max-width: 100%; }
.punch-site :is(.card-header, .card-footer) { border-color: var(--punch-line); padding: 16px 24px; }
.punch-site :is(.text-muted, .card-footer) { color: var(--punch-muted) !important; }
.punch-site :is(.post-preview, .card) .card-img-top { max-height: 360px; width: 100%; object-fit: cover; border-radius: 19px 19px 0 0; }
.punch-site :is(.table, .list-group, .accordion) { --bs-table-bg: var(--punch-surface); --bs-table-color: var(--punch-text); --bs-table-border-color: var(--punch-line); --bs-list-group-bg: var(--punch-surface); --bs-list-group-color: var(--punch-text); --bs-list-group-border-color: var(--punch-line); --bs-accordion-bg: var(--punch-surface); --bs-accordion-color: var(--punch-text); --bs-accordion-border-color: var(--punch-line); --bs-accordion-btn-bg: var(--punch-surface); --bs-accordion-btn-color: var(--punch-text); --bs-accordion-active-bg: var(--punch-surface-raised); --bs-accordion-active-color: var(--punch-accent); }
.punch-site .progress-bar { background: var(--punch-accent); color: var(--punch-on-accent); }
.punch-site .form-check-input:checked { background-color: var(--punch-accent); border-color: var(--punch-accent); }
.punch-site .page-link { color: var(--punch-accent); background: var(--punch-surface); border-color: var(--punch-line); }
.punch-site .page-item.active .page-link { background: var(--punch-accent); color: var(--punch-on-accent); }
.punch-site .punch-home-without-hero { padding-top: calc(var(--navbar-height) + 32px); }
.punch-project { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; gap: 48px; padding-block: 64px; }
.punch-project h2 { font: 600 clamp(24px, 3vw, 38px)/1.3 var(--punch-font-display); }
.punch-project p, .punch-info-grid p { color: var(--punch-muted); white-space: pre-line; max-width: 68ch; }
.punch-project iframe { border: 0; border-radius: var(--punch-radius-panel); }
.punch-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 64px; }
.punch-info-grid article { min-width: 0; }
.punch-info-grid i { font-size: 32px; color: var(--punch-accent); }
.punch-info-grid h2 { font-size: 22px; margin-block: 16px; }
.punch-site .punch-hero-description, .punch-site .crew-description, .punch-site .crew-intro { white-space: pre-line; overflow-wrap: anywhere; }
.punch-site :is(.crew-role, .crew-pick-name, .crew-skills li, .punch-footer-links a, .punch-footer-about p, .punch-news-heading p) { overflow-wrap: anywhere; }
.punch-site .punch-nav-link.is-current::after { background: var(--punch-accent); }
.punch-site ::selection { background: var(--punch-accent); color: var(--punch-on-accent); }
@media (max-width: 700px) {
    .punch-site .punch-page-content { padding-top: calc(var(--navbar-height) + 32px); padding-bottom: 48px; }
    .punch-info-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px; }
    .punch-project { gap: 24px; padding-block: 32px; }
}