/* Font families */
:root {
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
}

/* Base font styles */
body {
    font-family: var(--font-body);
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: #1f315d;
    line-height: 1.2;
}

/* Specific heading styles */
h1 {
    font-weight: 400;
    font-size: clamp(3.2rem, 4vw, 4.38rem);
    text-align: center;
    margin-bottom: 0.5em;
}

h2 {
    font-weight: 400;
    font-size: clamp(2.57rem, 4vw, 3.75rem);
    text-align: center;
    margin-bottom: 0.5em;
}

h3 {
    font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 2.5rem);
    text-align: center;
    margin-bottom: 0.5em;
}

h4 {
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.2rem);
    text-align: center;
    margin-bottom: 0.5em;
}

h5 {
    font-family: "Poppins", serif;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 300;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
    margin-bottom: 1em;
}

h6 {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    line-height: 26px;
    font-weight: 400;
    margin-bottom: 1em;
}

p {
    font-family: var(--font-body);
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    line-height: 26px;
    font-weight: 400;
    margin-bottom: 1em;
}

/* Link styles */
a {
    color: #0073aa;
    text-decoration: underline;
}

/* YouTube embed styling - consolidated version */
.dsn-youtube-embed {
    position: relative;
    width: 100%;
    max-width: 1260px; /* Default max-width for large screens */
    margin: 20px auto;
    
    /* For larger screens (over 1400px) - fixed dimensions */
    @media (min-width: 1401px) {
        height: 708.75px; /* 1260px × 0.5625 (16:9 ratio) */
        padding-bottom: 0; /* Remove the percentage-based padding */
    }
    
    /* For screens 1400px and below - responsive with padding technique */
    @media (max-width: 1400px) {
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        overflow: hidden;
        max-width: 1060px;
    }
    
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    
    /* Other responsive sizes */
    @media (max-width: 1200px) {
        max-width: 728px;
    }
    
    @media (max-width: 1024px) {
        max-width: 560px;
    }
    
    @media (max-width: 768px) {
        max-width: 380px;
    }
    
    @media (max-width: 480px) {
        max-width: 280px;
    }
}

/* Block-specific overrides if needed */
/* 
.wp-block-dsn-wysiwyg .dsn-youtube-embed {
    /* Only add specific overrides here if the block version needs different styling */
/* } 
*/

/* Exclusion for social cards block - these styles should come from the block */
/* Removed empty ruleset for .wp-block-dsn-social-cards */

.wp-block-dsn-social-cards .social-block,
.wp-block-dsn-social-cards .social-item,
.wp-block-dsn-social-cards .social-icon,
.wp-block-dsn-social-cards .social-title {
    /* Allow specific overrides without a full reset */
    margin: initial;
    padding: initial;
    font-family: inherit;
    color: inherit;
}

/* Add this to the end of your style.css */
.grecaptcha-badge {
    /* visibility: hidden !important; */
    /* opacity: 0 !important; */
    position: fixed !important;
    bottom: -100px !important;
    right: -9999px !important;
    z-index: -9999 !important;
  }

  body .wp-block-dsn-contact-me .dsn-contact-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .wp-block-dsn-wysiwyg {
    background-color: #ffffff; 
    opacity: 1;
    /* padding: 0px 15px; */
    border-radius: 0px;
    /* max-width: 1300px; */
    /* margin: 0 auto; */
    padding-bottom: 2em;
    padding-top: 2em;
    position: relative;
    z-index: 1; 
    /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */
    min-height: 100px;
    
    isolation: isolate;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ffffff;
        z-index: -1;
    }
    
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

h2#introduction {
    margin-top: 0;
    margin-block-start: 0;
}