.elementor-127 .elementor-element.elementor-element-29d0612a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-127 .elementor-element.elementor-element-29d0612a:not(.elementor-motion-effects-element-type-background), .elementor-127 .elementor-element.elementor-element-29d0612a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-e2b4868 );}.elementor-127 .elementor-element.elementor-element-4a7486bf{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-heading.elementor-widget-heading .elementor-heading-title a:hover{color:var( --e-global-color-primary );}.elementor-127 .elementor-element.elementor-element-680fd901 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-weight:700;color:var( --e-global-color-e2b4868 );}.elementor-127 .elementor-element.elementor-element-0bde8df{--display:flex;}.elementor-127 .elementor-element.elementor-element-bdb117f > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-127 .elementor-element.elementor-element-bdb117f.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-127 .elementor-element.elementor-element-bdb117f th{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );text-align:center;}.elementor-127 .elementor-element.elementor-element-bdb117f td{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-align:center;}.elementor-127 .elementor-element.elementor-element-a4112b6{--display:flex;}.elementor-127 .elementor-element.elementor-element-23792d8{--display:flex;}.elementor-127 .elementor-element.elementor-element-92202ae{--spacer-size:50px;}@media(min-width:768px){.elementor-127 .elementor-element.elementor-element-29d0612a{--content-width:1200px;}}@media(max-width:1024px){.elementor-127 .elementor-element.elementor-element-29d0612a{--padding-top:64px;--padding-bottom:64px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-127 .elementor-element.elementor-element-29d0612a{--padding-top:48px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for tm-table, class: .elementor-element-bdb117f *//* =====================================================
   DESKTOP TIMETABLE (Elementor Table Widget) - MATCH MOBILE
   Requires Table widget CSS class: tt-desktop
   ===================================================== */

/* Hide on mobile (cards take over) */
@media (max-width: 767px){
  .tt-desktop{ display: none !important; }
}

/* Target Elementor table reliably */
.tt-desktop table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(155,155,156,0.40);
  border-radius: 14px;
  overflow: hidden;
}

/* Header row */
.tt-desktop thead th{
  padding: 14px 12px;
  text-align: center;
  font-weight: 700;
  color: #104B82;
  background: rgba(16,75,130,0.08);
  border: 1px solid rgba(155,155,156,0.25);
  border-bottom: 2px solid #EEB520; /* Accent */
}

/* Body cells */
.tt-desktop tbody td{
  padding: 16px 12px;
  text-align: center;
  vertical-align: middle;
  color: #3C3C3C;
  border: 1px solid rgba(155,155,156,0.25);
}

/* Time column */
.tt-desktop tbody td:first-child{
  text-align: left;
  font-weight: 700;
  background: rgba(155,155,156,0.10);
  white-space: nowrap;
}

/* ===== Subject colour palette (same as mobile) ===== */
.tt-desktop tbody td.tt-s1{ background:#E7EFF7; }
.tt-desktop tbody td.tt-s2{ background:#F5F2E8; }
.tt-desktop tbody td.tt-s3{ background:#EEF4EF; }
.tt-desktop tbody td.tt-s4{ background:#F7ECEF; }
.tt-desktop tbody td.tt-s5{ background:#EDEAF6; }
.tt-desktop tbody td.tt-home{ background:#FFF3D6; border-color:#EEB520; font-weight:700; }

/* ===== Grey rows (Recess, Lunch/Tutorials, Final row except Subject 5) ===== */
.tt-desktop tbody tr.tt-grey-row td{
  background: #F2F3F4;
}
.tt-desktop tbody tr.tt-grey-row td:not(:first-child){
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Final row: grey background but keep text normal weight */
.tt-desktop tbody tr.tt-final-row td{
  background: #F2F3F4;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Changeover row */
.tt-desktop tbody tr.tt-changeover-row td{
  background: #ffffff;
  color: #6a6a6a;
  font-size: 13px;
}
.tt-desktop tbody tr.tt-changeover-row td:nth-child(4){
  font-style: italic;
}

/* --- IMPORTANT PART ---
   Apply colours by exact row/column positions to match your timetable image
   (because the Table widget doesn’t let us tag individual cells easily)
*/

/* Row 1: 8:45 - 10:15  (Mon1 Tue2 Wed3 Thu4 Fri5) */
.tt-desktop tbody tr:nth-child(1) td:nth-child(2){ background:#E7EFF7; } /* S1 */
.tt-desktop tbody tr:nth-child(1) td:nth-child(3){ background:#F5F2E8; } /* S2 */
.tt-desktop tbody tr:nth-child(1) td:nth-child(4){ background:#EEF4EF; } /* S3 */
.tt-desktop tbody tr:nth-child(1) td:nth-child(5){ background:#F7ECEF; } /* S4 */
.tt-desktop tbody tr:nth-child(1) td:nth-child(6){ background:#EDEAF6; } /* S5 */

/* Row 2: RECESS (grey) */
.tt-desktop tbody tr:nth-child(2){ background:#F2F3F4; }
.tt-desktop tbody tr:nth-child(2) td:not(:first-child){
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Row 3: 10:40 - 12:10  (Mon1 Tue2 Wed Home Thu4 Fri5) */
.tt-desktop tbody tr:nth-child(3) td:nth-child(2){ background:#E7EFF7; } /* S1 */
.tt-desktop tbody tr:nth-child(3) td:nth-child(3){ background:#F5F2E8; } /* S2 */
.tt-desktop tbody tr:nth-child(3) td:nth-child(4){
  background:#FFF3D6; border-color:#EEB520; font-weight:700;
} /* Home Group */
.tt-desktop tbody tr:nth-child(3) td:nth-child(5){ background:#F7ECEF; } /* S4 */
.tt-desktop tbody tr:nth-child(3) td:nth-child(6){ background:#EDEAF6; } /* S5 */

/* Row 4: LUNCH/TUTORIALS (grey) */
.tt-desktop tbody tr:nth-child(4){ background:#F2F3F4; }
.tt-desktop tbody tr:nth-child(4) td:not(:first-child){
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Row 5: 12:55 - 2:25  (Mon3 Tue4 Wed1 Thu2 Fri3) */
.tt-desktop tbody tr:nth-child(5) td:nth-child(2){ background:#EEF4EF; } /* S3 */
.tt-desktop tbody tr:nth-child(5) td:nth-child(3){ background:#F7ECEF; } /* S4 */
.tt-desktop tbody tr:nth-child(5) td:nth-child(4){ background:#E7EFF7; } /* S1 */
.tt-desktop tbody tr:nth-child(5) td:nth-child(5){ background:#F5F2E8; } /* S2 */
.tt-desktop tbody tr:nth-child(5) td:nth-child(6){ background:#EEF4EF; } /* S3 */

/* Row 6: Changeover note (only Wed has text) */
.tt-desktop tbody tr:nth-child(6) td{
  background:#ffffff;
  color:#6a6a6a;
  font-size:13px;
}
.tt-desktop tbody tr:nth-child(6) td:nth-child(4){
  font-style: italic;
}

/* Row 7: Final row (grey), but Wed is Subject 5 (yellow tint) */
.tt-desktop tbody tr:nth-child(7) td{ background:#F2F3F4; font-weight:600; }
.tt-desktop tbody tr:nth-child(7) td:nth-child(4){ background:#EDEAF6; font-weight:700; } /* Wed S5 *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a9b78fb *//* =====================================================
   Mobile Timetable – Expandable Day Cards (FINAL CSS)
   ===================================================== */

/* Hint for parents */
.tt-hint{
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-left: 4px solid #EEB520;          /* Accent */
  background: rgba(155,155,156,0.12);      /* Secondary tint */
  color: #3C3C3C;                          /* Text */
  border-radius: 10px;
  font-weight: 600;
}

/* Card shell */
.tt-day{
  border: 1px solid #9B9B9C;               /* Secondary */
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  margin: 0 0 16px 0;
}

/* Day header (light, on-brand) */
.tt-day__summary{
  padding: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 46px;                     /* space for arrow */

  background: rgba(16,75,130,0.08);        /* Primary tint */
  color: #104B82;                          /* Primary text */

  box-shadow: inset 0 -3px 0 0 #EEB520;    /* Accent underline */
}

/* Remove default disclosure triangle */
.tt-day__summary::-webkit-details-marker{
  display: none;
}
.tt-day summary{
  list-style: none;
}

/* Hover feedback */
.tt-day__summary:hover{
  background: rgba(16,75,130,0.12);
}

/* Arrow indicator */
.tt-day__summary::after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 220ms ease;
  font-size: 16px;
  color: #104B82;
  opacity: 0.85;
}

/* Rotate arrow when open */
.tt-day[open] .tt-day__summary::after{
  transform: translateY(-50%) rotate(180deg);
}

/* Divider under header when open */
.tt-day[open] .tt-day__summary{
  border-bottom: 1px solid rgba(155,155,156,0.35);
}

/* =====================================
   Expand / collapse animation
   ===================================== */
.tt-day__content{
  overflow: hidden;
  max-height: 0;
  transition: max-height 260ms ease, padding 260ms ease;
  padding: 0 16px;
}

.tt-day[open] .tt-day__content{
  max-height: 1200px;                      /* plenty of room */
  padding: 14px 16px 16px;
}

/* =====================================
   Rows
   ===================================== */
.tt-row{
  display: grid;
  grid-template-columns: 135px 1fr;        /* time | content */
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(155,155,156,0.28);
}

.tt-row:last-child{
  border-bottom: 0;
}

/* Time column */
.tt-time{
  font-weight: 700;
  color: #3C3C3C;
  font-size: 14px;
  line-height: 1.2;
}

/* Subject pill */
.tt-pill{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  color: #3C3C3C;
  font-weight: 600;
  line-height: 1.25;
  background: #ffffff;
  border: 1px solid rgba(155,155,156,0.35);
}

/* =====================================
   Break rows (Recess / Lunch)
   ===================================== */
.tt-break{
  background: #F2F3F4;
  margin: 0 -16px;                         /* stretch edge to edge */
  padding: 10px 16px;
}

.tt-break .tt-pill{
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* =====================================
   Notes (Changeover)
   ===================================== */
.tt-note .tt-note-text{
  font-size: 14px;
  color: #5f5f5f;
  line-height: 1.3;
}

/* =====================================
   Final row (grey background)
   ===================================== */
.tt-final{
  background: #F2F3F4;
  margin: 0 -16px;
  padding: 10px 16px;
}

.tt-final .tt-final-pill{
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 600;
}

/* =====================================
   Subject colours
   ===================================== */
.tt-s1{ background: #E7EFF7; border-color: rgba(16,75,130,0.25); }
.tt-s2{ background: #F5F2E8; }
.tt-s3{ background: #EEF4EF; }
.tt-s4{ background: #F7ECEF; }
.tt-s5{ background: #EDEAF6; }
.tt-home{ background: #FFF3D6; border-color: #EEB520; }

/* =====================================
   Small screens
   ===================================== */
@media (max-width: 360px){
  .tt-row{
    grid-template-columns: 120px 1fr;
  }
  .tt-time{
    font-size: 13px;
  }
}/* End custom CSS */