/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */



/* Target IN SDP dropdown menu so it's wider than the rest */
/* Targets the submenu width under IN SDP in the header navigation*/
#header-menu-1 #menu-item-6284 > .sub-menu {
  width: 255px;
}

/* Target footer spacing below the H3 headings adjust to 10px instead of 40px */

.ct-footer .ct-widget:not(:first-child) {
  margin-top: var(--widgets-gap, 10px) !important;
}


/* Target footer widget 3 specifically - adjust selector after inspecting */
.footer-widget-area-3 p:first-child,
.footer-widget-area-3 ul:first-child {
  margin-top: 0;
  padding-top: 0;
}


/* ==========================================================================
   1. BASE / DESKTOP LAYOUT
   ========================================================================= */
.custom-gt-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.gt-horizontal-languages {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}
.gt-horizontal-languages a {
  text-decoration: none;
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.gt-horizontal-languages a:hover {
  opacity: 0.7;
}

/* --- Dropdown box with globe icon (SVG, brand blue) --- */
.gt-dropdown-more {
  position: relative;
  display: inline-block;
  min-width: 170px;
}
.gt-dropdown-more::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d70f1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='3' y1='12' x2='21' y2='12'/><path d='M12 3a13.5 13.5 0 0 1 0 18a13.5 13.5 0 0 1 0-18z'/><line x1='5.5' y1='7.5' x2='18.5' y2='7.5'/><line x1='5.5' y1='16.5' x2='18.5' y2='16.5'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.gt-dropdown-more select {
  width: 100%;
  padding: 6px 32px 6px 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  cursor: pointer;
  color: #111;
}

/* ==========================================================================
   2. TABLET LAYOUT (600px to 959px) — row layout, right-aligned like desktop
   ========================================================================= */
@media (min-width: 600px) and (max-width: 959px) {
  .custom-gt-wrapper {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .gt-horizontal-languages {
    gap: 14px;
    flex-wrap: nowrap;
  }
  .gt-horizontal-languages a {
    font-size: 13px;
  }
  .gt-dropdown-more {
    min-width: 150px;
  }
  .gt-dropdown-more select {
    height: 36px;
    font-size: 13px;
    padding: 4px 28px 4px 30px;
  }
}

/* ==========================================================================
   3. MOBILE LAYOUT (Under 600px) — stacked, centered, breaks free of
      Blocksy's actual wrapping structure: .ct-header-text > .entry-content
      > .custom-gt-wrapper
   ========================================================================= */
@media (max-width: 599px) {
  .custom-gt-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 5px 0;
    text-align: center;
  }
  .gt-horizontal-languages {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    width: 100%;
    margin: 0 auto;
  }
  .gt-horizontal-languages a {
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
  }
  .gt-dropdown-more {
    width: 100%;
    max-width: 200px;
    min-width: 0;
    margin: 0 auto;
  }
  .gt-dropdown-more::before {
    width: 15px;
    height: 15px;
    left: 8px;
  }
  .gt-dropdown-more select {
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding: 4px 26px 4px 28px;
  }

  /* Break free of Blocksy's actual wrapping structure, confirmed via
     inspector: .ct-header-text > .entry-content > .custom-gt-wrapper */
  .ct-header-text[data-id="text"],
  .ct-header-text .entry-content {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  .ct-header-text .custom-gt-wrapper {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   4. FORCE REMOVE ALL FLAGS (strengthened — covers img, picture, svg,
      background-image flags, and any element with "flag" in its class)
   ========================================================================= */
.gt-horizontal-languages a,
.gt-horizontal-languages a *,
.gt-horizontal-languages span,
.gt-horizontal-languages img,
.gt-horizontal-languages picture,
.gt-horizontal-languages svg {
  background-image: none !important;
  background: none !important;
}
.gt-horizontal-languages img,
.gt-horizontal-languages picture,
.gt-horizontal-languages svg,
.gt-horizontal-languages .gt-flag,
.gt-horizontal-languages [class*="flag" i],
.gt-horizontal-languages [class*="gflag" i] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}
.gt-horizontal-languages a {
  display: inline-block !important;
}

/* ==========================================================================
   5. ANTI-CLIPPING OVERFLOW OVERRIDES
   ========================================================================= */
[id*="header"] .ct-container,
[id*="header"] .site-header,
.ct-panel-content,
.ct-offcanvas {
  overflow: visible !important;
}

/* ==========================================================================
   6. KEEP DROPDOWN WHITE IN ALL STATES (selected, focus, hover, translated)
   ========================================================================= */
.gt-dropdown-more select,
.gt-dropdown-more select:hover,
.gt-dropdown-more select:focus,
.gt-dropdown-more select:focus-visible,
.gt-dropdown-more select:active,
.gt-dropdown-more select:valid,
.gt-dropdown-more select:not(:placeholder-shown),
html.translated-ltr .gt-dropdown-more select,
html.translated-rtl .gt-dropdown-more select,
.ct-header-text .gt-dropdown-more select,
.ct-header-text .gt-dropdown-more select:focus {
  background-color: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  border: 1px solid #ccc !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Dropdown list items stay readable too */
.gt-dropdown-more select option {
  background-color: #fff !important;
  color: #111 !important;
}


/* ==========================================================================
   7. WHITE KEYBOARD FOCUS OUTLINES (language links + dropdown)
      Links: outline drawn INSIDE so parent containers can't clip it.
      Dropdown: outline drawn OUTSIDE so it stays visible against the white box.
   ========================================================================= */

/* Language links */
.gt-horizontal-languages a {
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 4px;
}

.gt-horizontal-languages a:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* "More Languages" dropdown */
.gt-dropdown-more select:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}


/* ==========================================================================
   ACCESSIBILITY: KEYBOARD FOCUS OUTLINES FOR ELEMENTOR CONTENT LINKS
   Elementor's "all: unset" on heading/paragraph links removes the default
   focus ring, so it is restored here to match Blocksy's own focus style
   (used by the footer). Unrelated to the GTranslate switcher.
   ========================================================================= */
.elementor .e-heading-base a:focus-visible,
.elementor .e-paragraph-base a:focus-visible,
.elementor .e-button-base:focus-visible,
.elementor a.elementor-icon:focus-visible,
.elementor a.elementor-button:focus-visible {
  outline: 2px solid var(--theme-palette-color-1, #2872fa) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}


/* Aligning the breadcrumbs with content below */

.ct-breadcrumbs {margin-left:10px;}

/* Adding space between each  bullet point on unordered list */

.elementor-widget-text-editor ul li {
    margin-bottom: 10px !important;
}

/* Adding space between each number on an ordered list */

.elementor-widget-text-editor ol li {
    margin-bottom: 10px !important;
}

/* Adding less space between each bullet point for related items box */

.elementor-widget-text-editor ul.relateditems li {
    margin-bottom: 2px !important;
}


/* Events table on front page */

/* Events row: flex layout to match top grid, 3-col desktop / stacked mobile */
.ecs-events.ecs-table.ecs-table-1 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2%;
    width: 100%;
}

/* If there's a table-row wrapper between .ecs-events and .ecs-event,this makes it "disappear" so .ecs-event becomes a direct flex child */
.ecs-events.ecs-table.ecs-table-1 > * {
    display: contents !important;
}

.ecs-events.ecs-table.ecs-table-1 .ecs-event {
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
    width: 32% !important;
    margin: 0 !important;
    border: 2px solid #4290E3 !important;
    border-radius: 12px !important;
    padding: 25px 25px 10px 25px !important;
}

/* Mobile: single column, spaced cards */
@media (max-width: 767px) {
    .ecs-events.ecs-table.ecs-table-1 {
        flex-direction: column;
        gap: 0;
    }

    .ecs-events.ecs-table.ecs-table-1 .ecs-event {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .ecs-events.ecs-table.ecs-table-1 .ecs-event:last-child {
        margin-bottom: 0 !important;
    }
}

/* this controls the headline link in each card in events section from above */

.ecs-events.ecs-table.ecs-table-1 .ecs-event .summary h3.ecs-event-title a {
	
	text-decoration: none;
  color: #0488BC !important;
	 display: block;
  margin-top: 20px !important;
}


/* Pagination container */
.ecs-pagination {
  border-top: 0px !important;
  display: flex;
  gap: 15px;
  margin: 0px 0 20px;
  padding-top: 10px !important;
}

/* Center pagination buttons on mobile */
@media screen and (max-width: 480px) {
  .ecs-pagination {
    justify-content: center;
  }
}

/* Previous/Next buttons - default state */
.ecs-pagination .ecs-prev button,
.ecs-pagination .ecs-next button {
  color: #FFFFFF !important;
	font-weight: 700 !important;
  border: 1px solid #578edd !important;
  border-radius: 4px;
  background-color: #0B7CA0 !important;
  padding: 8px 16px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover state */
.ecs-pagination .ecs-prev button:hover,
.ecs-pagination .ecs-next button:hover {
  color: #FFFFFF !important;
  background-color: #06accd !important;
  border: 1px solid #578edd !important;
}

/* Focus state (keyboard navigation / accessibility) */
.ecs-pagination .ecs-prev button:focus,
.ecs-pagination .ecs-next button:focus {
  color: #FFFFFF !important;
	font-weight: 700 !important;
  border: 1px solid #578edd !important;
  outline: 1px solid #0488BC;
  outline-offset: 2px;
}

/* Active state (while clicking) */
.ecs-pagination .ecs-prev button:active,
.ecs-pagination .ecs-next button:active {
  color: #ffffff !important;
	font-weight: 700 !important;
  background-color: #6bc5df !important;
  border: 1px solid #578edd !important;
}

/* Disabled state - Previous is disabled on page load, Next becomes disabled at the end */
.ecs-pagination .ecs-prev button:disabled,
.ecs-pagination .ecs-next button:disabled {
  color: #14317d !important;
  border: 1px solid #578edd !important;
  background-color: #a9d5ea!important;
  opacity: 0.6;
  cursor: not-allowed;
}


/* Archive title only — /events/ and category pages */
body.post-type-archive-tribe_events .entry-header .page-title,
body.tax-tribe_events_cat .entry-header .page-title {
    color: #0488BC;
    font-size: 34px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    border-bottom: 1px solid #000000;
    padding: 0px 0px 12px 0px;
    margin: 0px 0px 15px 0px;
}

/* Hero section spacing */
.hero-section[data-type="type-1"] {
  text-align: var(--alignment);
  margin-bottom: var(--margin-bottom, 20px);
}

/* Secondary h1 title size for cateogry events page - GGRC, RCEB, etc*/

/* Desktop / all breakpoints - base override */
h1.tribe-events-header__title-text,
.tribe-common--breakpoint-full.tribe-events .tribe-events-header__title h1.tribe-events-header__title-text,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-header__title h1.tribe-events-header__title-text,
.tribe-common--breakpoint-small.tribe-events .tribe-events-header__title h1.tribe-events-header__title-text,
.tribe-common--breakpoint-xsmall.tribe-events .tribe-events-header__title h1.tribe-events-header__title-text {
    color: #0488BC !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    display: block;
    border-bottom: none;
    padding: 0px;
    margin: 0px 0px 20px 0px;
}

/* Tablet breakpoint - adjust size if needed */
@media screen and (max-width: 768px) {
    h1.tribe-events-header__title-text {
        font-size: 24px !important; 
    }
}

/* Mobile breakpoint - adjust size if needed */
@media screen and (max-width: 480px) {
    h1.tribe-events-header__title-text {
        font-size: 20px !important;
    }
}

/* Single event title only — individual event pages */
/* Single event title only */
h1.tribe-events-single-event-title {
    color: #0488BC;      
    font-size: 28px !important; 
    font-weight: 600;
    text-transform: none;
    display: block;
    border-bottom: none;
    padding: 0px;
    margin: 0px 0px 30px 0px;
}

/* Related events section on single event pages */

.tribe-events-single ul.tribe-related-events li .tribe-related-events-thumbnail img {
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    position: relative !important;
}

.tribe-events-single ul.tribe-related-events li .tribe-related-event-info {
    padding: 13px 15px 15px 15px !important;
}

.tribe-related-events-thumbnail {
    margin-bottom: 0 !important;
}

.tribe-related-events-thumbnail a.url {
    padding-top: 0 !important;
}

.single-tribe_events .tribe-events-sub-nav {
    padding-left: 0 !important;
}