/* =========================
   MODERN SITE CSS / 2026
   Universal stylesheet for archived pages
   ========================= */

:root {
  --bg: #f4f7fb;
  --bg-soft: #eef3f9;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: #ffffff;
  --surface-dark: #0f172a;
  --text: #172033;
  --text-soft: #5f6b85;
  --text-muted: #7d879c;
  --line: rgba(34, 51, 84, 0.12);
  --line-strong: rgba(34, 51, 84, 0.2);
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #7c3aed;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.14);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --container: 1240px;
  --header-height: 84px;
}

/* =========================
   Reset
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 30%),
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.06), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   Base typography
   ========================= */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px;
  color: #0f172a;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
}

h2 {
  font-size: clamp(28px, 4vw, 42px);
}

h3 {
  font-size: clamp(22px, 3vw, 30px);
}

h4 {
  font-size: 20px;
}

p {
  margin: 0 0 18px;
  color: var(--text-soft);
}

small,
.meta,
time {
  color: var(--text-muted);
}

strong,
b {
  color: #0f172a;
  font-weight: 700;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

a:hover {
  color: var(--primary-hover);
}

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

ul,
ol {
  padding-left: 22px;
  margin: 0 0 20px;
}

blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--primary);
  background: rgba(37, 99, 235, 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text);
}

/* =========================
   Global layout
   ========================= */

body > * {
  position: relative;
  z-index: 1;
}

header,
main,
footer,
section,
article,
nav,
aside {
  width: 100%;
}

.container,
.section-container,
.wrap,
.wrapper,
.inner,
.site-width,
.row,
[class*="container"] {
  width: min(100% - 32px, var(--container));
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   Header / Navigation
   ========================= */

header,
.site-header,
#header,
#masthead,
.top-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

header .container,
.site-header .container,
#header .container,
#masthead .container,
.top-header .container,
header .section-container {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-logo,
.logo,
.brand,
.site-title,
header h1,
header .title {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.site-logo a,
.logo a,
.brand a,
.site-title a {
  color: inherit;
}

nav,
.site-nav,
.main-nav,
#site-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

nav ul,
.site-nav ul,
.main-nav ul,
#site-navigation ul,
.menu,
#menu,
[class*="menu"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

nav li,
.menu li,
[class*="menu"] li {
  margin: 0;
  padding: 0;
}

nav a,
.site-nav a,
.main-nav a,
.menu a,
#site-navigation a,
[class*="menu"] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #334155;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  background: transparent;
}

nav a:hover,
.site-nav a:hover,
.main-nav a:hover,
.menu a:hover,
#site-navigation a:hover,
[class*="menu"] a:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
}

.current-menu-item > a,
.current_page_item > a,
nav a[aria-current="page"],
.menu .active > a {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary);
  font-weight: 700;
}

/* CTA in header */
header .button,
header .btn,
header .cta,
header a[href*="competition"],
header a[href*="enter"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff !important;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

header .button:hover,
header .btn:hover,
header .cta:hover,
header a[href*="competition"]:hover,
header a[href*="enter"]:hover {
  transform: translateY(-1px);
  opacity: 0.96;
}

/* =========================
   Main spacing
   ========================= */

main,
.site-main,
#main,
.content-area,
.site-content {
  display: block;
  padding: 48px 0 72px;
}

main > section,
main > article,
.site-main > section,
.site-main > article,
.content-area > section,
.content-area > article {
  margin-bottom: 36px;
}

/* =========================
   Hero / Intro blocks
   ========================= */

.hero,
.banner,
.intro,
.welcome,
.page-hero,
#hero,
[class*="hero"] {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)),
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(124, 58, 237, 0.10));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-lg);
  padding: clamp(36px, 6vw, 82px);
}

.hero::before,
.banner::before,
.intro::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: auto -80px -80px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.16), transparent 70%);
  pointer-events: none;
}

.hero h1,
.banner h1,
.intro h1,
.page-hero h1 {
  max-width: 12ch;
  margin-bottom: 20px;
}

.hero p,
.banner p,
.intro p,
.page-hero p {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.75;
  color: #475569;
}

.hero .actions,
.banner .actions,
.intro .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* =========================
   Universal cards / boxes
   ========================= */

.card,
.box,
.panel,
.widget,
.tile,
.feature,
.feature-box,
.post,
.article-card,
.info-box,
.summary,
.teaser,
[class*="card"],
[class*="box"],
[class*="widget"] {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.card:hover,
.box:hover,
.panel:hover,
.widget:hover,
.tile:hover,
.feature:hover,
.feature-box:hover,
.post:hover,
.article-card:hover,
.info-box:hover,
.summary:hover,
.teaser:hover,
[class*="card"]:hover,
[class*="box"]:hover,
[class*="widget"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.18);
}

/* =========================
   Content blocks that are currently empty-looking
   Turns plain old blocks into structured cards
   ========================= */

article,
.post,
.entry,
.entry-content > div,
.textwidget,
.widget,
.content-block,
.content-box,
.module,
.module-inner,
#content-section-1,
#content-section-2,
#content-section-3,
#content-section-4,
[class*="content-section"],
[class*="section-box"],
[class*="feature-box"] {
  border-radius: var(--radius-lg);
}

/* Make clusters of old small boxes look aligned */
.entry-content,
.post-content,
.content,
.main-content,
.page-content {
  display: block;
}

.entry-content > *,
.post-content > *,
.content > *,
.main-content > *,
.page-content > * {
  margin-bottom: 24px;
}

/* =========================
   Grid helpers
   ========================= */

.grid,
.cards,
.features,
.posts,
.tiles,
.list-grid,
.row-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid > *,
.cards > *,
.features > *,
.posts > *,
.tiles > *,
.list-grid > *,
.row-grid > * {
  grid-column: span 4;
}

.grid > .wide,
.cards > .wide,
.features > .wide {
  grid-column: span 6;
}

.grid > .full,
.cards > .full,
.features > .full {
  grid-column: 1 / -1;
}

/* =========================
   Buttons
   ========================= */

button,
input[type="submit"],
input[type="button"],
.btn,
.button,
.wp-block-button__link,
a.button,
a.btn {
  appearance: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.24);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover,
.wp-block-button__link:hover,
a.button:hover,
a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.28);
  opacity: 0.98;
}

button.secondary,
.btn.secondary,
.button.secondary,
a.button.secondary {
  background: #fff;
  color: var(--primary) !important;
  border: 1px solid rgba(37, 99, 235, 0.16);
  box-shadow: var(--shadow-sm);
}

/* =========================
   Forms
   ========================= */

form {
  display: block;
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  font: inherit;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, 0.44);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
  outline: none;
  background: #fff;
}

label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

/* =========================
   Tables
   ========================= */

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

th,
td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

th {
  background: rgba(37, 99, 235, 0.05);
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

tr:last-child td {
  border-bottom: 0;
}

/* =========================
   Images / Media cards
   ========================= */

figure,
.image-box,
.thumbnail,
.post-thumbnail,
.wp-caption {
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

figure img,
.image-box img,
.thumbnail img,
.post-thumbnail img,
.wp-caption img {
  width: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

figure:hover img,
.image-box:hover img,
.thumbnail:hover img,
.post-thumbnail:hover img,
.wp-caption:hover img {
  transform: scale(1.03);
}

/* =========================
   CTA section
   ========================= */

.cta,
.callout,
.promo,
.promo-box,
.notice,
.highlight {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(37,99,235,0.10), rgba(124,58,237,0.08)),
    #fff;
  border: 1px solid rgba(37,99,235,0.14);
  box-shadow: var(--shadow-md);
}

.cta h2,
.callout h2,
.promo h2,
.promo-box h2 {
  margin-bottom: 12px;
}

.cta p,
.callout p,
.promo p,
.promo-box p {
  margin-bottom: 18px;
}

/* =========================
   Footer
   ========================= */

footer,
.site-footer,
#footer,
#colophon {
  margin-top: 64px;
  padding: 56px 0 28px;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.98), rgba(8,15,31,1));
  color: rgba(255,255,255,0.82);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}

footer .container,
.site-footer .container,
#footer .container,
#colophon .container,
footer .section-container {
  width: min(100% - 32px, var(--container));
}

footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: #fff;
}

footer p,
footer li,
footer small,
footer span,
.site-footer p,
.site-footer li {
  color: rgba(255,255,255,0.72);
}

footer a,
.site-footer a,
#footer a {
  color: rgba(255,255,255,0.88);
}

footer a:hover,
.site-footer a:hover,
#footer a:hover {
  color: #fff;
}

footer ul,
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .menu,
.site-footer .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

footer .menu a,
.site-footer .menu a {
  padding: 8px 0;
  min-height: auto;
  border-radius: 0;
  background: transparent;
}

footer .copyright,
.site-footer .copyright,
footer .site-info,
#colophon .site-info {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  color: rgba(255,255,255,0.56);
}

/* =========================
   Old archived weird blocks
   normalize inline blocks / bordered boxes
   ========================= */

[style*="border"],
[style*="outline"] {
  border-radius: 16px !important;
}

[style*="text-align: center"] {
  max-width: 100%;
}

/* =========================
   Page-specific enhancement for plain homepage layouts
   ========================= */

/* First visible text block becomes a hero-like area */
main > :first-child,
.site-main > :first-child,
.content-area > :first-child {
  position: relative;
}

/* competition entry style */
a[href*="competition"],
a[href*="enter-the-competition"],
a[href*="entry"] {
  font-weight: 700;
}

/* =========================
   Utility classes
   ========================= */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 12px !important; }
.mt-2 { margin-top: 20px !important; }
.mt-3 { margin-top: 28px !important; }
.mt-4 { margin-top: 40px !important; }

.mb-1 { margin-bottom: 12px !important; }
.mb-2 { margin-bottom: 20px !important; }
.mb-3 { margin-bottom: 28px !important; }
.mb-4 { margin-bottom: 40px !important; }

.py-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.surface {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.hidden {
  display: none !important;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1100px) {
  .grid > *,
  .cards > *,
  .features > *,
  .posts > *,
  .tiles > *,
  .list-grid > *,
  .row-grid > * {
    grid-column: span 6;
  }

  header .container,
  .site-header .container,
  #header .container,
  #masthead .container,
  .top-header .container {
    min-height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-direction: column;
    align-items: flex-start;
  }

  nav,
  .site-nav,
  .main-nav,
  #site-navigation {
    width: 100%;
  }

  nav ul,
  .menu,
  #site-navigation ul,
  [class*="menu"] {
    width: 100%;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  main,
  .site-main,
  #main,
  .content-area,
  .site-content {
    padding: 28px 0 48px;
  }

  .hero,
  .banner,
  .intro,
  .welcome,
  .page-hero,
  #hero,
  [class*="hero"] {
    padding: 28px 20px;
    border-radius: 22px;
  }

  .card,
  .box,
  .panel,
  .widget,
  .tile,
  .feature,
  .feature-box,
  .post,
  .article-card,
  .info-box,
  .summary,
  .teaser,
  [class*="card"],
  [class*="box"],
  [class*="widget"] {
    padding: 18px;
    border-radius: 18px;
  }

  .grid,
  .cards,
  .features,
  .posts,
  .tiles,
  .list-grid,
  .row-grid {
    grid-template-columns: 1fr;
  }

  .grid > *,
  .cards > *,
  .features > *,
  .posts > *,
  .tiles > *,
  .list-grid > *,
  .row-grid > *,
  .grid > .wide,
  .cards > .wide,
  .features > .wide {
    grid-column: auto;
  }

  nav a,
  .menu a,
  #site-navigation a,
  [class*="menu"] a {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 14px;
  }

  h1 {
    font-size: clamp(30px, 9vw, 48px);
  }

  h2 {
    font-size: clamp(24px, 7vw, 34px);
  }

  p {
    font-size: 15px;
  }

  footer,
  .site-footer,
  #footer,
  #colophon {
    margin-top: 42px;
    padding-top: 40px;
  }
}

@media (max-width: 480px) {
  .container,
  .section-container,
  .wrap,
  .wrapper,
  .inner,
  .site-width,
  .row,
  [class*="container"] {
    width: min(100% - 20px, var(--container));
  }

  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .button,
  .wp-block-button__link,
  a.button,
  a.btn {
    width: 100%;
  }

  .hero .actions,
  .banner .actions,
  .intro .actions {
    flex-direction: column;
  }
}