/*
Theme Name: OASIS Lab
Theme URI: https://homahm.github.io/
Author: OASIS Lab UCLA
Description: OASIS Lab site theme — structure/layout aligned with CSSLab UPenn, with UCLA brand colors, a full-width hero banner per page, a Team avatar grid, a two-column News layout, and a deep-blue multi-column footer; detail polish keeps Stripe-level refinement (radius/shadow/spacing). Content matches the source site exactly.
Version: 3.0.0
License: GPL-2.0-or-later
Text Domain: oasis-lab
*/

:root {
  /* ===== UCLA official brand colors (brand.ucla.edu/identity/colors) ===== */
  --ucla-blue: #2774AE;       /* UCLA Blue (primary) */
  --ucla-gold: #FFD100;       /* UCLA Gold accent (graphics/decoration only) */
  --gold-dark: #FFB81C;       /* Darkest Gold (when a deeper gold is needed) */
  --blue-darkest: #003B5C;    /* deep blue (header/footer/hero) */
  --blue-darker: #005587;     /* darker blue */
  --blue-light: #8BB8E8;      /* light blue */
  --blue-lightest: #DAEBFE;   /* lightest blue */

  /* semantic aliases (reuse the template's variable names, all pointing to UCLA primary) */
  --navy: var(--ucla-blue);    /* main structural color = UCLA Blue #2774AE (official primary) */
  --navy-deep: var(--blue-darkest);
  --navy-soft: var(--blue-darker);
  --primary: var(--ucla-blue); /* links/emphasis = UCLA Blue */
  --accent: var(--ucla-gold);  /* gold accent bars/date highlights */
  --accent-dark: var(--gold-dark);

  --ink: #1a1a1a;
  --ink-secondary: #333333;
  --ink-mute: #5b6b7a;
  --on-dark: #ffffff;
  --canvas: #ffffff;
  --canvas-soft: #f3f7fb;     /* very light blue-white (bright, lots of whitespace) */
  --hairline: #d9e3ec;
  --shadow-1: 0 1px 3px rgba(0,59,92,0.08);
  --shadow-2: 0 8px 24px rgba(0,59,92,0.10), 0 2px 6px rgba(0,59,92,0.05);
  --container: 1180px;
  --radius: 6px;
  --radius-lg: 10px;
}
html[data-theme="dark"] {
  --ink: #e7ecf3; --ink-secondary: #c4cede; --ink-mute: #9aa7bd;
  --canvas: #07121c; --canvas-soft: #0c1c2a; --hairline: #163049;
  --primary: var(--blue-light);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--ink-secondary);
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--ucla-blue); text-decoration: none; }
a:hover { color: var(--blue-darker); }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { color: var(--navy); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .6rem; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--ink); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ===== Top bar: deep blue ===== */
.navbar { position: sticky; top: 0; z-index: 1000; background: var(--navy); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.navbar-brand { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.navbar-brand:hover { color: var(--ucla-gold); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-links a { color: rgba(255,255,255,.88); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; transition: color .15s; }
.nav-links a.active, .nav-links a:hover { color: #fff; border-bottom: 3px solid var(--ucla-gold); padding-bottom: 2px; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #fff; }
#theme-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; color: rgba(255,255,255,.7); padding: 4px; }

/* ===== Full-width Page Hero banner (per page) — UCLA Blue vertical gradient + anime.js motion ===== */
.page-hero { --hero-square-x: 0px; --hero-sine-x: 360px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ucla-blue) 0%, #1d6ca8 42%, var(--blue-darker) 100%);
}
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(39,116,174,0) 0%, rgba(0,59,92,.20) 100%);
  opacity: .62;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 72'%3E%3Cpath d='M0 38H60V18H180V54H300V20H420V52H540V22H660V46H720' fill='none' stroke='%23DAEBFE' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.22' stroke-dasharray='6,7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 72'%3E%3Cpath d='M0 36C45 12 90 12 135 36S225 60 270 36 360 12 405 36 495 60 540 36 630 12 675 36 765 60 810 36' fill='none' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' opacity='.20' stroke-dasharray='6,7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 72'%3E%3Cpath d='M0 38H60V18H180V54H300V20H420V52H540V22H660V46H720' fill='none' stroke='%23DAEBFE' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.22' stroke-dasharray='6,7'/%3E%3C/svg%3E");
  background-size: 720px 72px, 720px 72px, 720px 72px;
  background-position: var(--hero-square-x) 17%, var(--hero-sine-x) 52%, var(--hero-square-x) 87%;
  background-repeat: repeat-x;
  opacity: .4;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 86%, transparent 100%);
}
/* motion layer: cool-toned circuit nodes drifting */
.hero-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-fx .fx-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(218,235,254,.62); border: 1px solid rgba(255,255,255,.52); box-shadow: 0 0 0 1px rgba(0,59,92,.12);
  opacity: .34; will-change: transform, opacity; }
.hero-fx .fx-dot:nth-child(1){ left: 8%;  top: 30%; width: 14px; height: 14px; }
.hero-fx .fx-dot:nth-child(2){ left: 22%; top: 64%; }
.hero-fx .fx-dot:nth-child(3){ left: 40%; top: 22%; width: 8px;  height: 8px; }
.hero-fx .fx-dot:nth-child(4){ left: 56%; top: 58%; width: 16px; height: 16px; }
.hero-fx .fx-dot:nth-child(5){ left: 70%; top: 34%; }
.hero-fx .fx-dot:nth-child(6){ left: 84%; top: 60%; width: 12px; height: 12px; }
.hero-fx .fx-dot:nth-child(7){ left: 92%; top: 26%; width: 8px;  height: 8px; }
.page-hero .inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 56px 24px; }
.page-hero h1 { color: #fff; font-size: 46px; font-weight: 800; letter-spacing: -0.02em; margin: 0; max-width: 22ch; }
.page-hero .sub { color: rgba(255,255,255,.92); font-size: 18px; margin-top: .6rem; max-width: 56ch; }
@media (max-width: 820px) { .page-hero h1 { font-size: 32px; } .page-hero .inner { padding: 40px 24px; } }
@media (prefers-reduced-motion: reduce) { .page-hero { --hero-square-x: 0px; --hero-sine-x: 360px; } }

/* ===== Buttons (outline + solid) ===== */
.btn { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; font-size: .9rem; padding: 11px 24px; border-radius: var(--radius); transition: background .15s; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.btn:hover { background: var(--ucla-blue); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ===== Sections ===== */
.section { padding: 64px 0; }
.section.soft { background: var(--canvas-soft); }
.section-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--ucla-blue); margin-bottom: .5rem; }
.section-title { font-size: 34px; font-weight: 800; color: var(--navy); margin: 0 0 1.6rem; }
.center { text-align: center; }

/* ===== Main content container ===== */
.site-main { max-width: var(--container); margin: 0 auto; padding: 48px 24px; min-height: 40vh; }
.page-title, .post-title { font-size: 36px; font-weight: 800; color: var(--navy); margin: 0 0 1.2rem; }
.post-content p { margin: 0 0 1rem; }
.post-content h2 { font-size: 24px; margin: 1.8rem 0 .8rem; }
.post-content h3 { font-size: 19px; margin: 1.3rem 0 .5rem; }

/* front-page about: right-floated avatar */
.profile { float: right; width: 260px; margin: 0 0 1.5rem 2rem; }
.profile img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.clearfix::after { content: ""; display: table; clear: both; }

/* ===== Cards ===== */
.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }

/* News card grid (CSSLab: red top line + square image + blue title + red date + gray excerpt) */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.8rem; }
.news-grid .card { display: flex; flex-direction: column; border-top: 4px solid var(--ucla-gold); }
.news-grid .card .thumb { background: var(--navy); height: 6px; }
.news-grid .card .body { padding: 1.3rem 1.4rem 1.5rem; }
.news-grid .card .date { font-size: 13px; color: var(--ucla-blue); font-weight: 700; margin-bottom: .4rem; }
.news-grid .card h3 { font-size: 18px; line-height: 1.3; margin: 0; font-weight: 800; }
.news-grid .card h3 a { color: var(--navy); }
.news-grid .card h3 a:hover { color: var(--ucla-blue); }

/* ===== Quote band (CSSLab: left photo + right red block italic quote) ===== */
.quote-band { display: grid; grid-template-columns: 1fr 1.4fr; align-items: stretch; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); margin: 2rem 0; }
.quote-band .photo { background-size: cover; background-position: center; min-height: 280px; }
.quote-band .quote { background: var(--blue-darker); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.quote-band blockquote { font-size: 20px; line-height: 1.5; font-style: italic; margin: 0 0 1rem; }
.quote-band .cite { font-weight: 700; font-size: .95rem; }
@media (max-width: 820px) { .quote-band { grid-template-columns: 1fr; } }

/* ===== Team avatar grid (CSSLab People style: square image + bold blue name + gray role) ===== */
.section-heading { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--navy); margin: 2.6rem 0 1.4rem; padding-bottom: .5rem; border-bottom: 2px solid var(--navy); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1.8rem 1.5rem; }
.person { text-align: left; }
.person .photo-link { display: block; }
.person .photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); margin-bottom: .7rem; background: var(--canvas-soft); transition: filter .15s, box-shadow .2s, transform .2s; }
.person .photo-link:hover .photo { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.person .name { font-weight: 800; color: var(--navy); font-size: 1.02rem; line-height: 1.25; }
.person .name a { color: var(--navy); }
.person .name a:hover { color: var(--ucla-blue); }
.person .role { color: var(--ink-mute); font-size: .85rem; margin-top: .15rem; }

/* ===== Research project cards ===== */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 1.8rem; }
.project-grid .card { border-top: 4px solid var(--navy); }
.project-grid .card img { width: 100%; height: 175px; object-fit: cover; }
.project-grid .card .body { padding: 1.1rem 1.3rem 1.4rem; }
.project-grid .card h3 { margin: 0 0 .45rem; font-size: 1.1rem; font-weight: 800; color: var(--navy); }
.project-grid .card p { margin: 0; font-size: .92rem; color: var(--ink-mute); }

/* ===== Publications list ===== */
.pub-year { font-size: 28px; font-weight: 800; color: var(--navy); margin: 2rem 0 .8rem; padding-bottom: .3rem; border-bottom: 3px solid var(--ucla-gold); display: inline-block; }
.pub-item { display: flex; gap: 1.4rem; padding: 0 0 1.4rem; margin-bottom: 1.4rem; align-items: flex-start; border-bottom: 1px solid var(--hairline); }
.pub-item:last-child { border-bottom: 0; }
.pub-item .thumb { flex: 0 0 140px; }
.pub-item .thumb img { width: 140px; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.pub-item .meta .title { font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.pub-item .meta .title a { color: var(--navy); }
.pub-item .meta .title a:hover { color: var(--ucla-blue); }
.pub-item .meta .authors { font-size: .92rem; color: var(--ink-secondary); margin: .25rem 0; }
.pub-item .meta .venue { font-size: .9rem; font-style: italic; color: var(--ink-mute); }
.pub-item pre { background: var(--canvas-soft); padding: .8rem; border-radius: var(--radius); font-size: .78rem; overflow-x: auto; border: 1px solid var(--hairline); }

/* ===== Two-column layout (News list page: main + sidebar) ===== */
.two-col { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: start; }
.two-col .sidebar h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: .4rem; margin: 0 0 .8rem; }
.two-col .sidebar ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.two-col .sidebar li { padding: .35rem 0; border-bottom: 1px solid var(--hairline); }
.two-col .sidebar a { color: var(--ink-secondary); font-size: .92rem; }
.two-col .sidebar a:hover { color: var(--ucla-blue); }
.news-list .item { padding: 1.3rem 0; border-bottom: 1px solid var(--hairline); }
.news-list .item .date { color: var(--ucla-blue); font-weight: 700; font-size: .85rem; }
.news-list .item h3 { margin: .3rem 0; font-size: 1.25rem; font-weight: 800; }
.news-list .item h3 a { color: var(--navy); }
.news-list .item h3 a:hover { color: var(--ucla-blue); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ===== Tables: flat, borderless ===== */
.list-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.list-table td, .list-table th { padding: .6rem; border: 0; vertical-align: top; text-align: left; }
.list-table td:first-child, .list-table th:first-child { white-space: nowrap; color: var(--navy); width: 130px; font-weight: 700; }
.list-table tr { border-bottom: 1px solid var(--hairline); }
.wp-block-table, figure.wp-block-table { margin: 1rem 0; }
table.wp-block-table, .wp-block-table table, .post-content table { width: 100%; border-collapse: collapse; border: 0; }
.wp-block-table td, .wp-block-table th, .post-content table td, .post-content table th { padding: .6rem; border: 0; text-align: left; vertical-align: top; }
.post-content table tr { border-bottom: 1px solid var(--hairline); }
.post-content table:not(:has(thead)) tr td:first-child { white-space: nowrap; width: 130px; font-weight: 700; color: var(--navy); }
.post-content table thead th { font-weight: 800; border-bottom: 2px solid var(--navy); color: var(--navy); }

/* ===== RESEARCHERS cta band — vertical gradient blending into footer + anime.js motion ===== */
.cta-band { --cta-square-x: 0px; --cta-sine-x: 360px; position: relative; overflow: hidden; padding: 76px 24px; text-align: center;
  background: linear-gradient(180deg, var(--ucla-blue) 0%, var(--blue-darker) 48%, var(--blue-darkest) 100%);
}
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(39,116,174,0) 0%, rgba(0,59,92,.22) 100%);
  opacity: .60;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 72'%3E%3Cpath d='M0 38H60V18H180V54H300V20H420V52H540V22H660V46H720' fill='none' stroke='%23DAEBFE' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round' opacity='.20' stroke-dasharray='6,7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 72'%3E%3Cpath d='M0 36C45 12 90 12 135 36S225 60 270 36 360 12 405 36 495 60 540 36 630 12 675 36 765 60 810 36' fill='none' stroke='%23FFFFFF' stroke-width='1.15' stroke-linecap='round' opacity='.18' stroke-dasharray='6,7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 72'%3E%3Cpath d='M0 38H60V18H180V54H300V20H420V52H540V22H660V46H720' fill='none' stroke='%23DAEBFE' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round' opacity='.20' stroke-dasharray='6,7'/%3E%3C/svg%3E");
  background-size: 720px 72px, 720px 72px, 720px 72px;
  background-position: var(--cta-square-x) 15%, var(--cta-sine-x) 53%, var(--cta-square-x) 87%;
  background-repeat: repeat-x;
  opacity: .36;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 76%, transparent 100%);
}
.cta-band .cta-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cta-band .cta-fx .fx-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(218,235,254,.56); border: 1px solid rgba(255,255,255,.46); box-shadow: 0 0 0 1px rgba(0,59,92,.12);
  opacity: .28; will-change: transform, opacity; }
.cta-band .cta-fx .fx-dot:nth-child(1){ left: 12%; top: 28%; width: 14px; height: 14px; }
.cta-band .cta-fx .fx-dot:nth-child(2){ left: 30%; top: 66%; }
.cta-band .cta-fx .fx-dot:nth-child(3){ left: 48%; top: 24%; width: 8px;  height: 8px; }
.cta-band .cta-fx .fx-dot:nth-child(4){ left: 64%; top: 62%; width: 16px; height: 16px; }
.cta-band .cta-fx .fx-dot:nth-child(5){ left: 80%; top: 36%; }
.cta-band .cta-fx .fx-dot:nth-child(6){ left: 90%; top: 64%; width: 12px; height: 12px; }
.cta-band .inner { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: 32px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 1.4rem; }
.cta-band .btn-outline { color: #fff; border-color: #fff; }
.cta-band .btn-outline:hover { background: #fff; color: var(--ucla-blue); }
@media (prefers-reduced-motion: reduce) { .cta-band { --cta-square-x: 0px; --cta-sine-x: 360px; } }

/* ===== Footer: deep-blue multi-column, continuing the CTA end color ===== */
.site-footer { background: var(--blue-darkest); color: rgba(255,255,255,.75); padding: 56px 0 28px; margin-top: 0; font-size: .92rem; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem; }
.footer-cols h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 1rem; font-weight: 800; }
.footer-cols a { color: rgba(255,255,255,.78); display: block; margin-bottom: .5rem; }
.footer-cols a:hover { color: var(--blue-light); }
.footer-cols p { color: rgba(255,255,255,.7); margin: 0 0 .8rem; }
.social-icons { display: flex; gap: 1rem; margin: 1rem 0; font-size: 1.2rem; }
.social-icons a { color: rgba(255,255,255,.8); display: inline; margin: 0; }
.social-icons a:hover { color: var(--blue-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.2rem; text-align: center; font-size: .85rem; color: rgba(255,255,255,.6); }

@media (max-width: 820px) {
  .nav-links { display: none; flex-direction: column; align-items: flex-start; width: 100%; padding-top: 1rem; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .navbar .container { flex-wrap: wrap; }
  .profile { float: none; width: 100%; max-width: 280px; margin: 0 auto 1.5rem; }
  .footer-cols { grid-template-columns: 1fr; }
  .page-title, .post-title { font-size: 28px; }
}