/*
Theme Name: NAN 2025
Author: Auticon Canada
Author URI: https://auticon.ca
Description: Custom built theme for the National Autism Network.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 0.2
*/

/* Import Montserrat font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");

html {
  font-size: 16px !important;
}

/* Apply Montserrat font globally */
body,
.wp-site-blocks,
.wp-block-group,
.wp-block-heading,
.wp-block-paragraph,
.wp-block-navigation,
.wp-block-button {
  font-family: "Montserrat", sans-serif !important;
}

.circular-image img {
  clip-path: circle();
}

:where(.wp-site-blocks) > * {
  margin-block-end: 0;
  margin-block-start: 0;
}

.tertiary-button > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--primary-blue) !important;
  border-radius: 50px !important;
}

/* Fix for SVG logo display */
.wp-block-site-logo {
  width: 240px !important;
  height: 80px !important;
  display: block !important;
}

.wp-block-site-logo a.custom-logo-link {
  display: block !important;
  width: 240px !important;
  height: 80px !important;
}

.wp-block-site-logo img.custom-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 240px !important;
  max-height: 80px !important;
  object-fit: contain !important;
}

/* Sticky Header Styles */
.wp-site-blocks > header,
.wp-block-template-part[data-type="header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  transition: box-shadow 0.3s ease !important;
}

/* Ensure announcement banners keep their background colors */
.wp-block-template-part[data-type="header"] .wp-block-group.has-primary-green-background-color,
.wp-block-template-part[data-type="header"] .wp-block-group.has-secondary-blue-background-color,
.wp-block-template-part[data-type="header"] .wp-block-group.has-tertiary-green-background-color,
.wp-block-template-part[data-type="header"] .wp-block-group[style*="background-color"] {
  background-color: inherit !important;
}

/* Specifically preserve green announcement banner */
.wp-block-template-part[data-type="header"] .wp-block-group.has-primary-green-background-color {
  background-color: var(--wp--preset--color--primary-green) !important;
}

.wp-block-template-part[data-type="header"] .wp-block-group.has-secondary-blue-background-color {
  background-color: var(--wp--preset--color--secondary-blue) !important;
}

.wp-block-template-part[data-type="header"] .wp-block-group.has-tertiary-green-background-color {
  background-color: var(--wp--preset--color--tertiary-green) !important;
}

/* Main header navigation area - ensure white background and shadow */
.wp-block-template-part[data-type="header"] .wp-block-group:not([class*="has-"]):not([style*="background"]) {
  background-color: var(--wp--preset--color--base) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Alternative selector for main header if the above doesn't work */
.wp-block-template-part[data-type="header"] > .wp-block-group:last-child {
  background-color: var(--wp--preset--color--base) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure the header container itself has white background as fallback */
.wp-site-blocks > header,
.wp-block-template-part[data-type="header"] {
  background-color: var(--wp--preset--color--base) !important;
}

/* Add some padding to body to account for sticky header */
body {
  scroll-padding-top: 100px !important;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth !important;
}

/* Ensure navigation items remain visible */
.wp-block-navigation {
  z-index: 1000 !important;
}

/* Mobile navigation overlay adjustments */
.wp-block-navigation__responsive-container.is-menu-open {
  z-index: 1001 !important;
  top: 100% !important;
}

/* Resource Blocks Grid - Centered Layout */
.resource-blocks-container {
  max-width: 1000px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.resource-grid {
  width: 100% !important;
  max-width: 850px !important;
  margin: 0 auto !important;
}

.resource-grid .wp-block-columns {
  gap: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  justify-content: center !important;
}

.resource-grid .wp-block-group.has-primary-blue-background-color {
  font-family: "Montserrat", sans-serif !important;
}

.resource-grid .wp-block-group.has-primary-blue-background-color .wp-block-heading {
  margin: 0;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
}

.resource-grid .wp-block-button.tertiary-button .wp-block-button__link {
  border-color: var(--wp--preset--color--tertiary-green) !important;
  font-weight: 500;
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif !important;
}

.resource-grid .wp-block-button.tertiary-button .wp-block-button__link:hover {
  /* Removed hover effects for Learn More buttons */
}

/* Ensure consistent block sizing */
.resource-grid .wp-block-group.has-primary-blue-background-color {
  width: 100%;
  height: 100%;
}

/* Center the fifth block properly */
.resource-grid > .wp-block-group:last-child {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.resource-grid > .wp-block-group:last-child .wp-block-group {
  max-width: 400px !important;
  width: 100% !important;
}

/* Center the entire grid on the page */
.resource-blocks-container .wp-block-heading {
  text-align: center !important;
  width: 100% !important;
}

/* Our Work and Focus Areas Section Styling */
.wp-block-group .wp-block-image img {
  flex-shrink: 0;
}

.wp-block-group .wp-block-image {
  margin: 0;
  flex-shrink: 0;
}

/* Network Difference Section Styling */
.wp-block-group[style*="background-color:#eff2f6"] .wp-block-columns {
  align-items: center;
}

/* Careers Section Styling */
.careers-intro {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.careers-grid .wp-block-group.has-base-background-color {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.careers-grid .wp-block-group.has-base-background-color:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.disabled-button .wp-block-button__link {
  cursor: not-allowed !important;
  pointer-events: none;
}

.careers-grid .wp-block-columns {
  align-items: stretch;
}

.careers-grid .wp-block-column {
  display: flex;
}

.careers-grid .wp-block-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Job Card Styling - Fixed Button Alignment */
.job-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.job-card .job-title {
  /* Limit to 2 lines with ellipsis */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: calc(1.3em * 2) !important; /* line-height * 2 lines */
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  font-family: "Montserrat", sans-serif !important;
}

.job-card .wp-block-buttons {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Learn More button styling with theme colors */
.careers-grid .wp-block-button:not(.disabled-button) .wp-block-button__link {
  background-color: var(--wp--preset--color--primary-green) !important;
  color: var(--wp--preset--color--base) !important;
  transition: none !important;
  font-family: "Montserrat", sans-serif !important;
}

.careers-grid .wp-block-button:not(.disabled-button) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary-green) !important;
  color: var(--wp--preset--color--base) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* WPForms button - Updated to match uploaded button style */
.wpforms-submit {
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--contrast) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 0.875rem 2.5rem !important;
  border-radius: 50px !important;
  border: 1px solid var(--wp--preset--color--primary-blue) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  font-family: "Montserrat", sans-serif !important;
}

.wpforms-submit:hover {
  background-color: var(--wp--preset--color--primary-blue) !important;
  color: var(--wp--preset--color--base) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.wpforms-submit:active {
  transform: translateY(0) !important;
}

/* Typography overrides to ensure Montserrat is used everywhere */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.has-playfair-display-font-family,
.has-lato-font-family,
.has-inter-font-family {
  font-family: "Montserrat", sans-serif !important;
}

/* Specific font weights for headings with Montserrat */
h1,
.wp-block-heading.has-xxx-large-font-size {
  font-weight: 800 !important;
}

h2,
.wp-block-heading.has-xx-large-font-size {
  font-weight: 700 !important;
}

h3,
h4,
h5,
h6,
.wp-block-heading {
  font-weight: 600 !important;
}

/* Body text and paragraphs */
p,
.wp-block-paragraph,
.wp-block-navigation,
body,
.wp-block-navigation-link {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
}

/* Navigation and menu items */
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-link {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500 !important;
}

/* Button text */
.wp-block-button .wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500 !important;
}

/* Form elements */
input,
textarea,
select {
  font-family: "Montserrat", sans-serif !important;
}

/* Footer text */
.wp-block-template-part[data-type="footer"] * {
  font-family: "Montserrat", sans-serif !important;
}

/* Social media section */
.wp-block-group .wp-block-heading[style*="font-family"] {
  font-family: "Montserrat", sans-serif !important;
}

/* Responsive adjustments for careers grid */
@media (max-width: 781px) {
  .careers-grid .wp-block-columns {
    flex-direction: column;
  }

  .careers-grid .wp-block-column {
    width: 100% !important;
    flex-basis: auto !important;
  }

  .job-card {
    min-height: 140px !important;
  }
}

/* Tootip content styling customization */
.qtip-content {
  padding: var(--wp--preset--spacing--xs);
  text-align: left;
  word-wrap: break-word;
  line-height: var(--wp--custom--line-height--md);
  font-family: var(--wp--preset--font-family--montserrat) !important;
  font-size: var(--wp--preset--font-size--normal);
}

.tooltipsincontent {
  border-bottom: 2px dotted var(--wp--preset--color--primary-green);
}

/** hero & content **/
@media screen and (min-width: 320px) and (max-width: 386px) {
  .hero-container {
    min-height: calc(100vh - 38vh) !important;
  }
}

@media screen and (min-width: 387px) and (max-width: 768px) {
  .hero-container {
    min-height: calc(100vh - 37vh) !important;
  }
}
@media screen and (min-width: 769px) {
  .hero-container {
    min-height: calc(100vh - 50vh) !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
  .hero-container img {
    object-position: 70% 25% !important;
  }
}

/** header nav items **/

header nav a {
  padding: var(--wp--preset--spacing--xxs);
}

/*Team bio styles */
.read-bio-toggle {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 1px solid bottom var(--wp--preset--color--primary-blue);
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--normal);
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
}

.read-bio-toggle svg {
  height: auto;
  width: 0.9rem;
  fill: var(--wp--preset--color--primary-blue);
}

.read-bio-toggle.active svg {
  transform: rotate(180deg);
}

.bio-content {
  max-height: 0;
  visibility: hidden;
  transition: visibility 0.25s ease, max-height 0.4s, padding 0.4s ease;
  margin-top: 0;
  padding-top: 0;
  text-align: left;
  margin-bottom: var(--wp--preset--spacing--md);
}

.bio-content.active {
  visibility: visible;
  max-height: 100%;
  padding-top: var(--wp--preset--spacing--sm);
  transition: visibility 0.4s ease, padding 0.25s ease, max-height 0.4s ease;
}