/*
Theme Name: Hasseldelle
Theme URI: https://www.hasseldelle.de/
Author: Wir in der Hasseldelle e.V.
Description: Modernes, barrierearmes Block-Theme für Wir in der Hasseldelle e.V. mit Startseite, Angeboten, Terminen und Neuigkeiten.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: hasseldelle
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root { --hd-shadow: 0 12px 34px rgba(20, 61, 40, .12); }
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
a { text-underline-offset: .18em; }
.wp-site-blocks { overflow: hidden; }
.hd-topbar a { color: inherit; }
.hd-header { position: relative; z-index: 10; }
.hd-header .wp-block-navigation__responsive-container-open { padding: .55rem; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; }
.hd-hero { position: relative; isolation: isolate; }
.hd-hero::after { content: ""; position: absolute; z-index: -1; inset: 0 0 0 58%; opacity: .18; background: radial-gradient(circle at 30% 35%, #fff 0 4%, transparent 4.5%), radial-gradient(circle at 63% 28%, #fff 0 2.5%, transparent 3%), radial-gradient(circle at 52% 64%, #f4b942 0 6%, transparent 6.5%), linear-gradient(145deg, transparent 38%, #fff 39% 41%, transparent 42%); }
.hd-quicklinks { position: relative; z-index: 3; margin-top: -32px !important; box-shadow: var(--hd-shadow); }
.hd-quicklink { min-height: 88px; transition: transform .2s ease, background .2s ease; }
.hd-quicklink:hover { transform: translateY(-2px); background: var(--wp--preset--color--mint) !important; }
.hd-icon { width: 38px; height: 38px; display: grid !important; place-items: center; border-radius: 999px; flex: 0 0 auto; }
.hd-card { height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.hd-card:hover { transform: translateY(-3px); box-shadow: var(--hd-shadow); }
.hd-date { min-width: 58px; }
.hd-news .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; }
.hd-news .wp-block-post-title a { text-decoration: none; }
.hd-news .wp-block-post-title a:hover { text-decoration: underline; }
.hd-footer a { color: inherit; }
.hd-footer .wp-block-navigation { gap: .45rem; }

/* Interactive yearly event overview. */
.hd-calendar { margin-block: 2rem 3rem; }
.hd-calendar__intro { max-width: 760px; color: #52665d; }
.hd-calendar__months { display: flex; gap: .55rem; overflow-x: auto; padding: .35rem 0 .8rem; scrollbar-width: thin; }
.hd-calendar__month { appearance: none; border: 1px solid #c9d9d0; border-radius: 999px; background: #fff; color: #174b32; cursor: pointer; font: inherit; font-weight: 700; padding: .65rem 1rem; white-space: nowrap; }
.hd-calendar__month:hover,
.hd-calendar__month:focus-visible { border-color: #256b45; background: #e7f2ec; }
.hd-calendar__month[aria-selected="true"] { border-color: #174b32; background: #174b32; color: #fff; }
.hd-calendar__panel { border: 1px solid #d4e0d9; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(20,61,40,.08); padding: clamp(1.1rem,3vw,2rem); }
.hd-calendar__panel[hidden] { display: none; }
.hd-calendar__panel h3 { color: #174b32; margin-top: 0; }
.hd-calendar__event { display: grid; grid-template-columns: minmax(125px,.8fr) minmax(150px,1fr) minmax(220px,2fr); gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid #e1e9e4; }
.hd-calendar__event:first-of-type { border-top: 0; }
.hd-calendar__date { font-weight: 800; color: #174b32; }
.hd-calendar__type { width: fit-content; border-radius: 999px; background: #e7f2ec; color: #174b32; font-size: .85rem; font-weight: 700; padding: .3rem .65rem; }
.hd-calendar__type--event { background: #fff1c7; color: #5b4300; }
.hd-calendar__empty { background: #f5f8f6; border-radius: 12px; color: #52665d; padding: 1rem; }
.hd-calendar__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.hd-calendar__download { display: inline-flex; align-items: center; border-radius: 8px; background: #f4b942; color: #17352a !important; font-weight: 800; padding: .8rem 1rem; text-decoration: none; }
.hd-calendar__download:hover { background: #e9aa28; }
@media (max-width: 700px) {
  .hd-calendar__event { grid-template-columns: 1fr; gap: .4rem; }
}

/* Polishing for the live site. */
.hd-topbar,
.hd-topbar a {
  color: #fff !important;
  opacity: 1 !important;
}
.hd-header .wp-block-site-logo img {
  width: clamp(72px, 7vw, 100px);
  height: auto;
}
.hd-header .wp-block-site-title {
  font-size: clamp(1.55rem, 2.7vw, 2.15rem) !important;
  line-height: 1.12;
}
.hd-header .wp-block-site-tagline {
  margin-top: .25rem;
}
.hd-hero {
  padding-block: clamp(3.75rem, 7vw, 6rem) !important;
}
.hd-quicklinks a,
#angebote a {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
#termine .hd-card h3,
#termine .hd-card .wp-block-heading {
  color: var(--wp--preset--color--ink) !important;
}
#termine .hd-card p {
  color: #4a5d53 !important;
}
#angebote .wp-block-columns,
.hd-news .wp-block-post-template {
  align-items: stretch;
}
#angebote .wp-block-column,
.hd-news .wp-block-post-template > li {
  display: flex;
}
#angebote .hd-card,
.hd-news .hd-card {
  width: 100%;
}
.hd-news .hd-card {
  display: flex;
  flex-direction: column;
}
.hd-news .wp-block-post-excerpt,
.hd-news .wp-block-post-date {
  color: #4a5d53 !important;
}
.hd-news .wp-block-post-excerpt__more-text {
  margin-top: auto;
}
.hd-news details:has(> summary:empty) {
  display: none;
}
.hd-news .wp-block-post-title {
  overflow-wrap: anywhere;
}
.wp-block-video.is-style-hasseldelle-video,
.wp-block-embed.is-style-hasseldelle-video {
  margin-block: clamp(1.5rem, 4vw, 2.75rem);
}
.wp-block-video.is-style-hasseldelle-video video,
.wp-block-embed.is-style-hasseldelle-video .wp-block-embed__wrapper {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  background: #000;
  box-shadow: var(--hd-shadow);
}
.wp-block-video.is-style-hasseldelle-video video {
  height: auto;
}
.wp-block-embed.is-style-hasseldelle-video .wp-block-embed__wrapper {
  position: relative;
}
.wp-block-embed.is-style-hasseldelle-video.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}
.wp-block-embed.is-style-hasseldelle-video iframe {
  max-width: 100%;
  border: 0;
}
.wp-block-embed.is-style-hasseldelle-video.wp-embed-aspect-16-9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wp-block-video.is-style-hasseldelle-video figcaption,
.wp-block-embed.is-style-hasseldelle-video figcaption {
  margin-top: .65rem;
  color: var(--wp--preset--color--soft);
  font-size: var(--wp--preset--font-size--small);
  text-align: left;
}
@media (max-width: 781px) {
  .hd-topbar { display: none !important; }
  .hd-hero::after { inset: 0; opacity: .1; }
  .hd-quicklinks { margin: -20px 16px 0 !important; }
  .hd-header .wp-block-site-logo img { width: 64px; }
  .hd-header .wp-block-site-title { font-size: 1.35rem !important; }
  .hd-hero { padding-block: 3.25rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hd-card, .hd-quicklink { transition: none; }
}