/*
Theme Name: WFD Theme
Theme URI: https://wetfordays.com
Author: Matt Marion
Description: Custom theme for Wet For Days punk band. Black and white minimal design.
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Layout ── */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

/* ── Header & Nav ── */
.site-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #333;
    text-align: center;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.main-navigation a {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}

.main-navigation a:hover {
    text-decoration: underline;
}

/* ── Front Page ── */
.site-logo {
    margin: 0 auto 1.5rem;
    max-width: 500px;
}

.site-logo img,
.site-logo .custom-logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.site-logo .custom-logo-link {
    display: block;
}

/* Front page editable content from WordPress page editor */
.front-page-content {
    text-align: center;
}

.front-page-content p,
.front-page-content h1,
.front-page-content h2,
.front-page-content h3 {
    margin-bottom: 0.75rem;
}

.front-page-content h1,
.front-page-content h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.front-page-content p {
    font-size: 1.1rem;
    color: #ccc;
}

.album-announcement {
    font-size: 3rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    line-height: 1.2;
}

.album-availability {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 1.5rem;
}

/* ── Social Icons ── */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.25rem 0;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.social-icons a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* ── Generic Page Content ── */
.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entry-content {
    font-size: 1.1rem;
    line-height: 1.75;
    text-align: left;
}

.entry-content p {
    margin-bottom: 1rem;
}

.entry-content h2, .entry-content h3 {
    margin: 1.5rem 0 0.5rem;
    font-weight: 700;
}

.entry-content a {
    text-decoration: underline;
}

/* ── Shows / Events Calendar overrides ── */

/* Layer 1: CSS custom property overrides — drives the entire plugin color system */
.tribe-common {
    --tec-color-background-primary: #000000;
    --tec-color-background-secondary: #111111;
    --tec-color-background-tertiary: #1a1a1a;
    --tec-color-text-primary: #ffffff;
    --tec-color-text-secondary: #cccccc;
    --tec-color-text-disabled: #666666;
    --tec-color-accent-primary: #ffffff;
    --tec-color-accent-primary-hover: #cccccc;
    --tec-color-accent-primary-active: #aaaaaa;
    --tec-color-button-primary-background: transparent;
    --tec-color-button-primary-text: #ffffff;
    --tec-color-button-primary-border: transparent;
    --tec-color-border-default: #333333;
    --tec-color-border-active: #ffffff;
    --tec-grid-width: 100%;
    font-family: 'Lato', sans-serif !important;
}

/* Layer 2: Broad fallback selectors — catches anything not using variables */
.tribe-common,
.tribe-events,
.tribe-events-calendar,
.tribe-events-loop,
.tribe-events-single {
    background-color: #000 !important;
    color: #fff !important;
}

.tribe-common *,
.tribe-events *,
.tribe-events-single * {
    color: #fff !important;
    border-color: #333 !important;
}

/* Single event page classic template — specific element overrides */
.tribe-events-single-event-title,
.tribe-events-single-event-description,
.tribe-events-single-event-description p,
.tribe-events-single-section-title,
.tribe-events-event-meta,
.tribe-events-event-meta p,
.tribe-events-event-meta a,
.tribe-meta-value,
.tribe-meta-label,
.tribe-venue,
.tribe-venue-location,
.tribe-events-sub-nav,
.tribe-events-sub-nav a,
.tribe-events-nav-previous a,
.tribe-events-nav-next a {
    color: #fff !important;
}

/* Single event meta sections background */
.tribe-events-single-section,
.tribe-events-event-meta.primary,
.tribe-events-event-meta.secondary {
    background: transparent !important;
    background-color: transparent !important;
}

/* The single event post wrapper gets display:flex from TEC — reset to block
   so child sections stack vertically and span full width. */
.tribe-events-single .type-tribe_events {
    display: block !important;
}

/* Make the meta wrapper a centered flex row so Details and Venue sit
   side by side and are centered as a unit within the content area. */
.tribe-events-event-meta.primary {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 3rem !important;
    flex-wrap: wrap !important;
}

.tribe-events-meta-group {
    flex: 0 1 auto !important;
    min-width: 160px !important;
}

/* Single event date/time and meta alignment */
.tribe-events-schedule {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.tribe-events-single .tribe-events-event-meta,
.tribe-events-single-section,
.tribe-events-meta-group,
.tribe-events-meta-group ul,
.tribe-events-meta-group li,
.tribe-events-meta-group dl,
.tribe-events-meta-group dt,
.tribe-events-meta-group dd,
.tribe-meta-label,
.tribe-meta-value,
.tribe-venue,
.tribe-venue-location,
.tribe-address {
    text-align: center !important;
}

/* WordPress standard image alignment classes */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.alignright {
    float: right;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

/* All dropdown/panel/list containers — dark background */
.tribe-common [class*="__content"],
.tribe-common [class*="__list"],
.tribe-common [class*="__dropdown"],
.tribe-common [class*="-selector__"],
.tribe-events [class*="__content"],
.tribe-events [class*="__list"],
.tribe-events [class*="__dropdown"] {
    background: #111 !important;
    background-color: #111 !important;
}

/* Links */
.tribe-common a,
.tribe-events a {
    color: #fff !important;
    text-decoration: none !important;
}

.tribe-common a:hover,
.tribe-events a:hover {
    color: #ccc !important;
    text-decoration: underline !important;
}

/* Layer 3: Specific component rules */

/* Nav buttons (Previous / Today / Next) and all plugin buttons — borderless, white text */
.tribe-events-c-nav__list-item-link,
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today,
.tribe-button,
.tribe-common-c-btn,
.tribe-common-c-btn-border,
.tribe-events-c-subscribe-dropdown__button,
.tribe-common .tribe-events-c-view-selector__button {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 1.25rem !important;
}

.tribe-events-c-nav__list-item-link:hover,
.tribe-events .tribe-events-c-nav__prev:hover,
.tribe-events .tribe-events-c-nav__next:hover,
.tribe-events .tribe-events-c-nav__today:hover,
.tribe-common-c-btn:hover,
.tribe-common-c-btn-border:hover,
.tribe-events-c-subscribe-dropdown__button:hover,
.tribe-common .tribe-events-c-view-selector__button:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #ccc !important;
    text-decoration: underline !important;
}

/* Subscribe dropdown panel */
.tribe-events-c-subscribe-dropdown__content,
.tribe-events-c-subscribe-dropdown__list,
.tribe-events-c-subscribe-dropdown__list-item,
.tribe-events-c-subscribe-dropdown__list-item-link {
    background: #111 !important;
    background-color: #111 !important;
    color: #fff !important;
    border-color: #333 !important;
}

.tribe-events-c-subscribe-dropdown__list-item-link:hover {
    background: #222 !important;
    background-color: #222 !important;
    color: #fff !important;
}

/* View selector dropdown (List / Month / Day) */
.tribe-events-c-view-selector__content,
.tribe-events-c-view-selector__list,
.tribe-events-c-view-selector__list-item,
.tribe-events-c-view-selector__list-item-link {
    background: #111 !important;
    background-color: #111 !important;
    color: #fff !important;
    border-color: #333 !important;
}

.tribe-events-c-view-selector__list-item-link:hover,
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
    background: #222 !important;
    background-color: #222 !important;
    color: #fff !important;
}

/* SVG icons — fill white on inner paths only, not the svg container */
.tribe-common-c-svgicon svg path,
.tribe-common-c-svgicon svg circle,
.tribe-common-c-svgicon svg polygon,
.tribe-common-c-svgicon svg use {
    fill: #fff !important;
}

/* Let icon color inherit from the text color cascade */
.tribe-common-c-svgicon {
    color: #fff !important;
}

/* View selector icons — fill SVG paths white directly */
.tribe-events-c-view-selector__button svg path,
.tribe-events-c-view-selector__list-item-icon svg path {
    fill: #fff !important;
}

/* View selector icon — SVG collapses to 0x0 without explicit size */
.tribe-events-c-view-selector__button-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 19px !important;
    height: 19px !important;
}

.tribe-events-c-view-selector__button-icon-svg {
    width: 19px !important;
    height: 19px !important;
    display: inline-block !important;
    overflow: visible !important;
}

/* Specific icon overrides confirmed via DOM inspection */
/* "Upcoming" caret and top bar nav link icons — currently dark navy, invisible on black */
.tribe-events-c-top-bar__nav-link-icon-svg path,
.tribe-events-c-top-bar__nav-link-icon-svg circle,
.tribe-events-c-top-bar__nav-link-icon-svg rect {
    fill: #fff !important;
}

/* Previous/Next chevron arrows — currently grey */
.tribe-events-c-nav__prev-icon-svg path,
.tribe-events-c-nav__prev-icon-svg circle,
.tribe-events-c-nav__next-icon-svg path,
.tribe-events-c-nav__next-icon-svg circle {
    fill: #fff !important;
}

/* Date picker popup — Bootstrap Datepicker (confirmed via DOM inspection) */
.datepicker-dropdown {
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}

.datepicker-dropdown .table-condensed th,
.datepicker-dropdown .table-condensed td,
.datepicker-dropdown .datepicker-switch,
.datepicker-dropdown .dow {
    background: transparent !important;
    color: #fff !important;
    border-color: #333 !important;
}

.datepicker-dropdown .day {
    background: transparent !important;
    color: #fff !important;
}

.datepicker-dropdown .day:hover,
.datepicker-dropdown .datepicker-switch:hover {
    background: #333 !important;
}

.datepicker-dropdown .day.today {
    background: #fff !important;
    color: #000 !important;
}

.datepicker-dropdown .day.old,
.datepicker-dropdown .day.past,
.datepicker-dropdown .day.new {
    color: #555 !important;
}

.datepicker-dropdown .prev,
.datepicker-dropdown .next {
    background: transparent !important;
    color: #fff !important;
}

/* Calendar grid */
.tribe-events .tribe-events-calendar td,
.tribe-events .tribe-events-calendar th {
    border-color: #333 !important;
    background: #000 !important;
    color: #fff !important;
}

.tribe-events-calendar .tribe-events-has-events {
    background: #111 !important;
}

/* Search icon — uses different SVG class than the generic icon rule */
.tribe-events-c-events-bar__search-button-icon-svg path,
.tribe-events-c-events-bar__search-button-icon-svg circle {
    fill: #fff !important;
}

/* Search panel dropdown — white background confirmed via DOM inspection */
.tribe-events-c-events-bar__search-container {
    background: #111 !important;
    background-color: #111 !important;
    border: 1px solid #333 !important;
}

/* Month view today's date cell — white block confirmed via DOM inspection */
.tribe-events-calendar-month__day-cell--selected {
    background: transparent !important;
    background-color: transparent !important;
    outline: 1px solid #fff !important;
}

/* Top bar hidden today button */
.tribe-events-c-top-bar__today-button {
    background: transparent !important;
    background-color: transparent !important;
}

/* ── Footer ── */
.site-footer {
    border-top: 1px solid #333;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #aaa;
}

.site-footer a {
    color: #fff;
}

.site-footer .footer-social {
    margin-bottom: 0.75rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .album-announcement {
        font-size: 2rem;
    }

    .main-navigation ul {
        gap: 1.25rem;
    }

    .social-icons a {
        font-size: 1.6rem;
    }
}