/*
 * Global styles — Berkeley Risk and Security Lab
 * Typography, element defaults, layout utilities.
 * Depends on: assets/css/tokens.css
 *
 * Heading hierarchy (from Penpot design tokens):
 *   .page-hero__title  60px serif 500  — handled in components/page-hero.css
 *   h1                 48px serif 500  — contenthead.title
 *   h2                 40px serif 600  — text.header1
 *   h3                 30px serif 600  — text.header2
 *   h4                 24px serif 500  — general sub-section
 *   h5/h6              sans-serif      — UI labels, metadata
 */

/* -------------------------------------------------------------------------
 * Base reset / box model
 * ----------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* No border-radius on inputs or buttons site-wide.
 * Circular buttons are a separate pattern handled at the component level. */
input,
textarea,
select,
button,
[type="submit"] {
    border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Body
 * ----------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-black);
    background-color: var(--color-white);
    overflow-x: clip; /* prevent horizontal scrollbar from alignment breakouts */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
 * Headings
 * ----------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family:   var(--font-serif);
    line-height:   var(--leading-snug); /* 1.2 */
    color:         var(--color-blue-dark);
    text-wrap:     balance;
    margin-top:    0;
    margin-bottom: var(--space-4);
}

/* contenthead.title — 48px, weight 500 */
h1 {
    font-size:   clamp(2rem, 4vw, var(--text-6xl));
    font-weight: var(--font-weight-medium);
}

/* text.header1 — 40px, weight 600 */
h2 {
    font-size:   clamp(1.75rem, 3.5vw, var(--text-5xl)); /* 28px → 40px */
    font-weight: var(--font-weight-semibold); /* 600 */
}

/* text.header2 — 30px, weight 600 */
h3 {
    font-size:   clamp(1.5rem, 2.5vw, var(--text-3xl));
    font-weight: var(--font-weight-semibold);
}

/* 24px, weight 500 */
h4 {
    font-size:   clamp(1.375rem, 2vw, var(--text-2xl));
    font-weight: var(--font-weight-medium);
}

/* h5/h6 — sans-serif UI labels */
h5, h6 {
    font-family:   var(--font-sans);
    line-height:   var(--leading-snug);
    color:         var(--color-blue-dark);
    margin-top:    0;
    margin-bottom: var(--space-4);
}

h5 {
    font-size:   var(--text-medium);
    font-weight: var(--font-weight-semibold);
}

h6 {
    font-size:   var(--text-base);
    font-weight: var(--font-weight-semibold);
}

/* -------------------------------------------------------------------------
 * Body copy
 * ----------------------------------------------------------------------- */
p {
    margin-top: 0;
    margin-bottom: var(--space-4);
    text-wrap: pretty;
}

/* Block style "Intro" — gentler lead paragraph for section intros.
   Applied via Styles panel on core/paragraph blocks. */
p.is-style-intro {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-medium), 2vw, var(--text-2xl));
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-loose);
    color: var(--color-blue-dark);
    text-wrap: pretty;
}

/* -------------------------------------------------------------------------
 * Inline code
 * ----------------------------------------------------------------------- */
code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875em;
    background-color: var(--color-neutral-warm-light);
    padding: 0.15em 0.35em;
}

/* -------------------------------------------------------------------------
 * Links — text.link
 * ----------------------------------------------------------------------- */
a {
    color: var(--color-berkeley-blue);
    text-decoration-line: none;
    text-decoration-thickness: var(--underline-thickness);
    text-underline-offset: var(--underline-offset);
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-blue-medium);
}

/* Inline text links get underline per Penpot spec */
p a,
li a {
    text-decoration-line: underline;
}

/* -------------------------------------------------------------------------
 * Lists
 * ----------------------------------------------------------------------- */
ul,
ol {
    margin-top: 0;
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

ul {
    list-style-type: square;
}

ul > li::marker {
    color: var(--color-blue-medium);
}

ul ul > li::marker {
    color: var(--color-neutral-warm-mid);
}

li + li {
    margin-top: var(--space-1);
}

/* Even spacing around nested lists */
li > ul,
li > ol {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

/* -------------------------------------------------------------------------
 * Blockquotes
 * ----------------------------------------------------------------------- */
blockquote,
.wp-block-quote,
.wp-block-verse {
    border-left: 4px solid var(--color-keyline);
    padding: var(--space-5) var(--space-6);
    margin-inline: 0;
    margin-block: var(--space-6);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: normal;
    color: var(--color-neutral-warm-dark);
    background-color: var(--color-neutral-warm-light);
}

.wp-block-verse {
    font-style: italic;
}

/* On warm backgrounds, bump to cream for contrast */
.content-section--warm blockquote,
.content-section--warm .wp-block-quote,
.content-section--warm .wp-block-verse,
.section-block--warm blockquote,
.section-block--warm .wp-block-quote,
.section-block--warm .wp-block-verse {
    background-color: var(--color-cream);
}

blockquote p,
.wp-block-quote p {
    margin-block: 0 var(--space-3);
}

blockquote p:last-child,
.wp-block-quote p:last-child {
    margin-block-end: 0;
}

blockquote cite,
.wp-block-quote cite {
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    margin-block-start: var(--space-3);
}

@container (min-width: 500px) {
    blockquote,
    .wp-block-quote,
    .wp-block-verse {
        margin-inline: var(--space-8);
    }
}

/* -------------------------------------------------------------------------
 * Keylines / dividers
 * ----------------------------------------------------------------------- */
hr {
    border: none;
    border-top: 1px solid var(--color-keyline);
    margin-block: var(--space-8);
}

/* -------------------------------------------------------------------------
 * Layout utilities
 * ----------------------------------------------------------------------- */

/* Main content container */
.brsl-container {
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--site-padding);
}


/* -------------------------------------------------------------------------
 * Editor hints — empty-state messages shown only in the block editor
 * ----------------------------------------------------------------------- */
.editor-hint {
    font-family: var(--font-sans);
    font-size: var(--text-medium);
    color: currentColor;
    opacity: 0.4;
    padding: var(--space-8) var(--space-5);
    margin: 0;
}

.editor-hint::before {
    content: "";
    display: inline-block;
    vertical-align: -0.15em;
    margin-inline-end: 0.4em;
    width: 1em;
    height: 1em;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
 * Details / collapsible sections
 * ----------------------------------------------------------------------- */
details:not(.course-tile) {
    border: 1px solid var(--color-keyline);
    margin-block-end: var(--space-3);
}

details[open]:not(.course-tile) {
    padding-block-end: var(--space-6);
}

details:not(.course-tile) summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-medium);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-dark);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

details:not(.course-tile) summary::-webkit-details-marker {
    display: none;
}

details:not(.course-tile) summary:hover {
    background-color: var(--color-neutral-warm-light);
}

details[open]:not(.course-tile) summary {
    border-bottom: 1px solid var(--color-keyline);
    color: var(--color-blue-medium);
}

details:not(.course-tile) > *:not(summary) {
    padding-inline: var(--space-5);
    max-width: none;
}

/* Summary icon — + rotates to x on open */

details:not(.course-tile) summary::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-inline-start: var(--space-4);
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cline x1='7' y1='1' x2='7' y2='13' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='1' y1='7' x2='13' y2='7' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cline x1='7' y1='1' x2='7' y2='13' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='1' y1='7' x2='13' y2='7' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    transform-origin: center;
    transition: transform var(--transition-base);
}

details[open]:not(.course-tile) summary::after {
    transform: rotate(135deg);
}

/* Heading resets inside summary */

details:not(.course-tile) summary h2,
details:not(.course-tile) summary h3,
details:not(.course-tile) summary h4,
details:not(.course-tile) summary h5 {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* Fade-down animation on open */

@keyframes details-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

details[open]:not(.course-tile) > *:not(summary) {
    animation: details-fade-in 0.4s ease both;
}

/* Dark background overrides (navy, blue content-sections and covers) */

.content-section--dark details:not(.course-tile),
.wp-block-cover:not(.is-light) details:not(.course-tile) {
    border-color: rgba(255, 255, 255, 0.25);
}

.content-section--dark details:not(.course-tile) summary,
.wp-block-cover:not(.is-light) details:not(.course-tile) summary {
    color: var(--color-white);
}

.content-section--dark details:not(.course-tile) summary:hover,
.wp-block-cover:not(.is-light) details:not(.course-tile) summary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.content-section--dark details[open]:not(.course-tile) summary,
.wp-block-cover:not(.is-light) details[open]:not(.course-tile) summary {
    border-bottom-color: rgba(255, 255, 255, 0.25);
    color: var(--color-blue-light);
}

.content-section--dark details:not(.course-tile) > *:not(summary),
.wp-block-cover:not(.is-light) details:not(.course-tile) > *:not(summary) {
    color: var(--color-white);
}

/* -------------------------------------------------------------------------
 * Tables
 * ----------------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 0;
}

th,
td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-keyline);
    text-align: left;
    vertical-align: top;
}

th {
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-dark);
}

/* Footer styles live in assets/css/components/footer.css */

/* -------------------------------------------------------------------------
 * WordPress block layout overrides
 * ----------------------------------------------------------------------- */

/* Full-height layout — footer anchored to viewport bottom on short pages.
 * flex-column on the site shell + flex: 1 on <main> so it grows to fill
 * any remaining space. Not sticky/fixed — just prevents a gap below footer. */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.wp-site-blocks > main {
    flex: 1 0 auto;
}

/* WP constrained-layout zeroes margin-block-end on all direct children.
 * Restore bottom margin on headings so there's space before body text. */
:root :where(.is-layout-constrained) > :where(h1, h2, h3, h4) {
    margin-block-end: var(--space-6);
}

/* WP core adds margin-block-start: 24px to all .wp-site-blocks > * children.
 * Zero it out for main and footer — section/block padding handles all
 * vertical rhythm; we don't want gaps between template parts. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
    margin-block-start: 0;
}


/* -------------------------------------------------------------------------
 * The Events Calendar — strip default chrome
 * ----------------------------------------------------------------------- */

/* TEC wraps single events in constrained containers that prevent alignfull
   from breaking out. Reset these so our Blockstudio blocks own the layout.
   #tribe-events-pg-template has max-width:1048px via ID selector (0-1-0-0)
   in tribe-events-single-skeleton.css — must match specificity. */
.tec-block__single-event,
#tribe-events-pg-template {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hide TEC's default spinner and empty "before html" div. */
.tribe-events-ajax-loading,
.tribe-events-before-html:empty {
    display: none;
}

/* -------------------------------------------------------------------------
 * Accessibility
 * ----------------------------------------------------------------------- */

/* Skip to main content — visually hidden until focused via keyboard.
   Injected at top of <body> via wp_body_open hook in functions.php. */
.skip-to-content {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 9999;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-white);
    color: var(--color-blue-dark);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    text-decoration-line: none;
    border: 2px solid var(--color-blue-dark);
    /* Hidden off-screen until focused */
    transform: translateY(calc(-100% - var(--space-8)));
    transition: transform var(--transition-base);
}

.skip-to-content:focus {
    transform: translateY(0);
    outline: 3px solid var(--color-berkeley-blue);
    outline-offset: 2px;
}

/* Global focus ring — use :focus-visible so mouse clicks don't show ring.
   3px solid with offset gives a clear, high-contrast indicator. */
*:focus-visible {
    outline: 3px solid var(--color-berkeley-blue);
    outline-offset: 2px;
}

/* On dark backgrounds — use a light focus ring */
.site-footer *:focus-visible,
.page-hero *:focus-visible,
.content-section--dark *:focus-visible,
.section-block--dark *:focus-visible,
.wp-block-cover:not(.is-light) *:focus-visible {
    outline-color: var(--color-blue-light);
}

/* Remove default outline in browsers that support :focus-visible,
   to avoid double-outlines */
*:focus:not(:focus-visible) {
    outline: none;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .skip-to-content,
    details summary,
    details summary::after,
    .megamenu,
    .toggle-icon,
    .site-search,
    .offcanvas,
    .hamburger__bar {
        transition: none !important;
    }

    details[open] > *:not(summary) {
        animation: none !important;
    }
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}