/* default.css */
:root {
    --primary01: #78575F; 
    --primary02: #B0918B; 
    --accent01:  #FFE8C2;   
    --accent02:  #E1F0DA; 
    --cream: #E5DDC3; 
    --second01: #AAC289; 
    --second02: #63966C; 
    --second03: #333333;
    --text: #000;
    --text-light: #fff;
    --transition-speed:  0.4s; 
    --radius-lg:16px; 
    --radius-sm:8px; 
}
*, *::before, *::after { box-sizing: border-box; }
body {font-family: 'Montserrat', sans-serif; color: var(--text-dark); background: #fafafa; background-color: #fff; margin: 0; font-family: Roboto, sans-serif; color: var(--text);}
header {position: relative; background-color: var(--primary02); background: linear-gradient(to right, var(--primary02), var(--primary01)); overflow: visible; padding: 120px 0 0px 0; z-index: 100;}
.header-content {display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; position: absolute; top: 0; width: 100%; z-index: 10;}
.logo {font-size: 1.5rem; font-weight: bold; color: white; text-decoration: none;}

/* Navigation Styles */
nav {font-size: larger; font-weight: 700; display: flex; gap: 15px; margin-right: 40px;z-index: 999;}
nav a {text-decoration: none; color: white;}
#nav-toggle {display: none;font-size: 1.5rem;background: none;border: none;color: white;cursor: pointer;z-index: 20;}
nav#internalnav a {color: #000;}



.content {background-color: #ffffff; max-width: 960px; margin: 0 auto; padding: 20px 40px; text-align: justify;}
.content--wide {max-width: 1100px;}
.footer {background-color: var(--cream); padding: 20px; text-align: center;}
.social-links {list-style-type: none; margin: 0 40px 0 0; padding: 0; display: flex;}
.social-links li {margin-left: 20px;}
.social-links a, .social-links a:visited {text-decoration: none; color: var(--primary01); padding: 10px 15px;}
.social-links a:hover {color: var(--second02); text-decoration: none;}
.headerwelcome {padding: 1em 0; text-align: center;}
.headerwelcome p {color: var(--second02); font-size: 35px; font-weight: 700; margin: 0; padding: 0;}
.headerwelcome p:first-child {font-size: 47px;}
h1, h2, h3 {color: var(--second02); text-transform: uppercase; letter-spacing: 1px;}
button:disabled {background-color: #A0A0A0; color: #fff; cursor: none; opacity: 0.6;}
button, input[type="file"]::file-selector-button {font-family: 'Roboto', sans-serif; background-color: var(--primary02); color: #fff; border: none; padding: 10px 20px; font-size: 1rem; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease;}
button:hover, input[type="file"]::file-selector-button:hover {background-color: var(--primary01);}
input, textarea {font-family: 'Roboto', sans-serif; padding: 10px; font-size: 1rem;}
input[type="text"][readonly] {background-color: #f7f7f7; color: #555; border: 1px solid #ccc; cursor: not-allowed;}
select {font-family: 'Roboto', sans-serif; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; color: #333; width: 100%; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;}
select:focus, input:focus {outline: none; border-color: #007BFF; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);}
@media (max-width: 768px) {
    nav {flex-direction: column; align-items: flex-end;}
    #main-nav a {display: block;color: white;padding: 0.5rem 0;font-size: 1.1rem;}
    #nav-toggle {display: block; position: absolute; top: 10px; right:20px; z-index: 1200;}
    #main-nav {position: absolute;top: 60px;right: 0px;background: var(--second01);flex-direction: column;padding: 1rem;border-radius: var(--radius-sm);display: none !important; gap: 0.75rem;z-index: 1100;box-sizing: border-box;}
    #main-nav.open {display: flex !important;}
}

.events-panel {margin: 2rem 0; padding: 1.6rem; border-radius: 24px; background: linear-gradient(180deg, #fffdf9 0%, #f7f3ee 100%); border: 1px solid rgba(176, 145, 139, 0.18); box-shadow: 0 24px 48px rgba(51, 51, 51, 0.08);}
.events-panel--default {position: relative; padding: 1.85rem; border-radius: 28px; background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,244,238,0.98) 100%),
    linear-gradient(135deg, rgba(229,221,195,0.55), rgba(255,248,239,0.9)); box-shadow: 0 28px 60px rgba(51, 51, 51, 0.1);}
.events-panel--default::before {content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 28px 28px 0 0; background: linear-gradient(90deg, rgba(120,87,95,0.8), rgba(176,145,139,0.45), rgba(229,221,195,0));}
.events-panel--compact {padding: 1.15rem; border-radius: 20px; background: linear-gradient(180deg, #fffdfa 0%, #f8f4ee 100%);}
.events-panel--compact .events-panel__header {margin-bottom: 0.85rem;}
.events-panel--compact .events-panel__header h2 {font-size: 1.05rem;}
.events-panel--compact .events-panel__link {display: none;}
.events-panel__header {display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.25rem;}
.events-panel__header h2 {margin: 0;}
.events-panel__intro {margin: 0.4rem 0 0; color: #555; line-height: 1.5;}
.events-panel--default .events-panel__header {margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(176,145,139,0.14);}
.events-panel--default .events-panel__header > div {max-width: 700px;}
.events-panel--default .events-panel__header > div::before {content: "MySportLights on tour"; display: inline-block; margin-bottom: 0.65rem; color: #7d5c57; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;}
.events-panel--default .events-panel__header h2 {font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.1;}
.events-panel--default .events-panel__intro {margin-top: 0.6rem; font-size: 1rem; color: #4f4a47; max-width: 56ch;}
.events-panel__link {display: inline-flex; align-items: center; white-space: nowrap; color: var(--primary01); font-weight: 700; text-decoration: none;}
.events-panel__link:hover {color: var(--second02);}
.events-panel--default .events-panel__link {padding: 0.8rem 1rem; border-radius: 999px; background: rgba(120,87,95,0.08); border: 1px solid rgba(120,87,95,0.14); color: #3f3135; box-shadow: 0 10px 22px rgba(51,51,51,0.06);}
.events-panel--default .events-panel__link::after {content: "↗"; margin-left: 0.55rem; font-size: 0.95em;}
.events-panel--default .events-panel__link:hover {color: #2d2326; border-color: rgba(120,87,95,0.26); background: rgba(120,87,95,0.12);}
.events-panel__footer {margin-top: 1.1rem;}
.events-panel__button {display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.75rem 1.15rem; border-radius: 999px; background: var(--second03); color: var(--text-light); font-weight: 700; text-decoration: none; box-shadow: 0 12px 24px rgba(51,51,51,0.16); transition: transform 0.2s ease, box-shadow 0.2s ease;}
.events-panel__button:hover {transform: translateY(-1px); box-shadow: 0 16px 28px rgba(51,51,51,0.22);}
.events-panel--compact .events-panel__footer {margin-top: 0.85rem;}
.events-panel--compact .events-panel__button {min-height: 40px; padding: 0.62rem 0.95rem; font-size: 0.92rem; box-shadow: none;}
.events-compact {display: grid; gap: 0.7rem;}
.events-compact-card {padding: 0.95rem 1rem; border-radius: 16px; background: rgba(255,255,255,0.82); border: 1px solid rgba(176,145,139,0.16);}
.events-compact-card__top {display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.55rem;}
.events-compact-card__date {font-size: 0.9rem; font-weight: 700; color: #5c4642;}
.events-compact-card__title {margin: 0; font-size: 1rem; line-height: 1.3; color: #2f2f2f;}
.events-compact-card__location {margin: 0.3rem 0 0; color: #666; font-size: 0.94rem; line-height: 1.4;}
.events-compact-card__actions {margin-top: 0.8rem;}
.events-compact-line {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.8rem 0.95rem; border-radius: 14px; background: rgba(255,255,255,0.62); border: 1px solid rgba(176,145,139,0.12);}
.events-compact-line__date {font-size: 0.84rem; font-weight: 700; color: #6b5450; white-space: nowrap;}
.events-compact-line__content {display: grid; gap: 0.14rem; min-width: 0;}
.events-compact-line__title {font-size: 0.93rem; font-weight: 700; color: #2f2f2f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.events-compact-line__location {font-size: 0.84rem; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.events-featured-layout {display: grid; gap: 1rem;}
.events-featured-layout--default {grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.82fr); align-items: stretch; gap: 1.1rem;}
.events-featured-card {padding: 1.35rem; border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,248,239,0.92)); border: 1px solid rgba(170, 194, 137, 0.28); box-shadow: 0 18px 32px rgba(51, 51, 51, 0.07);}
.events-panel--default .events-featured-card {position: relative; padding: 1.55rem; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(251,246,240,0.94)); border: 1px solid rgba(176,145,139,0.18); box-shadow: 0 20px 36px rgba(51, 51, 51, 0.08);}
.events-panel--default .events-featured-card::after {content: ""; position: absolute; inset: auto auto 0 0; width: 120px; height: 120px; border-radius: 0 22px 0 24px; background: radial-gradient(circle at bottom left, rgba(229,221,195,0.42), rgba(229,221,195,0)); pointer-events: none;}
.events-featured-card__head {display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem;}
.events-featured-card__date {display: inline-flex; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(176, 145, 139, 0.12); color: #5c4642; font-weight: 700; letter-spacing: 0.02em;}
.events-panel--default .events-featured-card__date {background: rgba(120,87,95,0.08); color: #4c3a3e;}
.events-featured-card__title {margin: 0; font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.15;}
.events-panel--default .events-featured-card__title {max-width: 13ch; font-size: clamp(1.75rem, 3.1vw, 2.45rem); line-height: 1.02; letter-spacing: -0.02em; color: #2a2524;}
.events-featured-card__location {margin: 0.55rem 0 0; font-size: 1.02rem; font-weight: 700; color: #3d3d3d;}
.events-panel--default .events-featured-card__location {font-size: 1.08rem; color: #3d3634;}
.events-featured-card__info {margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(176, 145, 139, 0.18); color: #4a4a4a; line-height: 1.5;}
.events-panel--default .events-featured-card__info {margin-top: 1.15rem; padding-top: 1.1rem; font-size: 1rem; color: #433f3d;}
.events-featured-card__note {margin: 0.55rem 0 0; color: #666; line-height: 1.5;}
.events-featured-card__actions {margin-top: 1rem;}
.events-followup {padding: 0.25rem 0 0;}
.events-panel--default .events-followup {display: grid; align-content: start; gap: 0.65rem; padding: 0.2rem 0 0;}
.events-followup__label {margin: 0 0 0.55rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7d5c57;}
.events-panel--default .events-followup__label {margin: 0; color: #6d5a56;}
.events-secondary-card {padding: 1rem 1.05rem; border-radius: 18px; background: rgba(255,255,255,0.78); border: 1px solid rgba(176, 145, 139, 0.16);}
.events-panel--default .events-secondary-card {padding: 1rem 1.05rem 1.05rem; border-radius: 20px; background: rgba(255,255,255,0.7); border: 1px solid rgba(176, 145, 139, 0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);}
.events-secondary-card__meta {display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-bottom: 0.55rem;}
.events-secondary-card__date {color: #5c4642; font-weight: 700;}
.events-panel--default .events-secondary-card__date {font-size: 0.9rem; color: #5f4d49;}
.events-secondary-card__title {margin: 0; font-size: 1rem; line-height: 1.3;}
.events-panel--default .events-secondary-card__title {font-size: 1.05rem; color: #2f2b2a;}
.events-secondary-card__location {margin: 0.35rem 0 0; color: #666; line-height: 1.45;}
.events-panel--default .events-secondary-card__location {font-size: 0.94rem;}
.events-list {display: grid; gap: 1rem;}
.events-list--default {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
.events-list--compact {grid-template-columns: 1fr;}
.events-list--detail {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.event-card {background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(170, 194, 137, 0.35); border-radius: 16px; padding: 1rem 1rem 0.95rem; box-shadow: 0 10px 18px rgba(51, 51, 51, 0.05);}
.event-card--compact {padding: 0.9rem 1rem;}
.event-card__meta {display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.92rem; color: #555;}
.event-card__status {display: inline-flex; align-items: center; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;}
.event-card__status.is-confirmed {background: rgba(99, 150, 108, 0.14); color: #3a6c43;}
.event-card__status.is-planned {background: rgba(176, 145, 139, 0.16); color: #7d5c57;}
.event-card__title {margin: 0 0 0.4rem; font-size: 1.1rem;}
.event-card__location,
.event-card__range,
.event-card__note {margin: 0.25rem 0 0; line-height: 1.45;}
.event-card__location {font-weight: 600;}
.event-card__range {color: #555;}
.event-card__note {color: #3b3b3b;}
.events-empty {margin: 0; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.7); color: #666;}
.events-empty--widget {padding: 1.15rem 1.2rem; border: 1px dashed rgba(176, 145, 139, 0.35); background: rgba(255,255,255,0.82);}
.events-overview {display: grid; gap: 2rem;}
.events-overview__hero {margin-bottom: 2rem; padding: 1.8rem; border-radius: 20px; background: linear-gradient(135deg, var(--accent02), #fff8ef);}
.events-overview__hero p {margin: 0.75rem 0 0; max-width: 700px; line-height: 1.6;}
.events-overview__section h2 {margin-bottom: 1rem;}
.events-page {display: grid; gap: 1.5rem; padding: 1.5rem 0 2rem;}
.events-page__hero {padding: 1.8rem 2rem; border-radius: 28px; background: linear-gradient(135deg, rgba(229,221,195,0.5), rgba(255,248,239,0.92)); border: 1px solid rgba(176,145,139,0.18); box-shadow: 0 22px 40px rgba(51,51,51,0.06);}
.events-page__hero h1 {margin: 0;}
.events-page__hero p {margin: 0.8rem 0 0; max-width: 760px; line-height: 1.6; color: #4d4d4d;}
.events-overview-section {padding: 1.35rem; border-radius: 24px; border: 1px solid rgba(176,145,139,0.14); box-shadow: 0 18px 34px rgba(51,51,51,0.05);}
.events-overview-section--upcoming {background: linear-gradient(180deg, rgba(246,249,239,0.9), rgba(255,255,255,0.96));}
.events-overview-section--past {background: linear-gradient(180deg, rgba(249,245,241,0.94), rgba(255,255,255,0.98));}
.events-overview-section__header {display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(176,145,139,0.12);}
.events-overview-section__header h2 {margin: 0;}
.events-overview-section__description {margin: 0.45rem 0 0; color: #666; line-height: 1.5;}
.events-overview-list {display: grid; gap: 0.95rem;}
.events-overview-card {display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; padding: 1rem 1.05rem; border-radius: 18px; background: rgba(255,255,255,0.88); border: 1px solid rgba(176,145,139,0.12);}
.events-overview-card__date {display: flex; align-items: flex-start;}
.events-overview-card__date time {display: inline-flex; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(176,145,139,0.1); color: #5c4642; font-weight: 700; line-height: 1.4;}
.events-overview-card__body {min-width: 0;}
.events-overview-card__head {display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;}
.events-overview-card__title {margin: 0; font-size: 1.08rem; line-height: 1.3;}
.events-overview-card__location {margin: 0.45rem 0 0; color: #3f3f3f; font-weight: 600; line-height: 1.45;}
.events-overview-card__note {margin: 0.55rem 0 0; color: #666; line-height: 1.55;}
.events-overview-card__actions {margin-top: 0.95rem;}
.events-mailto-button {display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0.65rem 1rem; border-radius: 999px; border: 1px solid rgba(120,87,95,0.18); background: rgba(255,255,255,0.88); color: #3c3134; font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;}
.events-mailto-button:hover {background: rgba(255,255,255,1); border-color: rgba(120,87,95,0.32); transform: translateY(-1px);}
.events-mailto-button--featured {background: rgba(51,51,51,0.94); color: #fff; border-color: rgba(51,51,51,0.94); box-shadow: 0 12px 24px rgba(51,51,51,0.12);}
.events-mailto-button--featured:hover {background: #232323; border-color: #232323;}
.events-mailto-button--compact {min-height: 38px; padding: 0.58rem 0.9rem; font-size: 0.9rem;}
.events-mailto-button--overview {font-size: 0.92rem;}
.events-empty--overview {padding: 1rem 1.1rem; border: 1px dashed rgba(176,145,139,0.28); background: rgba(255,255,255,0.72);}
.events-admin {display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1.5rem; align-items: start;}
.events-admin__panel {padding: 1.2rem; border: 1px solid rgba(176, 145, 139, 0.25); border-radius: 16px; background: #fff;}
.events-admin__panel h2 {margin-top: 0;}
.events-admin__message {margin-bottom: 1rem; padding: 0.9rem 1rem; border-radius: 10px;}
.events-admin__message--success {background: #dff2e2; color: #245d2d;}
.events-admin__message--error {background: #f7dddd; color: #7c2929;}
.events-admin__grid {display: grid; gap: 0.9rem;}
.events-admin__grid label {display: grid; gap: 0.35rem; font-weight: 600;}
.events-admin__grid input,
.events-admin__grid select,
.events-admin__grid textarea {width: 100%;}
.events-admin__grid textarea {min-height: 110px; resize: vertical;}
.events-admin__autocomplete {position: relative;}
.events-admin__suggestions {position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem); z-index: 20; display: grid; gap: 0.2rem; padding: 0.35rem; border: 1px solid rgba(176, 145, 139, 0.22); border-radius: 12px; background: #fff; box-shadow: 0 14px 24px rgba(51, 51, 51, 0.08);}
.events-admin__suggestions[hidden] {display: none;}
.events-admin__suggestion {width: 100%; padding: 0.7rem 0.8rem; text-align: left; background: transparent; color: #2f2f2f; border-radius: 8px;}
.events-admin__suggestion:hover {background: rgba(176, 145, 139, 0.08);}
.events-admin__checkbox {display: flex !important; align-items: center; gap: 0.6rem;}
.events-admin__checkbox input {width: auto;}
.events-admin__actions {display: flex; gap: 0.75rem; flex-wrap: wrap;}
.events-admin__table-wrap {overflow-x: auto;}
.events-admin__table {width: 100%; border-collapse: collapse;}
.events-admin__table th,
.events-admin__table td {padding: 0.75rem; border-bottom: 1px solid #e6e2db; text-align: left; vertical-align: top;}
.events-admin__table th {font-size: 0.9rem; color: #555;}
.events-admin__cell-note {margin-top: 0.35rem; color: #666; font-size: 0.9rem; line-height: 1.45;}
.events-admin__visibility {display: inline-flex; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;}
.events-admin__visibility--visible {background: rgba(99, 150, 108, 0.14); color: #3a6c43;}
.events-admin__visibility--hidden {background: rgba(176, 145, 139, 0.16); color: #7d5c57;}
.events-admin__row-actions {display: flex; gap: 0.5rem; flex-wrap: wrap;}
.events-admin__row-actions form {margin: 0;}

@media (max-width: 860px) {
    .events-panel__header {flex-direction: column; align-items: flex-start;}
    .events-admin {grid-template-columns: 1fr;}
    .events-overview-card {grid-template-columns: 1fr;}
    .events-featured-layout--default {grid-template-columns: 1fr;}
}

@media (max-width: 640px) {
    .content {padding: 20px;}
    .events-overview__hero,
    .events-panel {padding: 1.15rem;}
    .events-panel--default {padding: 1.25rem;}
    .events-panel--default .events-panel__header > div::before {margin-bottom: 0.5rem; font-size: 0.72rem;}
    .events-panel--default .events-panel__header h2 {font-size: 1.35rem;}
    .events-panel--default .events-panel__link {width: 100%; justify-content: center;}
    .events-page {padding-top: 0.5rem;}
    .events-page__hero,
    .events-overview-section {padding: 1.1rem;}
    .events-overview-card {padding: 0.95rem;}
    .events-overview-card__head {flex-direction: column; align-items: flex-start;}
    .events-compact-line {grid-template-columns: 1fr; align-items: flex-start;}
    .events-compact-card__top {flex-direction: column; align-items: flex-start;}
    .events-compact-line__title,
    .events-compact-line__location {white-space: normal;}
    .events-featured-card,
    .events-secondary-card {padding: 1rem;}
    .events-featured-card__head,
    .events-secondary-card__meta {flex-direction: column; align-items: flex-start;}
    .events-panel__button {width: 100%;}
    .events-mailto-button {width: 100%;}
    .events-list--default,
    .events-list--detail {grid-template-columns: 1fr;}
    .event-card__meta {flex-direction: column; align-items: flex-start;}
}