/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
  text-decoration: none;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-primary-deeper);
  border-color: var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-primary-deeper);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-inverted);
  border-color: var(--color-border-light);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-inverted);
  text-decoration: none;
}

.btn--light {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-surface);
}
.btn--light:hover,
.btn--light:focus-visible {
  color: var(--color-text);
}

/* Outline-nappi vaaleille pinnoille (esim. etusivun feature-lohko) */
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-neutral);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-l);
  padding: 1.625rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-hover), transform var(--transition-hover);
}

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

.card__title {
  margin: 0 0 0.6rem;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.card__text {
  margin: 0 0 1.25rem;
  color: var(--color-text-mute);
  font-size: 0.95rem;
}

.card__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.1rem;
}

.card__link:hover,
.card__link:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* Articles */
.article {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article__title {
  margin: 0;
}

.article__meta {
  margin: 0;
  color: #4b5563;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
}

.article__content {
  display: grid;
  gap: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.article__content > * {
  min-width: 0;
  max-width: 100%;
}

.article__content :where(a, code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article__content :where(img, iframe, video, table) {
  max-width: 100%;
}

.article--event {
  gap: 2rem;
}

.event-article__header {
  max-width: 760px;
}

.article-list {
  display: grid;
  gap: 2rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.5rem;
  color: var(--color-text-mute);
  font-size: 0.9rem;
  font-weight: 700;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.blog-archive__header {
  margin-bottom: 2rem;
}

.blog-archive-grid {
  display: grid;
  gap: 1.25rem;
}

.blog-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}

.blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 11rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(251, 191, 36, 0.18));
}

.blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.blog-card__media-placeholder {
  display: grid;
  min-height: 11rem;
  height: 100%;
  place-items: center;
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card__body {
  display: grid;
  gap: 0.8rem;
  padding: 1.25rem;
}

.blog-card__meta {
  margin: 0;
  color: var(--color-text-mute);
  font-size: 0.9rem;
  font-weight: 700;
}

.blog-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover,
.blog-card__title a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.blog-card__excerpt {
  margin: 0;
}

.blog-card__link {
  justify-self: start;
  border-color: var(--color-border-neutral);
}

.blog-pagination {
  margin-top: 2rem;
}

.blog-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-s);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: 800;
  text-decoration: none;
}

.blog-pagination .current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverted);
}

.blog-post-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: clamp(320px, 52vh, 640px);
  color: #fff;
  background: linear-gradient(135deg, #10294b 0%, #1f4677 100%);
  overflow: hidden;
}

.blog-post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 20, 40, 0.18) 0%, rgba(8, 20, 40, 0.32) 34%, rgba(8, 20, 40, 0.84) 100%),
    linear-gradient(90deg, rgba(8, 20, 40, 0.38) 0%, rgba(8, 20, 40, 0.08) 42%, rgba(8, 20, 40, 0.18) 100%);
  z-index: 1;
}

.blog-post-hero--no-image {
  min-height: clamp(200px, 30vh, 320px);
}

.blog-post-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.blog-post-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 4rem);
}

.blog-post-hero__breadcrumb {
  color: rgba(255, 255, 255, 0.75);
}

.blog-post-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.blog-post-hero__breadcrumb a:hover,
.blog-post-hero__breadcrumb a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.blog-post-hero__copy {
  max-width: min(46rem, 100%);
}

.blog-post-hero__meta {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-post-hero__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}

.blog-post__terms {
  display: grid;
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-neutral);
}

.blog-post__terms p {
  margin: 0;
}

@media (min-width: 64rem) {
  .blog-card {
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  }

  .blog-card__media {
    aspect-ratio: auto;
  }

  .blog-card__media,
  .blog-card__media img,
  .blog-card__media-placeholder {
    min-height: 100%;
  }
}

.event-archive-section {
  display: grid;
  gap: 1.5rem;
}

.event-archive-section + .event-archive-section {
  margin-top: 2.5rem;
}

.event-archive-grid {
  display: grid;
  gap: 1.25rem;
}

.event-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}

.event-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 11rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.12), rgba(251, 191, 36, 0.2));
}

.event-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.event-card__media-placeholder {
  display: grid;
  min-height: 11rem;
  height: 100%;
  place-items: center;
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-card__body {
  display: grid;
  gap: 0.8rem;
  padding: 1.25rem;
}

.event-card__meta {
  margin: 0;
  color: var(--color-text-mute);
  font-size: 0.9rem;
  font-weight: 700;
}

.event-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.event-card__excerpt {
  margin: 0;
}

.event-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.event-card__link {
  border-color: var(--color-border-neutral);
}

.event-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(251, 191, 36, 0.22);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 800;
}

@media (min-width: 64rem) {
  .event-card {
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  }

  .event-card__media {
    aspect-ratio: auto;
  }

  .event-card__media,
  .event-card__media img,
  .event-card__media-placeholder {
    min-height: 100%;
  }
}

.event-details {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
  text-align: left;
}

.event-details__item {
  display: grid;
  gap: 0.2rem;
}

.event-details__label {
  color: var(--color-text-mute);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.event-details__value {
  margin: 0;
}

@media (min-width: 48rem) {
  .event-details__item {
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
  }
}

.event-layout {
  display: grid;
  gap: 2rem;
}

.event-layout__main {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.event-layout__sidebar {
  min-width: 0;
}

.event-summary-card {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-border-neutral);
  border-top: 0.35rem solid var(--color-accent);
  border-radius: var(--radius-medium);
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.08), transparent 6rem),
    var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}

.event-summary-card__title {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.event-summary-card__details {
  display: grid;
  gap: 0;
  margin: 0;
}

.event-summary-card__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border-neutral);
}

.event-summary-card__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.event-summary-card__label {
  color: var(--color-text-mute);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-summary-card__value {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.event-summary-card__cta {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border-neutral);
}

.event-summary-card__notice,
.event-product-cta__notice {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
}

.event-summary-card__button {
  box-sizing: border-box;
  width: 100%;
}

.event-registration {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}

.event-registration__title {
  margin: 0;
  font-size: 1.5rem;
}

.event-registration__description,
.event-registration__required-note {
  margin: 0;
  color: var(--color-text-mute);
}

.event-registration__form {
  display: grid;
  gap: 1rem;
}

.event-registration__notice {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  font-weight: 700;
}

.event-registration__notice--success {
  border-color: #15803d;
  background: #dcfce7;
  color: #14532d;
}

.event-registration__notice--error {
  border-color: #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
}

.event-registration__field {
  display: grid;
  gap: 0.4rem;
}

.event-registration__field label {
  color: var(--color-text);
  font-weight: 800;
}

.event-registration__field input,
.event-registration__field select,
.event-registration__field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.event-registration__field textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Pudotusvalikko muiden kenttien näköiseksi: oma alasnuoli (keskiharmaa,
   näkyy sekä vaalealla että tummalla taustalla) ja tilaa nuolelle oikealle. */
.event-registration__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.75rem;
}

.event-registration__field input:focus,
.event-registration__field select:focus,
.event-registration__field textarea:focus {
  outline: 3px solid rgba(251, 191, 36, 0.35);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* Virheellisesti täytetyt kentät: punainen reuna + accent-fokusrengas
   säilyy. aria-invalid="true" lisätään PHP:ssä redirectin jälkeen, kun
   palvelin tunnisti vikaisen kentän (nimi, sähköposti, GDPR). */
.event-registration__field input[aria-invalid="true"],
.event-registration__field select[aria-invalid="true"],
.event-registration__field textarea[aria-invalid="true"] {
  border-color: #b91c1c;
  box-shadow: 0 0 0 1px #b91c1c;
}

.event-registration__gdpr-label input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
}

.event-registration__submit {
  justify-self: start;
}

.event-registration__confirmation {
  display: grid;
  gap: 1.25rem;
}

.event-registration__confirmation-lead {
  margin: 0;
}

.event-registration__confirmation-details {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.event-registration__confirmation-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.25rem 0.75rem;
}

.event-registration__confirmation-row dt {
  color: var(--color-text-mute);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-registration__confirmation-row dd {
  margin: 0;
  font-weight: 600;
}

.event-registration__gdpr {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-s);
  background: var(--color-surface);
}

.event-registration__gdpr-notice {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.event-registration__gdpr-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.event-registration__gdpr-label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

.event-registration__gdpr-label input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.event-registration__newsletter {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-small);
  background: var(--color-surface-alt);
}

.event-registration__newsletter label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}

.event-registration__newsletter input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

.event-registration__newsletter input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (min-width: 64rem) {
  .article--event {
    gap: 2.5rem;
  }

  .event-layout--has-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: 3rem;
  }

  .event-layout--has-sidebar .event-layout__main {
    grid-column: 1;
    grid-row: 1;
  }

  .event-layout--has-sidebar .event-layout__sidebar {
    grid-column: 2;
    grid-row: 1;
  }

  .event-summary-card {
    position: sticky;
    top: 2rem;
  }
}

.rytkoset-checkout-note {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
}

.rytkoset-checkout-note p {
  margin: 0;
}

/* WooCommerce Blocks checkout */
:root[data-theme="dark"] .woocommerce-checkout,
:root[data-theme="dark"] .wp-block-woocommerce-checkout,
:root[data-theme="dark"] .wc-block-checkout {
  color: var(--color-text);
}

:root[data-theme="dark"] .woocommerce-checkout h1,
:root[data-theme="dark"] .woocommerce-checkout h2,
:root[data-theme="dark"] .woocommerce-checkout h3,
:root[data-theme="dark"] .wp-block-woocommerce-checkout h1,
:root[data-theme="dark"] .wp-block-woocommerce-checkout h2,
:root[data-theme="dark"] .wp-block-woocommerce-checkout h3,
:root[data-theme="dark"] .wc-block-components-title,
:root[data-theme="dark"] .wc-block-components-checkout-step__title {
  color: var(--color-text-light);
}

:root[data-theme="dark"] .wc-block-components-sidebar,
:root[data-theme="dark"] .wc-block-components-panel,
:root[data-theme="dark"] .wc-block-components-totals-wrapper,
:root[data-theme="dark"] .wc-block-components-address-card,
:root[data-theme="dark"] .wc-block-components-radio-control,
:root[data-theme="dark"] .wc-block-components-radio-control__option {
  border-color: var(--color-border-neutral);
  color: var(--color-text);
}

:root[data-theme="dark"] .wc-block-components-sidebar,
:root[data-theme="dark"] .wc-block-components-address-card,
:root[data-theme="dark"] .wc-block-components-radio-control__option {
  background: var(--color-surface);
}

:root[data-theme="dark"] .wc-block-components-address-card {
  background: var(--color-surface-alt);
}

:root[data-theme="dark"] .wc-block-components-address-card address,
:root[data-theme="dark"] .wc-block-components-address-card__name,
:root[data-theme="dark"] .wc-block-components-address-card__address,
:root[data-theme="dark"] .wc-block-components-address-card__address-section,
:root[data-theme="dark"] .wc-block-components-address-card__edit,
:root[data-theme="dark"] .wc-block-components-radio-control__label,
:root[data-theme="dark"] .wc-block-components-payment-method-label,
:root[data-theme="dark"] .wc-block-components-product-name,
:root[data-theme="dark"] .wc-block-components-product-price,
:root[data-theme="dark"] .wc-block-components-order-summary-item__description,
:root[data-theme="dark"] .wc-block-components-totals-item__label,
:root[data-theme="dark"] .wc-block-components-totals-item__value,
:root[data-theme="dark"] .wc-block-components-checkbox__label,
:root[data-theme="dark"] .wc-block-components-checkbox label,
:root[data-theme="dark"] .wc-block-checkout__terms,
:root[data-theme="dark"] .wc-block-checkout__terms a,
:root[data-theme="dark"] .wc-block-components-checkout-return-to-cart-button,
:root[data-theme="dark"] .wc-block-components-panel__button {
  color: var(--color-text);
}

:root[data-theme="dark"] .wc-block-components-address-card address *,
:root[data-theme="dark"] .wc-block-components-address-card__address *,
:root[data-theme="dark"] .wc-block-components-order-summary-item__description * {
  color: inherit;
}

:root[data-theme="dark"] .wc-block-components-product-metadata,
:root[data-theme="dark"] .wc-block-components-product-metadata__description {
  color: var(--color-text-mute);
}

:root[data-theme="dark"] .wc-block-components-order-summary-item__quantity {
  background: var(--color-surface-alt);
  border-color: var(--color-border-neutral);
  color: var(--color-text);
}

:root[data-theme="dark"] .wc-block-components-text-input input,
:root[data-theme="dark"] .wc-block-components-textarea,
:root[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  background: #fff;
  border-color: #cbd5e1;
  color: #111827;
}

:root[data-theme="dark"] .wc-block-components-text-input label,
:root[data-theme="dark"] .wc-block-components-text-input.is-active label,
:root[data-theme="dark"] .wc-block-components-textarea::placeholder,
:root[data-theme="dark"] .wc-block-components-text-input input::placeholder {
  color: #4b5563;
  opacity: 1;
}

:root[data-theme="dark"] .wc-block-components-text-input input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #111827;
}

:root[data-theme="dark"] .wc-block-components-text-input input:focus,
:root[data-theme="dark"] .wc-block-components-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.28);
}

:root[data-theme="dark"] .wp-block-woocommerce-checkout a,
:root[data-theme="dark"] .wc-block-checkout a {
  color: var(--color-accent);
}

/* =================================================================
   Share — "Jaa tapahtuma"
   Työpöytä (≥ 760 px): yksi vaakarivi.  Mobiili: pinottu kortti.
   Sama DOM molemmissa; teema periytyy data-theme-attribuutista.
   ================================================================= */
.share {
  --share-fg:           var(--color-text);
  --share-fg-mute:      var(--color-text-mute);
  --share-fg-dim:       #8a93a3;
  --share-border:       rgba(8, 37, 74, 0.1);
  --share-divider:      rgba(8, 37, 74, 0.1);
  --share-ico-bg:       #f5f7fa;
  --share-ico-fg:       #3b4554;
  --share-hero-bg:      linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.04));
  --share-hero-bd:      rgba(251, 191, 36, 0.55);
  --share-hero-sub:     var(--color-text-mute);
  --share-hover-mix:    #ffffff;
  --share-url-hover-bg: #f0f2f6;
  --share-url-hover-fg: var(--color-primary-deeper);

  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 56rem;
  box-sizing: border-box;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--share-border);
  border-radius: var(--radius-l);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-card);
  color: var(--share-fg);
}

.share__heading {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--share-fg);
}

/* ─── Mobiili: hero-kortti ──────────────────────────────────────── */
.share__hero {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--share-hero-bd);
  border-radius: 14px;
  background: var(--share-hero-bg);
  color: var(--share-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease;
}

.share__hero:hover {
  border-color: rgba(251, 191, 36, 0.85);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.24), rgba(251, 191, 36, 0.08));
}

.share__hero:active {
  transform: scale(0.99);
}

.share__hero:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.share__hero-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-primary-deeper);
}

.share__hero-ic svg {
  width: 18px;
  height: 18px;
}

.share__hero-t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.share__hero-t strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: inherit;
}

.share__hero-t span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--share-hero-sub);
}

.share__hero-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--share-fg-mute);
}

/* ─── Mobiili: tekstierotin ─────────────────────────────────────── */
.share__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--share-fg-dim);
}

.share__divider::before,
.share__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--share-divider);
}

/* ─── Rivilayout (kantaja molemmille; sisältö vaihtuu leveydellä) ── */
.share__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.share__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  background: var(--color-accent);
  color: var(--color-primary-deeper);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.share__cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.share__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--color-accent);
}

.share__cta svg {
  width: 15px;
  height: 15px;
}

.share__sep {
  width: 1px;
  height: 28px;
  background: var(--share-divider);
}

.share__url-link {
  flex: 1 1 16rem;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--share-fg-mute);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.share__url-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share__url-link:hover,
.share__url-link:focus-visible {
  background: var(--share-url-hover-bg);
  color: var(--share-url-hover-fg);
}

.share__url-link svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* ─── Ikoniympyrät (yhteiset molemmille layouteille) ────────────── */
.share__quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.share__quick > li {
  display: contents;
}

.share__ico {
  --ch: var(--share-ico-fg);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--share-border);
  border-radius: 999px;
  background: var(--share-ico-bg);
  color: var(--share-ico-fg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.share__ico svg {
  display: block;
  width: 24px;
  height: 24px;
}

.share__ico:hover,
.share__ico:focus-visible {
  background: color-mix(in oklab, var(--ch) 14%, var(--share-hover-mix));
  border-color: color-mix(in oklab, var(--ch) 55%, transparent);
  color: var(--ch);
  transform: translateY(-1px);
}

.share__ico:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ─── Status (kopioitu / jaettu / virhe) ────────────────────────── */
.share__status {
  margin: 4px 2px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #065f46;
}

.share__status[hidden] {
  display: none;
}

/* ─── Tumma teema (eksplisiittinen luokka tai sivun data-theme) ─── */
.share--theme-dark,
:root[data-theme="dark"] .share--theme-auto {
  --share-fg:           #f5f7fb;
  --share-fg-mute:      rgba(255, 255, 255, 0.62);
  --share-fg-dim:       rgba(255, 255, 255, 0.45);
  --share-border:       rgba(255, 255, 255, 0.1);
  --share-divider:      rgba(255, 255, 255, 0.14);
  --share-ico-bg:       rgba(255, 255, 255, 0.04);
  --share-ico-fg:       #f5f7fb;
  --share-hero-bg:      linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
  --share-hero-bd:      rgba(251, 191, 36, 0.3);
  --share-hero-sub:     rgba(255, 255, 255, 0.65);
  --share-hover-mix:    transparent;
  --share-url-hover-bg: rgba(255, 255, 255, 0.06);
  --share-url-hover-fg: #ffffff;
}

.share--theme-dark .share__status,
:root[data-theme="dark"] .share--theme-auto .share__status {
  color: #34d399;
}

.share--theme-dark .share__hero:hover,
:root[data-theme="dark"] .share--theme-auto .share__hero:hover {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.06));
}

/* ─── Responsiivinen vaihto — taittopiste 760 px ────────────────── */
@media (min-width: 760px) {
  .share__hero,
  .share__divider {
    display: none;
  }

  .share__quick {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .share__ico {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 759px) {
  .share {
    gap: 10px;
    padding: 1.25rem;
  }

  /* Mobiilissa rivistä näytetään vain kanavalista; CTA, erotin ja
     URL piiloon. .share__row toimii pelkkänä kantajana. */
  .share__row {
    display: block;
  }

  .share__row > .share__cta,
  .share__row > .share__sep,
  .share__row > .share__url-link {
    display: none;
  }
}

/* Hyvin kapeilla näytöillä X ja LinkedIn piiloon, etteivät tee
   ylimääräistä riviä. */
@media (max-width: 360px) {
  .share__ico[data-ch="x"],
  .share__ico[data-ch="li"] {
    display: none;
  }
}

/* No-webshare: JS havaitsi ettei navigator.share toimi -> "Jaa
   laitteella" -kutsut piiloon, kanavaikonit hoitavat jakamisen. */
.share.no-webshare .share__hero,
.share.no-webshare .share__cta,
.share.no-webshare .share__divider {
  display: none;
}

@media (min-width: 760px) {
  .share.no-webshare .share__sep {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .share__hero,
  .share__ico,
  .share__cta,
  .share__url-link {
    transition: none;
  }

  .share__hero:active,
  .share__ico:hover,
  .share__cta:hover {
    transform: none;
  }
}

.section__wide {
  max-width: 1200px;
}

/* Single event hero — mirrors album-hero layout */
.event-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 760px);
  color: #fff;
  background: linear-gradient(135deg, #10294b 0%, #1f4677 100%);
  overflow: hidden;
}

.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 20, 40, 0.14) 0%, rgba(8, 20, 40, 0.3) 34%, rgba(8, 20, 40, 0.82) 100%),
    linear-gradient(90deg, rgba(8, 20, 40, 0.38) 0%, rgba(8, 20, 40, 0.08) 42%, rgba(8, 20, 40, 0.18) 100%);
  z-index: 1;
}

.event-hero--no-image {
  min-height: clamp(280px, 42vh, 420px);
}

.event-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.event-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(5rem, 10vw, 7.5rem) 0 clamp(2rem, 5vw, 4rem);
}

.event-hero__copy {
  max-width: min(46rem, 100%);
  padding-right: clamp(1rem, 4vw, 2rem);
}

.event-hero__meta {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-hero__title {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.05;
  color: #fff;
  text-wrap: balance;
}

.event__section {
  padding-top: clamp(2.25rem, 6vw, 4rem);
}

@media (min-width: 640px) {
  .event-hero__content {
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }
}

@media (min-width: 960px) {
  .event-hero__copy {
    max-width: min(54rem, 100%);
  }
}

@media (min-width: 1280px) {
  .event-hero {
    min-height: clamp(520px, 70vh, 860px);
  }
}

/* Comments */
.comments-area {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border-neutral);
}

.comments-title,
.comment-reply-title {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
}

.comments-title span,
.comment-reply-title span {
  font-weight: inherit;
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.comment-list .children {
  margin-top: 1.25rem;
  padding-left: 1.5rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-left: 2px solid var(--color-border-neutral);
}

.comment-body {
  padding: 1.1rem 1.25rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.comment-author img {
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-author .fn {
  font-weight: 700;
  font-style: normal;
}

.comment-metadata {
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--color-text);
  opacity: 0.6;
}

.comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.comment-content p {
  margin: 0;
  line-height: 1.65;
}

.comment-content p + p {
  margin-top: 0.6rem;
}

.reply {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.comment-reply-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.comment-reply-link:hover {
  text-decoration: underline;
}

.bypostauthor > .comment-body {
  border-left: 3px solid var(--color-accent);
}

/* Comment form */
.comment-respond {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border-neutral);
}

.comment-form {
  display: grid;
  gap: 1rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.comment-form textarea {
  min-height: 120px;
  resize: vertical;
}

.comment-form-cookies-consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.88rem;
}

.comment-form-cookies-consent input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.comment-form .submit {
  justify-self: start;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease;
}

.comment-form .submit:hover {
  background: var(--color-primary-dark);
}

@media (min-width: 640px) {
  .comment-form-author,
  .comment-form-email,
  .comment-form-url {
    display: grid;
    grid-template-columns: 9rem 1fr;
    align-items: center;
    gap: 0.75rem;
  }

  .comment-form-author label,
  .comment-form-email label,
  .comment-form-url label {
    margin-bottom: 0;
  }
}

/* Search results */
.search-results-header {
  margin-bottom: 2rem;
}

.search-results-header__title {
  margin: 0 0 0.4rem;
}

.search-results-header__count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.search-result {
  border-bottom: 1px solid var(--color-border-neutral);
  padding: 1.5rem 0;
}

.search-result:first-child {
  border-top: 1px solid var(--color-border-neutral);
}

.search-result__article {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.search-result__meta {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.search-result__type {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.search-result__title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.search-result__link {
  color: var(--color-primary-deeper);
  text-decoration: none;
}

.search-result__link:hover,
.search-result__link:focus-visible {
  text-decoration: underline;
}

.search-result__excerpt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.search-results--empty {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* WordPress table block (e.g. magazine table of contents in product descriptions).
   WordPress core paints is-style-stripes rows with a fixed light gray, which is
   unreadable in the dark theme. Override with the adaptive surface token so the
   stripe contrast follows light/dark mode. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td,
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) th {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border-neutral);
}

/* Keep right-aligned cells (e.g. magazine page numbers) on one line. A long
   title in the first column can squeeze the number column to a few pixels, and
   WordPress's overflow-wrap:anywhere then breaks multi-digit numbers mid-number
   (27 -> 2/7). */
.wp-block-table td.has-text-align-right,
.wp-block-table th.has-text-align-right {
  white-space: nowrap;
}

/* Members-only page lock (#392). Shown in place of restricted page content. Mirrors the
   digital-magazine lock card, but lives in the site-wide component layer so it works on the
   general page template (digital-magazine.css loads only on magazine pages). */
.members-only-lock {
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}

.members-only-lock__eyebrow {
  justify-self: start;
  margin: 0;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.members-only-lock__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.members-only-lock__text {
  margin: 0;
  color: var(--color-text-mute);
}

.members-only-lock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}