.entry-title, .page-title { 
    display: none; 
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
    background: linear-gradient(
    120deg,
    hsl(168, 47%, 92%) 0%,
    hsl(168, 20%, 88%) 50%,
    hsl(20, 19%, 90%) 100%
  );
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
}

body:before {
    content: '';
    position: fixed;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  background-image: var(--pattern-wave);
}

/* Blockquote - remove default styling */
blockquote {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  quotes: none;
}

blockquote::before,
blockquote::after {
  content: none;
}

cite {
    font-style: normal;
    text-transform: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    opacity: 1;
}

figcaption {
    margin: 0;
}

/* Dark section — auto-flips headings */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
  color: #ffffff;
}
.dark-section .text-muted { color: var(--neutral-l-4); }

* ============================================================
   14. COMPONENT PATTERNS — Buttons
   ============================================================ */

/* Button focus */
a:focus, button:focus, input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Button sizes */
.btn-xs {
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--text-xs);
  border-radius: var(--radius-s);
}
.btn-sm {
  padding: calc(var(--space-s) * 0.75) var(--space-m);
  font-size: var(--text-xs);
}
.btn-lg {
  padding: var(--space-m) var(--space-2xl);
  font-size: var(--text-m);
  border-radius: var(--radius-l);
}
.btn-xl {
  padding: var(--space-l) var(--space-3xl);
  font-size: var(--text-l);
  border-radius: var(--radius-l);
}
.btn-full { width: 100%; }


/* ============================================================
   COMPONENT PATTERNS — Cards
   ============================================================ */

.card {
  background-color: #fff;
  border-radius: var(--radius-l);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card-hover:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card-body {
  padding: var(--space-l);
}

.card-body > * + * {
  margin-top: var(--space-s);
}

.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-media-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.card-subtitle {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

.card-footer {
  padding: var(--space-m) var(--space-l);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

/* Elevated card */
.card-elevated {
  border: none;
  box-shadow: var(--shadow-md);
}

/* Filled card */
.card-filled {
  background-color: var(--color-neutral-100);
  border: none;
}

/* Dark card */
.card-dark {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-200);
  border-color: var(--color-neutral-700);
}
.card-dark .card-title { color: #fff; }
.card-dark .card-footer { border-color: var(--color-neutral-700); }

/* ============================================================
   BRICKS BUILDER OVERRIDES
   These fix common Bricks defaults to work with this framework.
   ============================================================ */

/* Heading resets — let utility classes control sizes */
.brxe-heading h1,
.brxe-heading h2,
.brxe-heading h3,
.brxe-heading h4,
.brxe-heading h5,
.brxe-heading h6 {
  margin-block: 0;
}

/* Remove default Bricks link styles inside headings */
.brxe-heading a {
  color: inherit;
  text-decoration: none;
}

/* Post content prose styles */
.brxe-post-content .entry-content {
  max-width: 72ch;
}

/* Image defaults */
.brxe-image img,
figure img,
[class*="ratio-"] img {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .brxe-image img,
    figure img,
    [class*="ratio-"] img {
    width: 100% !important;
  }
}

/* Image default filter */

img {
  filter: saturate(1.04) brightness(1.05) contrast(1.02);
}

.brxe-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0.3;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.brxe-image {
  position: relative;
  overflow: hidden;
}


/* Link styling */
a:not(.bricks-button, .btn--primary, btn--secondary, .header-logo-link) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:not(.bricks-button, .header-logo-link):hover { color: var(--white); }

/* Dark section — auto-flips headings */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
  color: #ffffff;
}
.dark-section .text-muted { color: var(--color-neutral-400); }

/* Deaktiver default list item styling */
ul, ol {
    margin: 0;
    list-style: none;
}

li::marker {
    color: var(--primary);
}

/* Heading highlight */
.heading-highlight {
    color: var(--primary);
}