/**
 * Custom CSS
 * Add your own custom WordPress styles here
 * This file loads last and will override all other theme styles
 * 
 * Tips:
 * - Use !important sparingly
 * - Target specific WordPress classes when possible
 * - Comment your code for future reference
 */

/* ===================================================================
   YOUR CUSTOM STYLES BELOW
   =================================================================== */

#body iframe {
    max-width: 100% !important;
}

.text-center {
    text-align: center !important;
}
   
.width-100 {
    width: 100% !important;
}

/* ===================================================================
   SOCIAL ICONS - Class-based styling (reusable)
   Matches the header #social styling exactly
   =================================================================== */

.social-icons-wrapper {
   display: inline-block;
   vertical-align: middle;
}

/* Match the exact size and styling of header social icons */
.social-icons-wrapper .icons.circle {
   background: #0e4e91; 
   color: white;
   font-size: 16px;
   height: 16px;
   width: 16px;
   margin: 0 0 0 .25em;
   text-align: center;
   line-height: 16px;
   border-radius: 50%;
   display: inline-block;
   padding: 10px;
   transition: all .35s ease-in-out;
   box-sizing: content-box !important;
}

.social-icons-wrapper .icons.circle svg {
   fill: white;
}

.social-icons-wrapper .icons.circle:hover {
   color: white;
   background-color: #e87d20;
   transform: scale(1.15);   
}

/* Make AddThis buttons look like our social icons */
.addthis_toolbox {
   display: inline-flex;
   gap: 0.25em;
   align-items: center;
}

.addthis_toolbox a {
   display: inline-block;
   line-height: 0;
}

.addthis_toolbox a img {
   background: #0e4e91;
   border-radius: 50%;
   padding: 0.5em;
   box-sizing: content-box;
   transition: all 0.35s ease-in-out;
   display: block;
}

.addthis_toolbox a:hover img {
   background-color: #e87d20;
   transform: scale(1.15);
}

/* Text align center for social sharing sections */
.text-center .addthis_toolbox {
   justify-content: center;
}

/* ===================================================================
   PDF PROMOS - WordPress Columns Block Adaptation
   Adapted from original .pdf-promos styles for Gutenberg columns
   =================================================================== */

/* Container styles */
.wp-block-columns.pdf-promos {
   text-align: center;
   list-style: none;
   margin: 0;
   width: 100%;
   flex: 0 0 auto;
   padding: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-content: flex-start;
}

/* Column (replaces article) styles */
.wp-block-columns.pdf-promos .wp-block-column {
   width: 28.33%;
   padding: 2.5%;
   position: relative;
   transition: all 0.35s ease-in-out;
}

/* Sharing variant - 2 columns instead of 3 */
.wp-block-columns.pdf-promos.sharing .wp-block-column {
   width: 45%;
   padding: 2.5%;
}

/* Figure wrapper */
.wp-block-columns.pdf-promos .wp-block-column figure {
   width: 100%;
   margin: 0;
}

/* Image styles with border */
.wp-block-columns.pdf-promos .wp-block-column figure img {
   width: 100%;
   border: 5px black solid;
   transition: all 0.35s ease-in-out;
}

/* Hover effect - scale up */
.wp-block-columns.pdf-promos .wp-block-column:hover {
   transform: scale(1.1);
}

/* Hover effect - orange border */
.wp-block-columns.pdf-promos .wp-block-column:hover figure img {
   border: 5px #e87d20 solid;
}

/* Text/caption below image */
.wp-block-columns.pdf-promos .wp-block-column span,
.wp-block-columns.pdf-promos .wp-block-column figcaption {
   margin-top: 0.1em;
   display: block;
   line-height: 1;
   font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .wp-block-columns.pdf-promos .wp-block-column {
      width: 100%;
      padding: 2.5%;
   }
   
   .wp-block-columns.pdf-promos.sharing .wp-block-column {
      width: 100%;
   }
}   

.width-100 img, .width-100 figure {
    width: 100% !important;
}   
/* Fix Media & Text block padding on mobile */
@media (max-width: 600px) {
   .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
      padding: 0 !important;
   }
}


@media(min-width: 601px) {
    .wp-block-media-text {
        gap: 0 4% !important;
    }
   .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
      padding: 0 !important;
   }
}

/* Helper classes for floating images with text wrap */
/* SOLUTION: Remove the block behavior from wp-block-image wrapper when it contains aligned figures */
.wp-block-image {
   margin: 0 !important;
}

.wp-block-image figure.alignleft {
   float: left !important;
   margin: 0.5em 2em 1em 0 !important;
   max-width: 50% !important;
}

.wp-block-image figure.alignright {
   float: right !important;
   margin: 0.5em 0 1em 2em !important;
   max-width: 50% !important;
}

/* Make images inside responsive */
.wp-block-image figure.alignleft img,
.wp-block-image figure.alignright img {
   width: 100%;
   height: auto;
   display: block;
}

/* Custom float classes */
.float-left {
   float: left !important;
   margin: 0.5em 2em 1em 0 !important;
   max-width: 50% !important;
}

.float-right {
   float: right !important;
   margin: 0.5em 0 1em 2em !important;
   max-width: 50% !important;
}

/* Responsive: full width on mobile */
@media (max-width: 768px) {
   .wp-block-image {
      display: block;
      width: 100%;
   }
   
   figure.alignleft,
   figure.alignright,
   .float-left,
   .float-right {
      float: none !important;
      max-width: 100% !important;
      margin: 1em 0 !important;
   }
}

/* ===================================================================
   VERTICAL ALIGNMENT UTILITY CLASSES
   For Grid & Flexbox containers (Media & Text blocks, Columns, etc.)
   =================================================================== */

/* Align children to TOP */
.align-top,
.align-items-start {
   align-items: start !important;
}

.align-top > .wp-block-media-text__content,
.align-top > .wp-block-media-text__media,
.align-items-start > .wp-block-media-text__content,
.align-items-start > .wp-block-media-text__media {
   align-self: start !important;
}

/* Align children to MIDDLE/CENTER */
.align-middle,
.align-center,
.align-items-center {
   align-items: center !important;
}

.align-middle > .wp-block-media-text__content,
.align-middle > .wp-block-media-text__media,
.align-center > .wp-block-media-text__content,
.align-center > .wp-block-media-text__media,
.align-items-center > .wp-block-media-text__content,
.align-items-center > .wp-block-media-text__media {
   align-self: center !important;
}

/* Align children to BOTTOM */
.align-bottom,
.align-items-end {
   align-items: end !important;
}

.align-bottom > .wp-block-media-text__content,
.align-bottom > .wp-block-media-text__media,
.align-items-end > .wp-block-media-text__content,
.align-items-end > .wp-block-media-text__media {
   align-self: end !important;
}

/* STRETCH children to fill height */
.align-stretch,
.align-items-stretch {
   align-items: stretch !important;
}

.align-stretch > .wp-block-media-text__content,
.align-stretch > .wp-block-media-text__media,
.align-items-stretch > .wp-block-media-text__content,
.align-items-stretch > .wp-block-media-text__media {
   align-self: stretch !important;
}

/* Align children to BASELINE */
.align-baseline,
.align-items-baseline {
   align-items: baseline !important;
}

.align-baseline > .wp-block-media-text__content,
.align-baseline > .wp-block-media-text__media,
.align-items-baseline > .wp-block-media-text__content,
.align-items-baseline > .wp-block-media-text__media {
   align-self: baseline !important;
}

/* SELF alignment - for individual children */
.align-self-top,
.align-self-start {
   align-self: start !important;
}

.align-self-middle,
.align-self-center {
   align-self: center !important;
}

.align-self-bottom,
.align-self-end {
   align-self: end !important;
}

.align-self-stretch {
   align-self: stretch !important;
}

/* Vertical justify for grid containers */
.justify-items-start {
   justify-items: start !important;
}

.justify-items-center {
   justify-items: center !important;
}

.justify-items-end {
   justify-items: end !important;
}

/* Responsive variants - only apply on desktop */
@media (min-width: 769px) {
   .align-top-desktop {
      align-items: start !important;
   }
   
   .align-middle-desktop {
      align-items: center !important;
   }
   
   .align-bottom-desktop {
      align-items: end !important;
   }
}

/* Responsive variants - only apply on mobile/tablet */
@media (max-width: 768px) {
   .align-top-mobile {
      align-items: start !important;
   }
   
   .align-middle-mobile {
      align-items: center !important;
   }
   
   .align-bottom-mobile {
      align-items: end !important;
   }
}

/* ===================================================================
   SPACING UTILITY CLASSES (Tailwind-style)
   Scale: 1=0.5rem(8px), 2=1rem(16px), 3=1.5rem(24px), 4=2rem(32px), 5=2.5rem(40px)
   =================================================================== */

/* PADDING - All sides */
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
.p-5 { padding: 2.5rem !important; }

/* PADDING - Top */
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }
.pt-5 { padding-top: 2.5rem !important; }

/* PADDING - Right */
.pr-1 { padding-right: 0.5rem !important; }
.pr-2 { padding-right: 1rem !important; }
.pr-3 { padding-right: 1.5rem !important; }
.pr-4 { padding-right: 2rem !important; }
.pr-5 { padding-right: 2.5rem !important; }

/* PADDING - Bottom */
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }
.pb-5 { padding-bottom: 2.5rem !important; }

/* PADDING - Left */
.pl-1 { padding-left: 0.5rem !important; }
.pl-2 { padding-left: 1rem !important; }
.pl-3 { padding-left: 1.5rem !important; }
.pl-4 { padding-left: 2rem !important; }
.pl-5 { padding-left: 2.5rem !important; }

/* PADDING - Horizontal (left + right) */
.px-1 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-3 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-4 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }

/* PADDING - Vertical (top + bottom) */
.py-1 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-3 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-4 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

/* MARGIN - All sides */
.m-1 { margin: 0.5rem !important; }
.m-2 { margin: 1rem !important; }
.m-3 { margin: 1.5rem !important; }
.m-4 { margin: 2rem !important; }
.m-5 { margin: 2.5rem !important; }

/* MARGIN - Top */
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 2.5rem !important; }

/* MARGIN - Right */
.mr-1 { margin-right: 0.5rem !important; }
.mr-2 { margin-right: 1rem !important; }
.mr-3 { margin-right: 1.5rem !important; }
.mr-4 { margin-right: 2rem !important; }
.mr-5 { margin-right: 2.5rem !important; }

/* MARGIN - Bottom */
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }

/* MARGIN - Left */
.ml-1 { margin-left: 0.5rem !important; }
.ml-2 { margin-left: 1rem !important; }
.ml-3 { margin-left: 1.5rem !important; }
.ml-4 { margin-left: 2rem !important; }
.ml-5 { margin-left: 2.5rem !important; }

/* MARGIN - Horizontal (left + right) */
.mx-1 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-2 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-3 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-4 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }

/* MARGIN - Vertical (top + bottom) */
.my-1 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-2 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-3 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-4 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }

/* MARGIN - Auto (useful for centering) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* PADDING/MARGIN - Zero */
.p-0 { padding: 0 !important; }
.m-0 { margin: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }