/* Font Imports */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Merriweather:wght@400;700&display=swap'); /* Global Typography */ body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: #333; background-color: #fff; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; font-weight: 700; color: #111; line-height: 1.3; margin-bottom: 0.75em; } p, li { font-family: 'Inter', sans-serif; font-weight: 300; color: #333; } /* --- CTA Button Styling (for pages and blocks) --- */ .cta, .cta-button, .wp-block-button__link { background-color: #f4d35e !important; color: #000 !important; padding: 0.75em 1.5em; border-radius: 999px; text-decoration: none; font-weight: 600; display: inline-block; transition: background-color 0.3s ease, color 0.3s ease; border: none !important; } .cta:hover, .cta-button:hover, .wp-block-button__link:hover { background-color: #ee6c4d !important; color: #fff !important; } /* Fix for "button within a button" issue on reusable patterns */ .wp-block-button, .wp-block-button:hover { background-color: transparent !important; border: none !important; } /* --- Featured Image Styling (Responsive Aspect Ratio) --- */ .featured-image-container { position: relative; overflow: hidden; padding-bottom: 33.333%; /* 3:1 aspect ratio for large screens */ } .featured-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* --- Other Global Styling --- */ img { max-width: 100%; height: auto; display: block; margin: 1em 0; } .wp-caption { margin-bottom: 1.5em; position: relative; } .wp-caption img { display: block; margin: 0; } .wp-caption-text { font-size: 0.75rem; font-style: italic; color: #666; text-align: right; margin-top: 0.25em; margin-bottom: 0; padding-right: 4px; position: relative; bottom: 0; } /* --- Menu Button Styling --- */ /* This rule is highly specific and will not conflict with the plugin */ #menu-item-1978 a { background-color: #f4d35e !important; color: #000 !important; padding: 0.75em 1.5em !important; border-radius: 999px !important; text-decoration: none !important; font-weight: 600 !important; display: inline-block !important; } /* Hover state for the buttons */ #menu-item-1978 a:hover { background-color: #ee6c4d !important; color: #fff !important; } /* --- Responsive Layout Tweaks --- */ /* Adjust aspect ratio for different screen sizes */ @media (max-width: 768px) { body { font-size: 15px; line-height: 1.5; } .wp-block-button__link, .cta, .nav-button > a { padding: 0.6em 1em; font-size: 0.95rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } .wp-caption-text { font-size: 0.7rem; padding-right: 2px; } .featured-image-container { padding-bottom: 50%; } } @media (max-width: 480px) { .featured-image-container { padding-bottom: 66.666%; } } /* Kadence-Specific Fix: Right-justify navigation when wrapping */ /* 1. Target the main navigation container (ul) */ .main-navigation ul { text-align: right; /* This aligns the list items (li) to the right when they wrap */ } /* 2. Ensure the list itself doesn't unnecessarily stretch */ .main-navigation { width: 100%; } /* FAQ accordion styles (scoped) */ .faq details { margin-top: 2.5rem; margin-bottom: 2.5rem; padding-bottom: 0; border: none; } .faq summary { cursor: pointer; font-weight: 600; color: #4A5D63; list-style: none; padding-right: 2rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.1rem; color: #52808D; } .faq details[open] summary::after { content: "-"; } .faq summary:hover { color: #498E8B; }