/*
 * Shout Easy Events - Go Torbay theme skin.
 *
 * Loaded only on pages that contain the [shout_easy_events] shortcode.
 * Overrides the plugin's --see-* tokens and adjusts a few specific classes
 * so the events directory page reads as part of the same site, not a bolt-on.
 *
 * The plugin scopes its CSS under #see-frontend-root, so we do the same to
 * avoid affecting anything else on the page.
 */

#see-frontend-root {
  /* Token overrides - colours and surface ------------------------------ */
  --see-primary:    var(--accent, #e8542a);
  --see-secondary:  var(--ink, #0a0a0a);
  --see-bg:         var(--bg, #faf9f6);
  --see-card:       var(--paper, #ffffff);
  --see-border:     var(--line, #e7e5dd);
  --see-muted:      var(--muted, #6b6b6b);
  --see-text:       var(--ink, #0a0a0a);
  --see-light:      var(--paper, #ffffff);

  /* Theme typography swap. Plugin defaults to Poppins 300; we use Inter +
     Fraunces so the directory matches the rest of the theme. */
  --see-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-weight: 400;
}

#see-frontend-root,
#see-frontend-root * { font-family: var(--see-font) !important; }

/* Headings should pick up the Fraunces editorial face ------------------ */
#see-frontend-root .see-hero h1,
#see-frontend-root .see-card-title,
#see-frontend-root .see-modal-title,
#see-frontend-root .see-logo-text {
  font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}

#see-frontend-root .see-hero h1 { line-height: 1.05; }

/* Eyebrow style for the plugin's location strapline ------------------- */
#see-frontend-root .see-hero-location {
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent);
}

/* Buttons - the plugin uses pill-shaped primaries; we use square ------ */
#see-frontend-root .see-btn,
#see-frontend-root button.see-btn,
#see-frontend-root .see-btn-primary,
#see-frontend-root .see-hero-cta {
  border-radius: 0 !important;
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px 22px;
}

#see-frontend-root .see-btn-primary,
#see-frontend-root .see-hero-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}
#see-frontend-root .see-btn-primary:hover,
#see-frontend-root .see-hero-cta:hover { filter: brightness(0.92); }

/* Cards - flat, hairline borders, no rounded corners ------------------ */
#see-frontend-root .see-grid,
#see-frontend-root .see-list { border-color: var(--line); background: var(--line); }

#see-frontend-root .see-event-card,
#see-frontend-root .see-list-item {
  border-radius: 0 !important;
  background: var(--paper);
  transition: background .2s;
}
#see-frontend-root .see-event-card:hover,
#see-frontend-root .see-list-item:hover {
  background: var(--tint, rgba(232,84,42,.08));
}

#see-frontend-root .see-card-title {
  font-size: 1.2rem;
  margin-top: 4px;
}

#see-frontend-root .see-card-meta {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600;
}

#see-frontend-root .see-card-price {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
}

/* Featured badge uses the accent --------------------------------------- */
#see-frontend-root .see-card-badge-featured {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  font-size: .65rem;
}

/* Header inside the shortcode: keep the nav (Sign In / Register / My Events)
   visible so venue members can log in, but hide the duplicate SEE logo since
   the theme already supplies branding. */
#see-frontend-root .see-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
#see-frontend-root .see-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
#see-frontend-root .see-logo { display: none; }
#see-frontend-root .see-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
#see-frontend-root .see-nav-link {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 4px;
}
#see-frontend-root .see-nav-link.active,
#see-frontend-root .see-nav-link:hover { color: var(--accent); }
#see-frontend-root .see-nav .see-btn-ghost,
#see-frontend-root .see-nav .see-btn-primary {
  font-size: .8rem !important;
  padding: 9px 16px !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Hero block - knock back the plugin's hero to a tighter editorial band */
#see-frontend-root .see-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
#see-frontend-root .see-hero-inner { padding: 56px 24px 40px; text-align: left; max-width: 1200px; }

/* Search + filter chips ------------------------------------------------ */
#see-frontend-root .see-search input,
#see-frontend-root .see-filter select,
#see-frontend-root .see-search,
#see-frontend-root input[type="text"],
#see-frontend-root input[type="email"],
#see-frontend-root input[type="password"],
#see-frontend-root input[type="search"],
#see-frontend-root input[type="number"],
#see-frontend-root input[type="date"],
#see-frontend-root input[type="time"],
#see-frontend-root input[type="url"],
#see-frontend-root textarea,
#see-frontend-root select {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: inherit;
}

#see-frontend-root input:focus,
#see-frontend-root select:focus,
#see-frontend-root textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

#see-frontend-root .see-chip,
#see-frontend-root .see-filter-pill,
#see-frontend-root .see-nav-link {
  border-radius: 0 !important;
}

/* Modal - flat -------------------------------------------------------- */
#see-frontend-root .see-modal,
#see-frontend-root .see-modal-content {
  border-radius: 0 !important;
  background: var(--paper);
}

/* Dashboard table-style member area ---------------------------------- */
#see-frontend-root .see-dashboard-card,
#see-frontend-root .see-form-card {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
}

/* Dark-mode fallthrough: plugin doesn't know about dark mode, so any
   `background: #ffffff` direct rule falls through. The variable overrides
   above carry most of it; this catches the stragglers. */
html[data-theme="dark"] #see-frontend-root,
html[data-theme="dark"] #see-frontend-root .see-event-card,
html[data-theme="dark"] #see-frontend-root .see-list-item,
html[data-theme="dark"] #see-frontend-root .see-modal-content,
html[data-theme="dark"] #see-frontend-root .see-dashboard-card,
html[data-theme="dark"] #see-frontend-root .see-form-card {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] #see-frontend-root .see-hero { background: var(--bg) !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #see-frontend-root,
  html:not([data-theme="light"]) #see-frontend-root .see-event-card,
  html:not([data-theme="light"]) #see-frontend-root .see-list-item,
  html:not([data-theme="light"]) #see-frontend-root .see-modal-content,
  html:not([data-theme="light"]) #see-frontend-root .see-dashboard-card,
  html:not([data-theme="light"]) #see-frontend-root .see-form-card {
    background: var(--paper) !important;
    color: var(--ink) !important;
  }
  html:not([data-theme="light"]) #see-frontend-root .see-hero { background: var(--bg) !important; }
}