/* ============================================
   FONT IMPORTS
   ============================================ */
@import url("https://use.typekit.net/bdw7ljm.css");
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');


/* ============================================
   CSS VARIABLES
   Edit these values to change settings across the entire site
   ============================================ */
:root {
    /* BREAKPOINTS - Change when mobile menu appears */
    --mobile-breakpoint: 1024px;
    
    /* COLORS */
    --brand-blue: #163b69;
    --brand-yellow: #f8e71c;
    --link-color: #3498db;
    --link-hover-color: #2980b9;
    
    /* FONTS */
    --heading-font: "anchor-web", sans-serif;
    --body-font: 'Source Sans Pro', sans-serif;
    
    /* FONT SIZES - Desktop */
    --body-font-size: 25px;
    --h1-size: 48px;
    --h2-size: 44px;
    --h3-size: 34px;
    --h4-size: 24px;
    --h5-size: 20px;
    --h6-size: 18px;
    --button-font-size: 22px;
    --menu-font-size: 24px;
    
    /* FONT SIZES - Mobile */
    --body-font-size-mobile: 18px;
    --h1-size-mobile: 32px;
    --h2-size-mobile: 28px;
    --h3-size-mobile: 24px;
    --h4-size-mobile: 20px;
    --menu-font-size-mobile: 22px;
    --submenu-font-size-mobile: 20px;
    
    /* SPACING */
    --menu-padding-vertical: 2rem;        /* Height of menu bar */
    --menu-padding-horizontal: 0.7rem;    /* Space between menu items */
    --menu-text-offset: 12px;             /* Moves menu text down to align with logo */
    --menu-word-spacing: 2px;             /* Space between words in menu */
    --content-max-width: 1400px;          /* Maximum width for readable content */
    --page-side-padding: 2rem;            /* Padding on left/right of page */
    
    /* LOGO */
    --logo-height: 50px;
    --logo-top-offset: -6px;              /* Moves logo up/down */
}


/* ============================================
   TYPOGRAPHY - HEADINGS
   All h1-h6 tags use the Anchor font
   ============================================ */
h1, h2, h3, h4, h5, h6, 
.site-title,
.entry-title,
.page-title,
.main-title,
.hero-title {
   font-family: var(--heading-font) !important;
}

/* Desktop heading sizes */
h1 { font-weight: 700; font-size: var(--h1-size); }
h2 { font-weight: 600; font-size: var(--h2-size); }
h3 { font-weight: 500; font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }


/* ============================================
   TYPOGRAPHY - BODY TEXT
   Sets the default font for all body text
   ============================================ */
body {
    font-family: var(--body-font);
    line-height: 1.5;
    font-size: var(--body-font-size);
}


/* ============================================
   LINKS
   Default link colors and hover effects
   ============================================ */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover-color);
}


/* ============================================
   HIDE ELEMENTS
   Removes unwanted default WordPress elements
   ============================================ */

/* Hide page titles */
.entry-header,
.page-header {
    display: none;
}

/* Hide social links in header */
.social-links,
.social-navigation {
    display: none;
}

/* Hide default WordPress logo (we use custom logo in menu) */
.site-logo,
.custom-logo,
.site-branding {
   display: none;
}

/* Hide social sharing buttons at bottom of posts */
.social-share,
.share-buttons,
.sharing-buttons,
.sharedaddy,
.addtoany_share_save_container,
.jetpack-sharing-buttons,
.post-share,
.entry-share {
    display: none !important;
}

/* Hide default footer (using custom footer instead) */
.site-footer {
    display: none !important;
}


/* ============================================
   HEADER & NAVIGATION SPACING
   Removes default top padding/margins from header
   ============================================ */
.site-header,
header,
#masthead,
nav.main-navigation {
   padding-top: 0;
   margin-top: 0;
}


/* ============================================
   LOGO IN MENU
   Styles for the custom logo placed in the navigation menu
   ============================================ */
.menu-item-logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

.menu-item-logo img {
    margin-top: var(--logo-top-offset);  /* Adjust vertical position */
    height: var(--logo-height);          /* Control logo size */
    width: auto;
}


/* ============================================
   NAVIGATION MENU - DESKTOP
   Styles for the main menu on desktop/tablet screens
   ============================================ */
nav.main-navigation,
.main-navigation a,
#site-navigation {
   font-family: var(--body-font);
   letter-spacing: 0.3px;
   word-spacing: var(--menu-word-spacing);
   font-weight: 700;
   text-transform: none;
   font-size: var(--menu-font-size) !important;
   list-style: none !important;
   list-style-type: none !important;
   margin: 0 !important;
   padding: 0 !important;
   text-indent: 0 !important;
}

/* Menu item spacing and alignment */
.main-navigation a,
.main-menu > li > a,
#site-navigation .menu-item a {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
    padding: var(--menu-padding-vertical) var(--menu-padding-horizontal) !important;
}

/* Move text menu items down to align with logo (excludes logo itself) */
.main-navigation a:not(.menu-item-logo a),
.main-menu > li:not(.menu-item-logo) > a,
#site-navigation .menu-item:not(.menu-item-logo) a {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
    padding: 1.5rem var(--menu-padding-horizontal) !important;
    position: relative !important;
    top: var(--menu-text-offset) !important;  /* Moves text down */
}

/* Keep logo in original position */
.menu-item-logo a {
    top: 0 !important;
}

/* Dropdown submenu functionality */
.sub-menu {
    display: none;
    position: absolute;
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

/* Remove separators between menu items */
#menu-main-menu-1 > li::before,
#menu-main-menu-1 > li::after {
    display: none !important;
    content: none !important;
}


/* ============================================
   NAVIGATION MENU - MOBILE
   Styles for hamburger menu on small screens
   Changes when screen width is below --mobile-breakpoint
   ============================================ */
@media (max-width: 1024px) {
   /* Indent submenu items */
   .sub-menu {
       padding-left: 20px !important;
       margin-left: 20px !important;
       border-left: 2px solid var(--brand-blue);
   }
   
   /* Parent menu items */
   .main-menu > li > a {
       font-size: var(--menu-font-size-mobile) !important;
       font-weight: 600 !important;
   }
   
   /* Submenu items - now uses variable for font size */
   .sub-menu a {
       font-size: var(--submenu-font-size-mobile) !important;
       font-weight: normal !important;
       padding-left: 10px !important;
       word-spacing: var(--menu-word-spacing) !important;
   }
   
   /* Hide logo that appears inside mobile menu dropdown */
   .main-navigation .menu-item-logo,
   #menu-main-menu-1 .menu-item-logo {
       display: none !important;
   }
   
   /* Show logo at top of page (site branding area) */
   .site-logo,
   .custom-logo {
       display: block !important;
   }
   
   .site-branding {
       display: block !important;
       margin-bottom: 1rem;
   }
   
   /* Body text on mobile */
   body,
   p,
   .entry-content p {
       font-size: var(--body-font-size-mobile) !important;
       line-height: 1.6 !important;
   }

   /* Headings on mobile */
   h1 { font-size: var(--h1-size-mobile) !important; }
   h2 { font-size: var(--h2-size-mobile) !important; }
   h3 { font-size: var(--h3-size-mobile) !important; }
   h4 { font-size: var(--h4-size-mobile) !important; }
}


/* ============================================
   FULL WIDTH LAYOUT - DESKTOP
   Makes the site span the full browser width
   Only applies on screens above --mobile-breakpoint
   ============================================ */
@media (min-width: 1025px) {
   
   /* Site container */
   .site,
   #page {
       max-width: 100% !important;
       width: 100% !important;
   }
   
   /* Main content area */
   #content,
   .site-content,
   #primary,
   .content-area {
       width: 100% !important;
       max-width: 100% !important;
       margin-left: 0 !important;
       margin-right: 0 !important;
       padding-left: var(--page-side-padding) !important;
       padding-right: var(--page-side-padding) !important;
   }
   
   /* Container for main content - keeps text readable */
   .entry-content,
   .site-main {
       max-width: var(--content-max-width);
       margin: 0 auto;
       width: 100%;
   }
   
   /* Full width header */
   .site-header,
   #masthead,
   .site-header .wrap,
   .site-header__inner {
       width: 100% !important;
       max-width: none !important;
   }
}


/* ============================================
   WORDPRESS BLOCKS - FULL WIDTH
   Makes various WordPress blocks span full width
   ============================================ */
@media (min-width: 1025px) {
   
   /* Common block types */
   .wp-block-cover,
   .wp-block-group,
   .wp-block-columns,
   .wp-block-image,
   .wp-block-gallery,
   .wp-block-media-text {
       max-width: 100% !important;
       width: 100% !important;
   }
   
   /* Blocks marked with "Full width" alignment */
   .alignfull {
       width: 100vw !important;
       max-width: 100vw !important;
       margin-left: calc(-50vw + 50%) !important;
       margin-right: calc(-50vw + 50%) !important;
   }
   
   /* Keep text content readable (not too wide) */
   .wp-block-group__inner-container,
   .entry-content > p,
   .entry-content > ul,
   .entry-content > ol {
       max-width: var(--content-max-width);
       margin-left: auto;
       margin-right: auto;
   }
   
   /* All headings full width */
   h1, h2, h3, h4, h5, h6,
   .entry-content h1,
   .entry-content h2,
   .entry-content h3,
   .entry-content h4,
   .entry-content h5,
   .entry-content h6 {
       max-width: 100% !important;
       width: 100% !important;
   }
   
   /* FAQ sections - common plugins */
   .faq,
   .faq-section,
   .wp-block-yoast-faq-block,
   .schema-faq,
   .accordion,
   .wp-block-kadence-accordion,
   .elementor-widget-accordion,
   .faq-container {
       max-width: 100% !important;
       width: 100% !important;
   }
   
   /* CoBlocks FAQ specifically */
   .wp-block-coblocks-faq,
   .wp-block-coblocks-faq-item,
   .wp-block-coblocks-faq-item__question,
   .wp-block-coblocks-faq-item__question__content,
   .wp-block-coblocks-faq-item__answer {
       max-width: 100% !important;
       width: 100% !important;
   }
}


/* ============================================
   BUTTONS
   Styles for all buttons and button blocks
   Uses brand colors with hover effects
   ============================================ */
.wp-block-button__link,
.wp-element-button,
.button {
   background-color: var(--brand-yellow) !important;
   color: var(--brand-blue) !important;
   border: 2px solid var(--brand-blue) !important;
   font-family: var(--heading-font) !important;
   font-size: var(--button-font-size) !important;
   font-weight: 600 !important;
   padding: 12px 24px !important;
}

/* Button hover state - colors invert */
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover {
   background-color: var(--brand-blue) !important;
   color: var(--brand-yellow) !important;
   border: 2px solid var(--brand-yellow) !important;
}


/* ============================================
   CUSTOM ADDITIONS
   Add any additional custom CSS below this line
   ============================================ */