.elementor-kit-7{--e-global-color-primary:#008080;--e-global-color-secondary:#9C8FD6;--e-global-color-text:#242424;--e-global-color-accent:#008080;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Raleway";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Nunito";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Raleway";--e-global-typography-accent-font-weight:500;color:#242424;font-size:20px;font-weight:300;line-height:1.4em;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:#FFFFFF00;color:#222222;border-style:solid;border-color:#000000;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 p{margin-block-end:20px;}.elementor-kit-7 a{color:#008080;font-weight:400;}.elementor-kit-7 h1{color:#008080;font-family:"Raleway", Sans-serif;font-size:36px;font-weight:300;font-style:italic;line-height:1.2em;letter-spacing:0.5px;}.elementor-kit-7 h2{color:#9C8FD6;font-size:32px;font-weight:400;font-style:italic;letter-spacing:0.5px;}.elementor-kit-7 h3{color:#2C3E8F;font-size:24px;font-style:italic;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-family:"Nunito", Sans-serif;font-size:16px;letter-spacing:0.5px;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;padding:20px 25px 20px 25px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;--container-default-padding-top:10px;--container-default-padding-right:10px;--container-default-padding-bottom:10px;--container-default-padding-left:10px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:30px;--container-default-padding-right:30px;--container-default-padding-bottom:30px;--container-default-padding-left:30px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:30px;--container-default-padding-right:30px;--container-default-padding-bottom:30px;--container-default-padding-left:30px;}}/* Start custom CSS *//* =========================================================
   MEDIA GRID (Loop cards)
   - Fixed image frame crop
   - Equal height cards
   - CTA pinned to bottom
   - Excerpt line clamp
   ========================================================= */

/* Grid items stretch */
.elementor-loop-container .e-loop-item{
  height: 100%;
}

/* Card full-height flex column */
.na-media-card,
.na-media-card > .e-con-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Image frame */
.na-media-card .media-image-wrap{
  position: relative;
  height: 220px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 20px 20px 0 0; /* top corners only */
}

/* Image crop */
.na-media-card .media-image-wrap img{
  width: 100% !important;
  height: 220px !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
}

/* Body takes remaining space */
.na-media-card .na-card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Excerpt: remove weird extra spacing + clamp lines */
.na-card-excerpt{
  overflow: hidden;
}
.na-card-excerpt p{
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* adjust lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide CTA button if no link */
.na-card-cta a[href=""],
.na-card-cta a:not([href]){
  display: none;
}

/* Push CTA to bottom */
.na-media-card .na-card-cta{
  margin-top: auto !important;
}

/* =========================================================
   FACETWP FILTER BAR (Elementor containers)
   Structure you described:
   .na-facets
     .na-search-row (row 1)
       .na-search .na-media .na-outlet .na-series
     .na-filters-row (row 2)
       .na-filters-left (topics pills)
       .na-filters-right (sort)
   ========================================================= */

.na-facets{
  background:#F6F8FD;
  border-radius:16px;
  padding:30px;
  border:1px solid rgba(44,62,143,.08);
}

/* Remove extra bottom spacing inside each facet */
.na-facets .facetwp-facet{
  margin-bottom: 0;
}

/* Facet headings */
.na-facets .facet-wrap > h3{
  margin:0 0 10px 0;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#2C3E8F;
  font-weight:700;
  font-style:normal;
}

/* ---------- ROW 1: Search + dropdowns ---------- */
.na-search-row{
  display:flex !important;
  gap:14px;
  align-items:flex-start;
  flex-wrap:nowrap;
}

/* Search grows */
.na-search-row .na-search{
  flex: 1 1 auto;
  min-width: 320px;
}

/* Dropdown columns fixed-ish */
.na-search-row .na-media,
.na-search-row .na-outlet,
.na-search-row .na-series{
  flex: 0 0 220px;
  min-width: 180px;
}

/* Only force full width inside search column */
.na-search-row .na-search .facet-wrap,
.na-search-row .na-search .facetwp-facet,
.na-search-row .na-search .facetwp-input-wrap,
.na-search-row .na-search input.facetwp-search{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}

/* Dropdown selects fill their columns */
.na-search-row select.facetwp-dropdown{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}

/* ---------- ROW 2: Topics + Sort ---------- */
.na-filters-row{
  display:flex !important;
  gap:14px;
  align-items:flex-start;
  flex-wrap:nowrap; /* keep topics + sort same row */
}

/* Topics grows */
.na-filters-left{
  flex: 1 1 auto;
  min-width: 320px;
}

/* Sort compact */
.na-filters-right{
  flex: 0 0 220px;
  min-width: 180px;
}

.na-filters-right select{
  width:100% !important;
}

/* Allow pills to wrap INSIDE topics */
.na-filters-left .facetwp-facet{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Prevent layout jump in row 2 */
.na-filters-row .facet-wrap{
  min-height: 96px;
}

/* ---------- Inputs styling ---------- */
.na-facets input.facetwp-search{
  width:100%;
  min-height:44px;
  border-radius:10px;
  border:1px solid rgba(44,62,143,.18);
  padding:10px 44px 10px 12px; /* room for icon */
  box-sizing:border-box;
}

/* Search icon position */
.na-facets .facetwp-input-wrap{
  position:relative;
}
.na-facets .facetwp-input-wrap .facetwp-icon{
  right:12px;
}

/* Dropdowns */
.na-facets select,
.na-facets select.facetwp-dropdown{
  width:100%;
  min-height:44px;
  border-radius:10px;
  border:1px solid rgba(44,62,143,.18);
  padding:10px 36px 10px 12px;
  box-sizing:border-box;
  background-position:right 12px center;
}

/* Focus */
.na-facets input.facetwp-search:focus,
.na-facets select:focus{
  outline:none;
  border-color:#2C3E8F;
  box-shadow:0 0 0 3px rgba(156,143,214,.25);
}

/* ---------- Pills (Topics / maybe Media type if you use pills elsewhere) ---------- */
.facet-pills .facetwp-radio,
.facet-pills .facetwp-checkbox{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  margin:0; /* gap handled by flex */
  border-radius:999px;
  border:1px solid rgba(44,62,143,.25);
  background:#fff;
  color:#2C3E8F;
  font-size:16px;
  cursor:pointer;
  transition:all .2s ease;
}

.facet-pills .facetwp-radio:hover,
.facet-pills .facetwp-checkbox:hover{
  background:#F1F4FB;
  border-color:#2C3E8F;
}

.facet-pills .facetwp-radio.checked,
.facet-pills .facetwp-checkbox.checked{
  background:#2C3E8F;
  color:#fff;
  border-color:#2C3E8F;
}

.facet-pills .facetwp-counter{
  margin-left:6px;
  opacity:.7;
  font-size:13px;
}

/* ---------- Mobile stacking ---------- */
@media (max-width: 900px){
  .na-search-row{ flex-wrap:wrap; }
  .na-search-row .na-media,
  .na-search-row .na-outlet,
  .na-search-row .na-series{
    flex: 1 1 220px;
  }

  .na-filters-row{ flex-wrap:wrap; }
  .na-filters-right{
    flex: 1 1 220px;
  }
}

/* =========================================================
   SINGLE MEDIA TEMPLATE: Featured image / Embed block
   Your shortcode outputs:
   <div class="na-media-media-block na-media-embed">...</div>
   OR
   <div class="na-media-media-block na-media-featured"><img ...></div>
   Place shortcode inside a container with class: .na-media-frame
   ========================================================= */

.na-media-frame{
  width:100%;
  padding:0;
  overflow:hidden;
  border-radius:20px 20px 0 0; /* top corners only */
}

/* The shortcode wrapper */
.na-media-frame .na-media-media-block{
  width:100%;
  max-width:100%;
}

/* EMBED: make it responsive and full width */
.na-media-frame .na-media-embed{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio: 16 / 9;
  min-height: 360px; /* safety net */
  overflow:hidden;
  border-radius:20px 20px 0 0;
}

.na-media-frame .na-media-embed iframe{
  width:100% !important;
  height:100% !important;
  display:block !important;
  border:0 !important;
}

/* FEATURED IMAGE: full width */
.na-media-frame .na-media-featured img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius:20px 20px 0 0;
}
/* =========================================================
   Align Row 1 + Row 2 into the same “4-column” grid
   Search aligns with Topics, Series aligns with Sort
   ========================================================= */

/* Set your column widths here */
:root{
  --na-dd: 220px;   /* width of each dropdown column */
  --na-gap: 14px;
}

/* ROW 1: Search | Media | Outlet | Series */
.na-search-row{
  display: grid !important;
  grid-template-columns: 1fr var(--na-dd) var(--na-dd) var(--na-dd);
  gap: var(--na-gap) !important;
  align-items: start;
}

/* Put each child in the correct column */
.na-search-row .na-search{ grid-column: 1; min-width: 0; }
.na-search-row .na-media{  grid-column: 2; min-width: 0; }
.na-search-row .na-outlet{ grid-column: 3; min-width: 0; }
.na-search-row .na-series{ grid-column: 4; min-width: 0; }

/* ROW 2: Topics spans col 1-3, Sort sits under Series (col 4) */
.na-filters-row{
  display: grid !important;
  grid-template-columns: 1fr var(--na-dd) var(--na-dd) var(--na-dd);
  gap: var(--na-gap) !important;
  align-items: start;
}

.na-filters-left{
  grid-column: 1 / 4; /* span under Search+Media+Outlet */
  min-width: 0;
}

.na-filters-right{
  grid-column: 4;     /* aligns under Series */
  min-width: 0;
}

/* Ensure inputs fill their grid cells */
.na-search-row input.facetwp-search,
.na-search-row select.facetwp-dropdown,
.na-filters-right select{
  width: 100% !important;
  max-width: 100% !important;
}

/* Let pills wrap nicely inside the Topics cell */
.na-filters-left .facetwp-facet{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Optional: make the Topics row not reserve loads of height */
.na-filters-row .facet-wrap{
  min-height: 0 !important;
}

/* Responsive: stack cleanly on smaller screens */
@media (max-width: 900px){
  .na-search-row,
  .na-filters-row{
    grid-template-columns: 1fr 1fr;
  }

  .na-search-row .na-search{ grid-column: 1 / -1; }
  .na-search-row .na-media{  grid-column: 1; }
  .na-search-row .na-outlet{ grid-column: 2; }
  .na-search-row .na-series{ grid-column: 1 / -1; }

  .na-filters-left{  grid-column: 1 / -1; }
  .na-filters-right{ grid-column: 1 / -1; }
}

/* =========================================
   GRAVITY FORM 1 – DR NIGHAT STYLE
   Updated Typography + Button
========================================= */

/* Remove background card */
#gform_wrapper_1 {
  background: transparent;
  padding: 0;
  border: 0;
}

/* Field spacing */
#gform_wrapper_1 .gfield {
  margin-bottom: 16px;
}

/* ==============================
   TYPOGRAPHY (+2px everywhere)
============================== */

/* Labels */
#gform_wrapper_1 .gfield_label {
  font-size: 17px; /* was 15px */
  font-weight: 600;
  color: #2C3E8F;
  margin-bottom: 8px;
}

/* Section headers */
#gform_wrapper_1 .gsection_title {
  font-size: 22px; /* was 20px */
  font-weight: 700;
  color: #2C3E8F;
  margin-bottom: 12px;
}

/* Description text */
#gform_wrapper_1 .gfield_description {
  font-size: 16px; /* was 14px */
  color: #6b7280;
}

/* Radio + checkbox text */
#gform_wrapper_1 .gchoice label {
  font-size: 17px;
}

/* Inputs */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="date"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(44,62,143,.18);
  padding: 12px 16px;
  font-size: 18px; /* was 16px */
  background: #ffffff;
  box-sizing: border-box;
  transition: all .2s ease;
}

/* Textarea sizing */
#gform_wrapper_1 textarea {
  min-height: 140px;
  resize: vertical;
}

/* Focus state */
#gform_wrapper_1 input:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
  outline: none;
  border-color: #2C3E8F;
  box-shadow: 0 0 0 3px rgba(156,143,214,.25);
}

/* ==============================
   CUSTOM SELECT ARROW
============================== */

#gform_wrapper_1 .ginput_container_select{
  position: relative;
}

#gform_wrapper_1 select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 44px !important;
}

#gform_wrapper_1 .ginput_container_select:after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #2C3E8F;
  font-size: 16px;
}

/* ==============================
   INLINE RADIO CLASS
============================== */

#gform_wrapper_1 .gf-inline-radio .gfield_radio{
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

#gform_wrapper_1 .gf-inline-radio .gchoice{
  width: auto !important;
  display: flex;
  align-items: center;
}

#gform_wrapper_1 .gf-inline-radio input[type="radio"]{
  margin-right: 6px;
}

/* ==============================
   SUBMIT BUTTON – MATCH SITE
============================== */

#gform_wrapper_1 .gform_button,
#gform_wrapper_1 .gform_page_footer input[type="submit"],
#gform_wrapper_1 .gform_page_footer input[type="button"] {

  background: linear-gradient(135deg, #9C8FD6, #8B7FD1);
  color: #ffffff;
  border: none;
  border-radius: 999px; /* pill shape */
  padding: 16px 32px;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 6px 18px rgba(156,143,214,.35);
}

/* Hover */
#gform_wrapper_1 .gform_button:hover,
#gform_wrapper_1 .gform_page_footer input[type="submit"]:hover,
#gform_wrapper_1 .gform_page_footer input[type="button"]:hover {

  background: linear-gradient(135deg, #2C3E8F, #24357A);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(44,62,143,.35);
}

/* Footer spacing */
#gform_wrapper_1 .gform_footer{
  margin-top: 0px;
  padding-top: 0;
}

/* Confirmation message */
#gform_wrapper_1 .gform_confirmation_message {
  background: #F1F4FB;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #2C3E8F;
  font-size: 18px;
}

/* Mobile */
@media (max-width: 768px) {
  #gform_wrapper_1 {
    padding: 0;
  }
}
.gform-theme--foundation .gform_fields{row-gap:20px !important}

/* ===== Gravity Forms Inline Radios ===== */

#gform_wrapper_1 .gf-inline-radio .gfield_radio{
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap; /* allows wrap on smaller screens */
}

#gform_wrapper_1 .gf-inline-radio .gchoice{
  width: auto !important;
  display: flex;
  align-items: center;
}

#gform_wrapper_1 .gf-inline-radio input[type="radio"]{
  margin-right: 6px;
}
/* ===== Select vertical centering + prevent text cut-off (Form 1) ===== */
#gform_wrapper_1 .ginput_container_select select{
  min-height: 48px !important;
  line-height: 48px !important;     /* centers text */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* If Orbital/Foundation applies inner spacing that causes clipping */
#gform_wrapper_1 .ginput_container_select{
  display: flex;
  align-items: center;
}

/* Center footer nav on mobile only */
@media (max-width: 767px) {

  .footer-menu ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
  }

  .footer-menu ul.elementor-nav-menu li {
    text-align: center !important;
  }
}
/* Fix extra gap under Perfmatters YouTube thumbnail inside na_media_media_block */
.na-media-media-block .perfmatters-lazy-youtube > div {
  line-height: 0;
}

.na-media-media-block .perfmatters-lazy-youtube img {
  display: block;       /* removes baseline gap */
  width: 100%;
  height: auto;
}
/* Optional: force 16:9 aspect ratio so the placeholder height is consistent */
.na-media-media-block .perfmatters-lazy-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.na-media-media-block .perfmatters-lazy-youtube > div,
.na-media-media-block .perfmatters-lazy-youtube img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fix oversized media block height on mobile */
@media (max-width: 767px){
  .na-media-frame .na-media-embed{
    min-height: 0 !important;   /* or unset */
    height: auto !important;
  }
}
/* Force jQuery UI datepicker to behave like an overlay (not a block under the footer) */
#ui-datepicker-div {
  position: absolute !important;
  z-index: 999999 !important;
}

/* Always keep the datepicker as an overlay */
#ui-datepicker-div {
  position: absolute !important;
  z-index: 999999 !important;
}

/* Optional: make it full-width on mobile, but still overlay */
@media (max-width: 767px){
  #ui-datepicker-div {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Make the table fit nicely */
  #ui-datepicker-div .ui-datepicker-calendar {
    width: 100% !important;
  }
}
/* Datepicker should be hidden until opened */
body #ui-datepicker-div {
  display: none;
}

.social-intro,
.social-intro p {
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: inherit !important;
  padding-left: 0px;
}/* End custom CSS */