/* =============================================================
   Schedule & Template Styles

   Covers all pages using Event Schedule Manager (ESM) output:
   the schedule grid, speakers list, and individual session /
   speaker template pages.

   Sections:
     1. CSS Custom Properties
     2. Shared across all ESM pages
     3. Schedule page         [tec_schedule content="excerpt"]
     4. Speakers list page    [tec_speakers]
     5. Shared: Speaker card component
     6. Shared: Single page templates
     7. Single session page   (single-tec_session)
     8. Single speaker page   (single-tec_speaker)
   ============================================================= */

/* =============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================= */

/* :root:root doubled for specificity — overrides the plugin's own :root {} declarations */
:root:root {
  /* Colors — mapped to Elementor globals where possible, hardcoded fallbacks below */
  --tec-custom-color-light-blue: #3f80bd;
  --tec-custom-color-yellow: #ffc200;
  --tec-custom-color-green: #bbc640;
  --tec-custom-color-fafaf8: #fafaf8;
  --tec-custom-color-d4d4b9: #d4d4b9;
  --tec-custom-color-fafaf7: #fafaf7;
  --tec-custom-color-8bc640: #8bc640;

  /* --tec-custom-color-primary: #204D8A; */
  --tec-custom-color-primary: var(--e-global-color-primary, #204d8a);
  /* --tec-custom-color-secondary: #E9E9DD; */
  --tec-custom-color-secondary: var(--e-global-color-secondary, #e9e9dd);
  /* --tec-custom-color-text: #54575A; */
  --tec-custom-color-text: var(--e-global-color-text, #54575a);
  /* --tec-custom-color-accent: #07224B; */
  --tec-custom-color-accent: var(--e-global-color-accent, #07224b);

  /* Gold gradient — active day tab state and mainstage session border */
  --tec-custom-color-gradient: linear-gradient(
    282deg,
    #fbe791 6.31%,
    #f5c243 22.76%,
    #f09136 39.21%
  );

  /* Plugin variable overrides — the plugin uses --tec-color-* internally */
  --tec-color-table-background: transparent;
  --tec-color-table-border: transparent;
  --tec-color-table-text: var(--tec-custom-color-text);
  --tec-color-table-header-text: unset;
  --tec-color-tabs-button-background: transparent;
  --tec-color-tabs-button-text: var(--tec-custom-color-accent);
  --tec-color-tabs-border: transparent;
  --tec-color-mainstage-border: var(--tec-custom-color-yellow);
  --tec-color-session-tag-link-background: var(--tec-custom-color-yellow);
  --tec-color-session-tag-link-text: var(--tec-color-white);
}

/* The plugin re-declares some vars under color scheme classes, overriding :root */
:root .tec-color-scheme-light.tec-color-scheme-light,
:root .tec-color-scheme-dark.tec-color-scheme-dark {
  --tec-color-table-background: transparent;
  --tec-color-mainstage-border: var(--tec-custom-color-gradient);
}

/* =============================================================
   2. SHARED ACROSS ALL ESM PAGES
   ============================================================= */

/* elementor-19 / element-eda4c91 are hardcoded Elementor template IDs —
   if the footer template is ever recreated, update these selectors */
body.tec-event-schedule-shortcode
  .elementor-19
  .elementor-element.elementor-element-eda4c91,
body.single-tec_speaker
  .elementor-19
  .elementor-element.elementor-element-eda4c91,
body.single-tec_session
  .elementor-19
  .elementor-element.elementor-element-eda4c91,
body:has(.tec-speakers)
  .elementor-19
  .elementor-element.elementor-element-eda4c91 {
  --margin-top: 0;
}

/* The plugin outputs tec-site-main as flex; reset to block. */
.tec-site-main.tec-site-main {
  display: block;
}

/* Hello Elementor theme adds zebra-stripe and hover highlight to all tables */
table caption + thead tr:first-child td,
table caption + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child td,
table thead:first-child tr:first-child th {
  border-block-start-color: transparent;
}

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th,
table tbody tr:hover > td,
table tbody tr:hover > th {
  background-color: transparent;
}

/* =============================================================
   3. SCHEDULE PAGE  —  [tec_schedule content="excerpt"]
   Shortcode output, body.tec-event-schedule-shortcode
   ============================================================= */

/* --- Day tabs --------------------------------------------- */

.tec-tabs * {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
}

.tec-tabs.tec-tabs .tec-tabs-list {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Copied from the Elementor accent button style */
.tec-tabs.tec-tabs .tec-tabs-list .tec-tabs-list-button {
  border: 2px solid !important;
  background: transparent;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  text-transform: var(--e-global-typography-accent-text-transform);
  line-height: var(--e-global-typography-accent-line-height);
  letter-spacing: var(--e-global-typography-accent-letter-spacing);
  word-spacing: var(--e-global-typography-accent-word-spacing);
  fill: var(--e-global-color-accent);
  color: var(--e-global-color-accent);
  border-radius: 100px;
  padding: 20px;
  transition: none !important;
}

.tec-tabs.tec-tabs .tec-tabs-list .tec-tabs-list-button:hover,
.tec-tabs.tec-tabs .tec-tabs-list .tec-tabs-list-button[aria-selected="true"] {
  background-image: var(--tec-custom-color-gradient);
  background-size: calc(100% + 10px) auto; /* prevents gradient repeat clipping */
  background-position: -5px 0;
  color: var(--e-global-color-accent);
  border-color: transparent !important;
}

/* --- Schedule table layout -------------------------------- */

.tec-layout-table.tec-layout-table tr td {
  padding: 0;
}

.tec-schedule.tec-layout-table tbody,
.tec-schedule.tec-layout-table td,
.tec-schedule.tec-layout-table th,
.tec-schedule.tec-layout-table tr {
  --tec-color-table-border: transparent;
  text-align: left;
}

/* Triple class for specificity */
.tec-layout-table.tec-layout-table.tec-layout-table tbody,
.tec-layout-table.tec-layout-table.tec-layout-table td,
.tec-layout-table.tec-layout-table.tec-layout-table th,
.tec-layout-table.tec-layout-table.tec-layout-table tr {
  vertical-align: baseline;
  border: 0;
}

/* visibility: hidden keeps column widths; display: none would collapse them */
.tec-layout-table.tec-layout-table thead th {
  visibility: hidden;
}

.tec-layout-table.tec-layout-table .tec-col-time {
  width: 20%;
}

/* --- Time column ------------------------------------------ */

.tec-layout-table.tec-layout-table .tec-time {
  font-family: Acumin, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tec-custom-color-accent);
  text-align: right;
}

@media screen and (max-width: 700px) {
  .tec-layout-table.tec-layout-table .tec-time {
    text-align: left;
    padding-top: 20px;
  }
}

/* --- Session card (.tec-session-cell-content)
   Card chrome is duplicated in §8 (.tec-custom-speaker-session) —
   same visual, but padding and title font-size differ. ---------- */

.tec-layout-table.tec-layout-table .tec-session-cell-content {
  border-radius: 20px;
  padding: 40px;
  background: white;
  border: solid 2px var(--tec-custom-color-green);
  margin: 20px;
  transition: transform 0.1s ease-in-out;
}

@media screen and (max-width: 700px) {
  .tec-layout-table.tec-layout-table .tec-session-cell-content {
    margin: 10px 0;
    padding: 40px 20px;
  }
}

.tec-layout-table.tec-layout-table .tec-session-cell-content:hover {
  border-color: var(--tec-custom-color-accent);
  /* transform: translateY(-5px); */
}

.tec-layout-table.tec-layout-table
  .tec-session-cell-content
  .tec-session-title {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 0.9;
  color: var(--tec-custom-color-primary);
}

.tec-layout-table.tec-layout-table
  .tec-session-cell-content
  a.tec-session-title:hover {
  text-decoration: underline;
}

/* --- Session description (.tec-session-content)
   Output by [tec_schedule content="excerpt"] — placed between
   the session title and speakers list by the plugin. ----------- */

.tec-layout-table.tec-layout-table .tec-session-content {
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  margin: 0;
}

/* --- Keynote session card variant
   .tec-session-keynote is a plugin-assigned class on the <td>.
   Gradient values are duplicated in §8 for .tec-custom-speaker-session. */

.tec-layout-table.tec-layout-table
  .tec-session-keynote
  .tec-session-cell-content {
  background-color: var(--tec-custom-color-accent);
  background-image: linear-gradient(
    12deg,
    var(--tec-custom-color-accent) 6.31%,
    var(--tec-custom-color-accent) 50%,
    var(--tec-custom-color-primary) 100%
  );
  color: #fff;
  border-color: var(--tec-custom-color-accent);
}

.tec-layout-table.tec-layout-table
  .tec-session-keynote
  .tec-session-cell-content:hover {
  border-color: var(--tec-custom-color-green);
}

.tec-layout-table.tec-layout-table
  .tec-session-keynote
  .tec-session-cell-content
  .tec-session-title {
  color: #fff;
}

.tec-session-keynote .tec-session-speaker-name.tec-session-speaker-name,
.tec-session-keynote .tec-session-speaker-title-organization {
  color: #fff;
}

/* --- Speaker chips inside session cards
   Inner layout (name, title, headshot) is in §5. --------------- */

.tec-layout-table.tec-layout-table .tec-session-speakers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-top: 30px;
}

@media screen and (max-width: 700px) {
  .tec-layout-table.tec-layout-table .tec-session-speakers {
    padding: 0;
  }
}

.tec-layout-table.tec-layout-table .tec-session-speakers::before {
  content: none;
}

.tec-session-speaker.tec-session-speaker:first-child {
  margin-top: 0;
}

/* Doubled class for specificity — headshot spans full height via grid-row in §5 */
.tec-session-speaker.tec-session-speaker {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 75px 1fr;
  grid-template-rows: 1fr repeat(2, auto) 1fr;
  column-gap: 5px;
}

/* =============================================================
   4. SPEAKERS LIST PAGE  —  [tec_speakers]
   ============================================================= */

.tec-speakers.tec-speakers {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}

.tec-speakers.tec-speakers .tec-speaker {
  flex: 0 1 calc(33% - 40px);
}

@media screen and (max-width: 700px) {
  .tec-speakers.tec-speakers .tec-speaker {
    flex-basis: calc(50% - 40px);
  }
}

/* --e-global-typography-8c55bd7-font-size is a custom Elementor typography
   preset ID — not a typo. Also used in §6 for template page h2s. */
.tec-speakers.tec-speakers .tec-speaker-name {
  font-size: var(--e-global-typography-8c55bd7-font-size);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 800;
  line-height: var(--e-global-typography-8c55bd7-line-height);
  margin-bottom: 0;
  color: var(--tec-custom-color-accent);
}

.tec-speakers.tec-speakers .tec-speaker-name a {
  color: inherit;
}

.tec-speakers.tec-speakers .tec-speaker-name a:hover {
  text-decoration: underline;
}

.tec-speakers.tec-speakers .tec-speaker .tec-speaker-title-organization {
  font-weight: 600;
  font-size: var(--e-global-typography-accent-font-size);
  line-height: 1.3;
  color: var(--tec-custom-color-text);
}

.tec-speakers.tec-speakers .tec-speaker .tec-speaker-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

/* =============================================================
   5. SHARED: SPEAKER CARD COMPONENT
   Headshot + name + title layout used in both the schedule grid
   (.tec-session-speaker) and the single session page
   (.tec-single-session-speakers-speaker). Grid container is
   defined on .tec-session-speaker in §3.
   ============================================================= */

.tec-session-speaker-name.tec-session-speaker-name,
.single-tec_session
  .tec-single-session-speakers
  .tec-single-session-speakers-speaker
  .tec-single-session-speakers-speaker-name {
  grid-column-start: 2;
  grid-row-start: 2;
  font-size: var(--e-global-typography-text-font-size);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0;
  color: var(--tec-custom-color-accent);
}

/* Names are linked on the single session page; plain text in the schedule grid */
.tec-single-session-speakers-speaker-name a {
  color: inherit;
}

.tec-single-session-speakers-speaker-name a:hover {
  text-decoration: underline;
}

.tec-session-speaker-title-organization.tec-session-speaker-title-organization,
.single-tec_session
  .tec-single-session-speakers
  .tec-single-session-speakers-speaker
  .tec-single-session-speakers-speaker-title-organization {
  grid-column-start: 2;
  grid-row-start: 3;
  font-weight: 600;
  font-size: var(--e-global-typography-accent-font-size);
  line-height: 1.3;
  color: var(--tec-custom-color-text);
}

/* grid-row: 1 / -1 makes the headshot span all rows so name + title center against it */
.tec-custom-speaker-headshot {
  grid-row: 1 / -1;
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
   6. SHARED: SINGLE PAGE TEMPLATES
   Base styles for session-template.php and speaker-template.php.
   ============================================================= */

.tec-content-area.tec-content-area {
  padding: 40px 0;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  color: var(--tec-custom-color-text);
}

.tec-content-area.tec-content-area h2 {
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
  /* secondary-font-size didn't match design; using custom preset ID instead */
  /* font-size: var(--e-global-typography-secondary-font-size); */
  font-size: var(--e-global-typography-8c55bd7-font-size);
  line-height: var(--e-global-typography-8c55bd7-line-height);
  font-weight: 700;
  color: var(--e-global-color-primary);
  margin: 0 0 10px;
}

/* Strip plugin default border and extra spacing from content regions */
.tec-site-main.tec-site-main .tec-single-entry-content,
.tec-site-main.tec-site-main .tec-single-session-speakers {
  border: 0;
  font-size: var(--e-global-typography-accent-font-size);
  color: var(--tec-custom-color-text);
  line-height: var(--e-global-typography-text-line-height);
  margin: 0;
  padding: 0;
}

/* =============================================================
   7. SINGLE SESSION PAGE  —  single-tec_session
   event-schedule-manager/session-template.php
   ============================================================= */

/* Two-column grid: description left, time + speakers right */
.single-tec_session.single-tec_session .tec-custom-session-grid {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

@media (min-width: 768px) {
  .single-tec_session.single-tec_session .tec-custom-session-grid {
    display: grid;
    grid-column-gap: 40px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.single-tec_session
  .tec-content-area.tec-content-area
  .tec-single-session-time {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 0.9;
  color: var(--tec-custom-color-accent);
}

.single-tec_session .tec-single-session-speakers {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}

.single-tec_session
  .tec-single-session-speakers
  .tec-single-session-speakers-speaker {
  border-radius: 20px;
  padding: 20px;
  background: #fff;
  border: solid 2px var(--tec-custom-color-green);
  margin: 0;
  transition: transform 0.1s ease-in-out;
}

.single-tec_session
  .tec-single-session-speakers
  .tec-single-session-speakers-speaker:hover {
  border-color: var(--tec-custom-color-accent);
}

/* =============================================================
   8. SINGLE SPEAKER PAGE  —  single-tec_speaker
   event-schedule-manager/speaker-template.php
   ============================================================= */

.single-tec_speaker .has-post-thumbnail .tec-speaker-grid {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

@media (min-width: 768px) {
  .single-tec_speaker .has-post-thumbnail .tec-speaker-grid {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Session cards — same visual as .tec-session-cell-content in §3,
   with smaller padding (20px vs 40px) and smaller title font (1.5rem vs 2rem) */
.tec-custom-speaker-sessions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tec-custom-speaker-session {
  border-radius: 20px;
  padding: 20px;
  background: white;
  border: solid 2px var(--tec-custom-color-green);
  margin: 20px;
  margin-inline: 0;
  transition: transform 0.1s ease-in-out;
}

@media screen and (max-width: 700px) {
  .tec-custom-speaker-session {
    margin: 10px 0;
    padding: 40px 20px;
  }
}

.tec-custom-speaker-session:hover {
  border-color: var(--tec-custom-color-accent);
  /* transform: translateY(-5px); */
}

.tec-custom-speaker-session a {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 0.9;
  color: var(--tec-custom-color-primary);
}

.tec-custom-speaker-session a:hover {
  text-decoration: underline;
}

/* Keynote — .tec-session-keynote comes from the session title slug, not type.
   Gradient values duplicated from §3. */
.tec-custom-speaker-session.tec-session-keynote {
  background-color: var(--tec-custom-color-accent);
  background-image: linear-gradient(
    12deg,
    var(--tec-custom-color-accent) 6.31%,
    var(--tec-custom-color-accent) 50%,
    var(--tec-custom-color-primary) 100%
  );
  color: #fff;
  border-color: var(--tec-custom-color-accent);
}

.tec-custom-speaker-session.tec-session-keynote:hover {
  border-color: var(--tec-custom-color-green);
}

.tec-custom-speaker-session.tec-session-keynote a {
  color: #fff;
}