/* Readability and brand polish on top of brand.css: buttons, line length, home tiles, calendar, trip details.
   Several rules need !important because Divi prints per-module colours saved in page content. */

:root {
    --acc-radius: 3px;
    --acc-teal-tint: #e6f5f0;
}

/* ---- Buttons ----
   Divi buttons on light backgrounds were saved with old colours (black on Huts, white on the home page).
   All of them become the brand button. Buttons on photos (dark layout) keep their own style. */
body #page-container .et_pb_section .et_pb_button.et_pb_bg_layout_light,
body #page-container .et_pb_section .et_pb_button.et_pb_bg_layout_light:hover {
    color: #fff !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body #page-container .et_pb_section .et_pb_button.et_pb_bg_layout_light { background-color: var(--acc-green) !important; }
body #page-container .et_pb_section .et_pb_button.et_pb_bg_layout_light:hover { background-color: var(--acc-slate) !important; }

/* Divi's button settings round buttons into pills on hover; keep one shape. */
body #page-container .et_pb_button,
body #page-container .et_pb_button:hover {
    border-radius: var(--acc-radius) !important;
}

/* ---- Line length ----
   Text modules span the full content width (up to ~150 characters a line). Keep paragraphs readable. */
#main-content .et_pb_text_inner > p,
#main-content .et_pb_text_inner > ul,
#main-content .et_pb_text_inner > ol,
#main-content .et_pb_text_inner > blockquote,
.single-event .entry-content > p,
.single-post .entry-content > p {
    max-width: 70ch;
}
#main-content .et_pb_text_align_center .et_pb_text_inner > * { margin-left: auto; margin-right: auto; }

/* Pages that pull their first section up under the header (Huts, Community partner huts). */
.page:not(.home) #main-content .et_pb_section_0:not(.et_pb_with_background) { margin-top: 0 !important; }

/* ---- Home page ---- */

/* "Join the ACC" box: Blue Slate instead of the old dark grey. */
.et_pb_promo.et_pb_bg_layout_dark { background-color: var(--acc-slate) !important; }

/* Activity tiles: never break a word ("Mountaineerin-g"); three a row on tablets, where six are too narrow. */
.et_pb_blurb .et_pb_module_header { overflow-wrap: normal; word-break: normal; hyphens: none; }
.home .et_pb_blurb.et_pb_bg_layout_dark .et_pb_module_header { font-size: clamp(17px, 1.6vw, 24px); }
@media (min-width: 768px) and (max-width: 1100px) {
    .home .et_pb_row:has(> .et_pb_column_1_6 .et_pb_blurb) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .home .et_pb_row:has(> .et_pb_column_1_6 .et_pb_blurb) > .et_pb_column { width: auto !important; margin: 0 !important; }
    .home .et_pb_row:has(> .et_pb_column_1_6 .et_pb_blurb)::after { display: none; }
    .home .et_pb_blurb.et_pb_bg_layout_dark .et_pb_module_header { font-size: 21px; }
}

/* Upcoming trips list */
.eo-events-shortcode .eo-event-future { border: 1px solid var(--acc-line); border-radius: var(--acc-radius); }
.eo-events-shortcode .eo-event-future a { color: var(--acc-slate); }
.eo-events-shortcode .eo-event-future a:hover { color: var(--acc-green); }

/* ---- Calendar ---- */

/* Calendar / List switch */
.tablink {
    font-family: var(--acc-font-body);
    font-size: 16px;
    padding: 10px 22px;
    color: var(--acc-slate);
    background-color: var(--acc-arctic);
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius);
    cursor: pointer;
}
.tablink[style*="47, 119, 78"], .tablink[style*="2f774e"] { color: #fff; border-color: var(--acc-green); }

.fc-button { background-color: var(--acc-slate) !important; border-radius: var(--acc-radius) !important; }
.fc-today-button { background-color: #fff !important; color: var(--acc-slate) !important; border-color: var(--acc-line) !important; text-transform: none !important; }
.fc-head .fc-widget-header, .fc-day-header { background-color: var(--acc-arctic); }
.fc-unthemed td.fc-today { background-color: var(--acc-teal-tint) !important; }

/* Events: Arctic White with a stripe for the activity group, instead of the old pastel colour per category. */
.fc-event {
    --acc-cat: var(--acc-muted);
    background-color: var(--acc-arctic) !important;
    border: 0 !important;
    border-left: 4px solid var(--acc-cat) !important;
    border-radius: 2px !important;
    color: var(--acc-slate) !important;
    padding: 2px 6px !important;
}
.fc-event:hover { background-color: var(--acc-teal-tint) !important; }
.fc-event.category-climbing, .fc-event.category-ice-climbing,
.fc-event.category-scramble, .fc-event.category-mountaineering { --acc-cat: var(--acc-green); }
.fc-event.category-hiking, .fc-event.category-snow-shoeing { --acc-cat: var(--acc-teal); }
.fc-event.category-skiing { --acc-cat: var(--acc-slate); }
.fc-event.category-training, .fc-event.category-mentorship { --acc-cat: var(--acc-yellow); }
.fc-event.acc-event-cancelled { --acc-cat: #b8c4cc; opacity: .7; text-decoration: line-through; }

/* ---- Trip page details box ----
   A label above each value, in a grid, instead of two text columns that split items across columns. */
.event_detail_container .eo-event-meta {
    columns: auto !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px 32px;
    padding: 24px 28px !important;
    background: var(--acc-arctic);
    border-radius: var(--acc-radius);
}
.event_detail_container .eo-event-meta > li { font-size: 17px; line-height: 1.5; margin: 0; break-inside: avoid; }
.event_detail_container .eo-event-meta > li > strong:first-child {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    color: var(--acc-muted);
}
.event_detail_container .eo-event-meta > li.acc-meta-wide { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--acc-line); }
@media (max-width: 600px) {
    .event_detail_container .eo-event-meta { grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 20px !important; }
}

/* ---- Page banners (scripts/apply-page-banners.php) ---- */
/* Divi pads the next section as if it started the page; under a banner it only needs a little space. */
.acc-banner + .et_pb_section { padding-top: 24px !important; }