/*====================================================================
  NEOhio Events – Front‑end stylesheet  ✨ Elegant Font edition
  ====================================================================
  CONTEXT ▸  Loaded by neon_events_enqueue_assets() for the public
            “Submit event” form, event list and mini‑calendar.

  DESIGN TOKENS (provided at runtime by PHP)⸺DO NOT REMOVE
    • --neon-font-size  | base font size (px)
    • --neon-gap        | global spacing unit (px)
    • --neon-btn-color  | primary/action colour (any CSS colour)

  EXTRA TOKENS (local defaults – can be overridden in :root later)
    • --neon-font       | font‑family stack
    • --neon-accent     | derived accent colour (falls back to btn‑colour)

  ====================================================================
  TABLE OF CONTENTS
  --------------------------------------------------------------------
   0.  Foundations  (fonts, variables, resets)
   1.  Form component  (submit‑event)
   2.  Utility banners / notices
   3.  Event list component
   4.  Mini calendar component
   5.  Accessibility helpers / theme overrides
   6.  Responsiveness
   7.  Print rules
  ====================================================================*/

/*====================================================================
  0 ▸  FOUNDATIONS
====================================================================*/
/* 0‑a ▸  Google Font (Nunito 400/600). Replace with local @font‑face
          if you enforce a strict CSP. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap");

:root {
    /* local defaults */
    --neon-font  : "Nunito", "Segoe UI", system-ui, sans-serif;
    --neon-accent: var(--neon-btn-color, #3b7ddd);

    /*  runtime tokens — inserted by PHP  */
    /*  --neon-font-size  */
    /*  --neon-gap        */
    /*  --neon-btn-color  */
}

/* 0‑b ▸  baseline typography & smooth rendering */
html {
    font-family: var(--neon-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 0‑c ▸  core plugin blocks share the same type scale */
.neon-event-form,
.neon-events-list,
.neon-events-calendar {
    font-family : var(--neon-font);
    font-size   : var(--neon-font-size);
    line-height : 1.42;
}

/* Remove bullets on the plugin’s own <ul> elements */
.neon-events-list,
.neon-event-form ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*====================================================================
  1 ▸  FORM COMPONENT (Submit Event)
====================================================================*/
.neon-event-form {
    display: grid;
    gap: var(--neon-gap);
}

/* <p> wrappers behave like tiny flex columns */
.neon-event-form p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35em;
}

.neon-event-form label {
    font-weight: 600;
}

/* -------------------------------------------------- */
/*  Controls                                          */
/* -------------------------------------------------- */
.neon-event-form input[type="text"],
.neon-event-form input[type="email"],
.neon-event-form input[type="date"],
.neon-event-form input[type="time"],
.neon-event-form select,
.neon-event-form textarea {
    width: 100%;
    padding: .6rem .8rem;

    font: inherit;
    color: inherit;

    background: #fff;
    border: 1px solid #888;        /* higher contrast than #bbb */
    border-radius: 4px;
    box-sizing: border-box;

    transition: border-color .15s ease;
}

.neon-event-form textarea {
    resize: vertical;
}

/* Focus ring for all interactive controls, incl. submit */
.neon-event-form input:focus,
.neon-event-form select:focus,
.neon-event-form textarea:focus,
.neon-submit:focus {
    outline: 2px solid var(--neon-accent);
    outline-offset: 2px;
}

/* -------------------------------------------------- */
/*  Grid helpers                                      */
/* -------------------------------------------------- */
.neon-row {                       /* base helper */
    display: grid;
    gap: var(--neon-gap);
}

.neon-row.two-cols   { grid-template-columns: repeat(2, 1fr); }
.neon-row.three-cols { grid-template-columns: repeat(3, 1fr); }

/* -------------------------------------------------- */
/*  Submit button                                     */
/* -------------------------------------------------- */
.neon-submit {
    align-self: flex-start;
    margin-top: calc(var(--neon-gap) * .5);

    cursor: pointer;
    background: var(--neon-accent);
    color: #fff;
    border: none;
    padding: .6rem 1.25rem;

    font: normal 600 1rem/1 var(--neon-font);
    border-radius: 4px;
    transition: filter .15s linear;
}

.neon-submit:hover,
.neon-submit:focus {
    filter: brightness(1.05);      /* subtle hover/active lift */
}

/*====================================================================
  2 ▸  UTILITY / FEEDBACK BANNERS
====================================================================*/
.neon-msg {
    margin-top: var(--neon-gap);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    font: normal 600 .95rem/1.4 var(--neon-font);
}

.neon-msg.ok  {color:#155724; background:#d4edda; border:1px solid #c3e6cb;}
.neon-msg.err {color:#721c24; background:#f8d7da; border:1px solid #f5c6cb;}

/* submission success notice (plugin output) */
.neon-notice.success {
    padding: .75rem 1.25rem;
    background: #e7fbe7;
    border: 1px solid #46b450;
    border-radius: 4px;
    margin-bottom: 20px;
}

/*====================================================================
  3 ▸  EVENT LIST COMPONENT
====================================================================*/
.neon-events-list {display: grid; gap: var(--neon-gap);} /* outer grid */

.neon-events-list li {
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;

    display: flex;
    flex-direction: column;
    gap: .35em;

    font-size: calc(var(--neon-font-size)*0.95);
}

.neon-events-list li strong {font-weight:600;}
.neon-events-list li em     {font-style:normal; color:#666; font-size:.85em;}

.neon-events-list a {
    color: var(--neon-accent);
    text-decoration: none;
}

.neon-events-list a:hover {text-decoration: underline;}

/*====================================================================
  4 ▸  MINI CALENDAR COMPONENT
====================================================================*/
.neon-events-calendar {
    width: 100%;
    max-width: 720px;

    border-collapse: collapse;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);

    font-size: calc(var(--neon-font-size)*.9);
    line-height: 1.35;
    margin: var(--neon-gap) auto;
}

/* caption (month title) */
.neon-events-calendar caption {
    font-weight: 600;
    font-size: 1.1em;
    padding: .75em 0 .5em;
    text-align: center;
}

/* weekday header */
.neon-events-calendar thead th {
    padding: .5em 0;
    border-bottom: 2px solid #e0e0e0;
    color: #555;
    font-weight: 500;
}

/* grid cells */
.neon-events-calendar td,
.neon-events-calendar th {
    width: 14.285%; /* 100/7 */
    min-height: 72px;
    padding: 6px 4px 10px;
    border: 1px solid #f1f1f1;
    text-align: center;
    vertical-align: top;
}

/* empty cells */
.neon-events-calendar td.empty {background:#fafafa;}

/* day numbers -------------------------------------------------------*/
.neon-events-calendar .day-num {
    display: inline-block;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.neon-events-calendar .day-num.no-events {color: #888;}

.neon-events-calendar .day-num.has-events {
    color: #fff;
    background: var(--neon-accent);
}

.neon-events-calendar .day-num.has-events:hover {background:#2c64b4;}

/* event links inside cells */
.neon-events-calendar a.cal-link {
    display: block;
    margin-top: 2px;
    padding-left: 14px;             /* room for bullet */
    position: relative;

    color: #333;
    font-size: .9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.neon-events-calendar a.cal-link:hover,
.neon-events-calendar a.cal-link:focus {text-decoration: underline;}

/* bullet indicator */
.neon-events-calendar a.cal-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-accent);
}

/* view switcher (calendar ⇄ list) */
.neon-events-switch {
    margin: 0 0 var(--neon-gap);
    text-align: right;
}

.neon-events-switch a {
    display: inline-block;
    font-weight: 600;
    color: var(--neon-accent);
    text-decoration: none;
}

.neon-events-switch a:hover {text-decoration: underline;}

/*====================================================================
  5 ▸  ACCESSIBILITY + THEME OVERRIDES
====================================================================*/
/* Some themes inject ::before squares on <li> – neutralise */
.neon-event-form  > *::before,
.neon-events-list > *::before {
    content: none !important;
}

/*====================================================================
  6 ▸  RESPONSIVENESS
====================================================================*/
@media (max-width: 640px) {
    .neon-row.two-cols,
    .neon-row.three-cols {grid-template-columns: 1fr;} /* stack */
}

@media (max-width: 560px) {
    .neon-events-calendar td,
    .neon-events-calendar th {
        min-height: 60px;
        font-size: .9rem;
    }
}

@media (max-width: 480px) {
    .neon-events-calendar td,
    .neon-events-calendar th {
        width: 38px;
        height: 38px;
    }
}

/*====================================================================
  7 ▸  PRINT
====================================================================*/
@media print {
    .neon-submit {display:none;}
}