/**
 * Office Events - Event Details Shortcode Styles
 * Version: 1.0.0
 * Irvine Company Office Brand Colors (from Brand Guide September 2022)
 *
 * Styles for [event_details] shortcode output
 */

/* Irvine Company Office Brand Colors */
:root {
  --ico-blue: #5B6E7F;    /* Pantone 540 — primary brand blue */
  --ico-ink: #58595B;     /* Pantone 431 — dark gray body text */
  --ico-line: #DCDDDE;    /* Pantone 427 — light gray keylines */
  --ico-accent: #00758D;  /* Pantone 3145 — teal accent */
  --ico-red: #DA291C;     /* Pantone 485 — red accent */
  --ico-white: #ffffff;
  --ico-muted: #8a8b8d;   /* Derived gray for labels */
}

/* Main container */
.oe-event-details {
  background: var(--ico-white);
  border: 1px solid var(--ico-line);
  padding: 30px;
  border-radius: 2px;
  margin: 20px 0;
}

/* Event title */
.oe-event-title {
  margin: 0 0 20px 0;
  color: var(--ico-blue);
  font-size: 28px;
  font-weight: 700;
}

/* Event description */
.oe-event-description {
  margin-bottom: 25px;
  line-height: 1.6;
  font-size: 1rem;
}

.oe-event-description p {
  font-size: 1rem;
}

/* Event meta container (definition list) */
.oe-event-meta {
  margin-bottom: 25px;
}

/* Meta items (date, time, timezone, location) */
.oe-event-date,
.oe-event-time,
.oe-event-timezone,
.oe-event-location {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Location needs flex-start for multi-line addresses */
.oe-event-location {
  align-items: flex-start;
}

/* Icon styling */
.oe-event-meta .dashicons {
  color: var(--ico-accent);
  font-size: 20px;
  flex-shrink: 0;
}

.oe-event-location .dashicons {
  margin-top: 2px;
}

/* Definition term (dt) styling */
.oe-event-meta dt {
  display: inline-block;
  width: 100px;
  color: var(--ico-muted);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  flex-shrink: 0;
}

.oe-event-location dt {
  margin-top: 2px;
}

/* Definition description (dd) styling */
.oe-event-meta dd {
  margin: 0;
  color: var(--ico-ink);
  font-size: 1rem;
}

.oe-event-date dd,
.oe-event-time dd,
.oe-event-location dd {
  color: var(--ico-ink);
  font-size: 1rem;
}

.oe-event-timezone dd {
  color: var(--ico-muted);
  font-size: 1rem;
}

.oe-event-location dd {
  flex: 1;
}

/* Calendar section */
.oe-event-calendar {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--ico-line);
}

/* Error messages */
.oe-calendar-error {
  color: var(--ico-red);
  padding: 10px;
  background: rgba(218, 41, 28, 0.1);
  border-left: 4px solid var(--ico-red);
  border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .oe-event-details {
    padding: 20px;
  }

  .oe-event-title {
    font-size: 24px;
  }

  .oe-event-meta dt {
    width: 90px;
  }
}

/* Stack meta items on very small screens */
@media (max-width: 375px) {
  .oe-event-date,
  .oe-event-time,
  .oe-event-timezone,
  .oe-event-location {
    flex-wrap: wrap;
  }

  .oe-event-meta dt {
    width: 100%;
    margin-bottom: 4px;
  }
}