/**
* ============================================
* ACCESSIBLE DESIGN SYSTEM
* Global Template Styles - Base for All Projects
* ============================================
* 
* Spacing Scale (base: 16px)
* -------------------------
* 0.125rem = 2px    0.75rem  = 12px   2rem    = 32px
* 0.25rem  = 4px    0.875rem = 14px   2.25rem = 36px
* 0.5rem   = 8px    1rem     = 16px   2.5rem  = 40px
* 0.625rem = 10px   1.125rem = 18px   3rem    = 48px
*                   1.25rem  = 20px   4rem    = 64px
*                   1.5rem   = 24px
*                   1.75rem  = 28px
* 
* Focus Indicators
* ----------------
* - 3px solid outline
* - 2px offset
* - 3:1 minimum contrast ratio
* 
* Accessibility Requirements
* -------------------------
* - Minimum Touch Target: 44px (WCAG 2.5.8)
* - Minimum Font Size: 16px (WCAG best practice)
* - Color Contrast: 4.5:1 text, 3:1 UI components
*/

/**
* ============================================
* TABLE OF CONTENTS
* ============================================
* 1. CSS Variables
* 2. CSS Reset & Foundation Styles
* 3. Global Focus Styles
* 4. Typography (Headings, Paragraphs, Lists)
* 5. Links
* 6. Buttons
* 7. Forms (Basic Elements)
* 8. Skip Links
* 9. Header
* 10. Navigation
* 11. Logo
* 12. Breadcrumbs
* 13. Footer
* 14. Utility Classes
* 15. Responsive Media Queries
* 
* PROJECT-SPECIFIC COMPONENTS (Add as needed):
* - Tables
* - Cards
* - Modals/Dialogs
* - Alerts/Notifications
* - Tabs
* - Accordions
* - Advanced Forms
* ============================================
*/


/* ============================================
1. CSS VARIABLES
============================================ */
:root {
/* IMPORTANT: We provide TWO focus outline colors to meet WCAG 3:1 contrast
   requirements on both light and dark backgrounds.

   Test your focus colors with contrast checker:
   [URL will be: https://accessibledesignsystem.com/tools/contrast-checker]
*/
--ds-ads-focus-ring: #5b1b6e;       /* For light backgrounds */
--ds-ads-focus-ring-dark: #d69e2d;  /* For dark backgrounds or use F4C430 */
--ds-ads-primary-color: #5b1b6e;   /* use for primary buttons and link background color */
--ds-ads-primary-hover: #7b2d8e;   /* use for primary buttons and link hover background color */
--ds-ads-primary-accent: #d69e2d;  /* bottom border on header background, mobile menu button border */
--ds-ads-header-link: #faebd7;
--ds-ads-header-link-hover: #fff;
--ds-ads-text-primary: #313846;  /* use for body text and form legend, labels, input default */
--ds-ads-text-secondary: #4A5568; /* use for p tags, sub headings, and form helper text below labels */
--ds-ads-bg-color: #ffffff; /* body background color */
--ds-ads-color-white: #ffffff;
--ds-ads-secondary-bg-light: #fafafa;
--ds-ads-secondary-bg-med: #f5f5f5;
--ds-ads-border-color: #d0d0d0; /* gray border color that can be used for element that don't need to meet 3:1 contrast */
--ds-ads-field-color: #858585; /* lightest gray that meets 3:1 contrast against #f5f5f5 background for border styles for form elements */
--ds-ads-card-border-color: #e2e8f0; /* before: darker #cbd2db, lighter #e2e8f0 */
--ds-ads-success-color: #28a745;
--ds-ads-warning-color: #ffc107;
--ds-ads-error-color: #dc3545;
--ds-ads-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--ds-ads-font-mono: 'Lora', serif;

/* Background tint colors (solid equivalents of rgba primary color blends) */
--ds-ads-primary-bg-lightest: #f9fbfd; /* 2% primary on white - for subtle hovers */
--ds-ads-primary-bg-lighter: #f2f7fc;  /* 5% primary on white - for light hovers */
--ds-ads-primary-bg-light: #e5eff9;    /* 10% primary on white - for backgrounds */

/* Overlay colors */
--ds-ads-overlay-dark: rgba(0, 0, 0, 0.6); /* 60% black - transparent background for dark overlays with white text */

/* Disabled button colors - High contrast variants */
--ds-ads-disabled-bg: #d4d4d4;           /* Light gray background - 4.73:1 with text */
--ds-ads-disabled-text: #595959;         /* Dark gray text - 4.73:1 with background */
--ds-ads-disabled-text-secondary: #757575; /* Medium gray - 4.61:1 with white */
--ds-ads-disabled-border: #999999;       /* Border gray - 2.85:1 with white (UI component) */

/* Line heights */
--ds-ads-line-height-base: 1.5;
--ds-ads-line-height-heading: 1.3;

/* Border radius */
--ds-ads-radius-sm: 4px;
--ds-ads-radius-md: 8px;
--ds-ads-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--ds-ads-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--ds-ads-shadow-cards: 0 4px 12px rgba(0, 0, 0, 0.08);
--ds-ads-transition-fast: 150ms ease;
--ds-ads-transition-base: 250ms ease;
	

/* Add these if they don't exist */
--ads-color-primary-light: #eef2ff;
--ads-color-success: #10b981;
--ads-color-gray-50: #f9fafb;
--ads-color-gray-200: #e5e7eb;
--ads-color-gray-300: #d1d5db;
--ads-color-gray-600: #4b5563;
--ads-color-gray-700: #374151;


}


/* ============================================
2. CSS RESET & FOUNDATION STYLES
============================================ */

/**
* Modern CSS Reset & Foundation Styles
* Designed for accessibility and cross-browser consistency
*/

/* Box Model */
/* Use a more intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}

/* Margin Resets */
/* Remove default margin on common elements */
body, 
h1, h2, h3, h4, h5, h6, 
p, 
ul, ol, li, 
figure, 
blockquote, 
dl, dd {
margin: 0;
padding:0;
}

address {
	font-style: normal;
	font-size: 1rem;
	padding: .5rem 0;
}

/* Media Elements */
/* Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

/* SVG */
/* Prevent SVGs from being focusable by default in IE */

svg {
fill: currentColor;
/* Note: Remove this if your SVGs need to be interactive */
pointer-events: none;
}

/* Form Elements */
/* Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}

/* Reset fieldset and legend defaults */
fieldset {
padding: 0;
border: none;
margin: 0;
}

legend {
padding: 0;
}

/* Table Elements */
table {
border-collapse: collapse;
border-spacing: 0;
}

td, th {
padding: 0;
}

/* Horizontal Rule */
hr {
border: none;
margin: 0;
}

/* Body Defaults for Optimum Accessibility */

body {
font-size: 1rem; 				/* for optimum accessibility 16px default */
line-height: var(--ds-ads-line-height-base);	/* for optimum accessibility 1.5 default */
color: var(--ds-ads-text-primary);
background-color: var(--ds-ads-bg-color);
font-family: var(--ds-ads-font-family);
}


/* ============================================
3. GLOBAL FOCUS STYLES
============================================ */

/* Custom focus indicator for keyboard navigation */

/* Default focus - for light backgrounds */
*:focus-visible {
outline: 3px solid var(--ds-ads-focus-ring, #000);
outline-offset: 2px;
}

/* Dark background focus - apply .ds-ads-dark-bg to parent */
.ds-ads-dark-bg *:focus-visible {
outline: 3px solid var(--ds-ads-focus-ring-dark, #fff);
outline-offset: 2px;
}

/* Remove focus ring for mouse clicks */
*:focus:not(:focus-visible) {
outline: none;
}


/* ============================================
4. TYPOGRAPHY
============================================ */

/* Headings */
h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
font-family: var(--ds-ads-font-mono);
}

h2 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.875rem;
font-family: var(--ds-ads-font-mono);
}

h3 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.75rem;
font-family: var(--ds-ads-font-mono);
}

h4 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.5rem;
}

/* Paragraphs */
p {
line-height: 1.6;
margin-bottom: 1rem;
}


/* ============================================
5. LINKS
============================================ */

a, a:link, a:active, a:focus {
text-decoration: underline;
color:var(--ds-ads-primary-color);
}

a:hover {
text-decoration: none;
color:var(--ds-ads-secondary-color);
}

a:focus {
text-decoration: none;
}


/* ============================================
6. BUTTONS
============================================ */

/* Primary CTA Button */
a.ds-ads-cta-button,
button.a.ds-ads-cta-button {
display: inline-block;
padding: 1rem 2rem;
background: var(--ds-ads-primary-color);
color: var(--ds-ads-color-white);
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: background var(--ds-ads-transition-base);
}

a.ds-ads-cta-button:hover,
button.a.ds-ads-cta-button:hover {
text-decoration: none;
background: #7B2D8E;
}


/* ============================================
7. FORMS (Basic Elements)
============================================ */
/* Add form styles as needed for your project */


/* ============================================
8. SKIP LINKS
============================================ */
a.ds-ads-skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--ds-ads-primary-color);
color: var(--ds-ads-color-white);
padding: 0.5rem 1rem;
text-decoration: none;
z-index: 100;
}

a.ds-ads-skip-link:focus {
top: 5px;
left: 5px;
outline-offset: 0;
outline-color: var(--ds-ads-focus-ring-dark, #fff);
}


/* ============================================
9. HEADER
============================================ */

/* HEADER */
.ds-ads-header {
background: var(--ds-ads-primary-color);
border-bottom: 4px solid var(--ds-ads-primary-accent);
padding: 1.25rem 0;
position: relative;
}


.ds-ads-header-container {
max-width: 1280px;
margin: 0 auto;
/* padding: 0 1.25rem; */
display: flex;
justify-content: space-between;
align-items: center;
}

/* ============================================
10. NEW NAVIGATION
============================================ */

/* Header
        .ds-ads-header {
            background-color: var(--ds-ads-color-bg);
            border-bottom: 2px solid var(--ds-ads-color-border);
            padding: 1rem;
            position: relative;
        }

        .ds-ads-header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
 */
        .ds-ads-logo {
            text-decoration: none;
        }

        /* Menu Button (hidden on large screens) */
        .ds-ads-menu-button {
            display: none;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--ds-ads-primary-color);
            color: var(--ds-ads-header-link);
            border: 2px solid var(--ds-ads-primary-accent);
            padding: 0.5rem 1rem;
            font-size: 16px;
            font-family: var(--ds-ads-font-family);
            cursor: pointer;
            border-radius: 4px;
        }

        .ds-ads-menu-button:hover {
            background-color: var(--ds-ads-primary-hover);
        }

        .ds-ads-menu-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        /* Navigation */
        .ds-ads-nav {
            display: block;
        }

        .ds-ads-nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 0.5rem;
        }

        .ds-ads-nav-item {
            position: relative;
        }

        .ds-ads-nav-link {
            display: block;
            padding: 0.75rem 1rem;
            color: var(--ds-ads-color-text);
            text-decoration: none;
            border-radius: 4px;
            border: 2px solid transparent;
        }

        .ds-ads-nav-link:hover {
            background-color: var(--ds-ads-color-hover-bg);
        }

        /* Submenu toggle button */
        .ds-ads-submenu-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: transparent;
            color: var(--ds-ads-color-text);
            border: 2px solid transparent;
            padding: 0.75rem 1rem;
            font-size: 16px;
            font-family: var(--ds-ads-font-family);
            cursor: pointer;
            border-radius: 4px;
            width: 100%;
            text-align: left;
        }

        .ds-ads-submenu-toggle:hover {
            background-color: var(--ds-ads-color-hover-bg);
        }

        .ds-ads-submenu-icon {
            width: 16px;
            height: 16px;
            margin-left: auto;
            transition: transform 0.3s ease;
        }

        .ds-ads-submenu-toggle[aria-expanded="true"] .ds-ads-submenu-icon {
            transform: rotate(180deg);
        }

        /* Submenu */
        .ds-ads-submenu {
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
            background-color: var(--ds-ads-primary-colords-ads-primary-bg-light);
            border: 2px solid var(--ds-ads-primary-bg-light);
            border-radius: 4px;
            min-width: 200px;
        }

        .ds-ads-submenu[aria-hidden="false"] {
            display: block;
        }

        .ds-ads-submenu .ds-ads-nav-link,
        .ds-ads-submenu .ds-ads-submenu-toggle {
            padding: 0.75rem 1rem;
        }

        /* Nested submenu styling */
        .ds-ads-submenu .ds-ads-submenu {
            margin-left: 1rem;
            margin-top: 0.5rem;
        }

        /* Mobile styles */
        /* BREAKPOINT CONFIGURATION: This must match MOBILE_BREAKPOINT in JavaScript */
        /* If changing this value, update both CSS @media queries AND the JavaScript constant */
        @media (max-width: 768px) {
            .ds-ads-menu-button {
                display: flex;
            }

            .ds-ads-nav {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: var(--ds-ads-primary-color);
                border-bottom: 2px solid var(--ds-ads-primary-bg-light);
                padding: 1rem;
                z-index: 1000;
            }

            .ds-ads-nav[aria-hidden="false"] {
                display: block;
            }

            .ds-ads-nav-list {
                flex-direction: column;
                gap: 0;
            }

            .ds-ads-nav-item {
                border-bottom: 1px solid var(--ds-ads-primary-bg-light);
            }

            .ds-ads-nav-item:last-child {
                border-bottom: none;
            }

            .ds-ads-submenu[aria-hidden="false"] {
                display: block;
                border: none;
                border-left: 3px solid var(--ds-ads-primary-color);
                margin-left: 1rem;
                margin-top: 0.5rem;
                padding-left: 0.5rem;
            }

            .ds-ads-submenu .ds-ads-nav-item {
                border-bottom: none;
            }
        }

        /* Desktop submenu positioning */
        /* BREAKPOINT CONFIGURATION: This must be MOBILE_BREAKPOINT + 1 (currently 768 + 1 = 769) */
        /* When changing breakpoint, this should be your MOBILE_BREAKPOINT value + 1px */
        @media (min-width: 769px) {
            .ds-ads-nav-item {
                position: relative;
            }

            .ds-ads-submenu {
                position: absolute;
                top: 100%;
                left: 0;
                margin-top: 0.25rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            .ds-ads-submenu .ds-ads-submenu {
                position: absolute;
                top: 0;
                left: 100%;
                margin-left: 0.25rem;
                margin-top: 0;
            }
        }


/* ============================================
10. OLD NAVIGATION
============================================ */

/* Logo */
.ds-ads-logo {

}

.ds-ads-logo img {
max-width:320px;
width:100%;
}



/* Navigation
.ds-ads-nav {
display: flex;
gap: 2rem;
list-style: none;
}  */

.ds-ads-nav a {
font-weight: 500;
color: var(--ds-ads-header-link);
text-decoration: none;
transition: color 0.2s ease;
}

.ds-ads-nav a:hover {
color: var(--ds-ads-bg-color);
text-decoration: underline;
}

.ds-ads-nav-link {
	
}

.ds-ads-nav a.ds-ads-nav-active {
	
}


/* ============================================
11. BREADCRUMBS
============================================ */

.ds-ads-breadcrumb {
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--ds-ads-card-border-color);
}

.ds-ads-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
    align-items: center;
}

.ds-ads-breadcrumb-item {
    display: flex;
    align-items: center;
}

.ds-ads-breadcrumb-item:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    color: var(--ds-ads-text-secondary);
}

.ds-ads-breadcrumb-link {
    transition: color 0.2s;
}

.ds-ads-breadcrumb-link:focus {
    border-radius: 2px;
}

.ds-ads-breadcrumb-current {
    font-weight: 500;
}


/* ============================================
12. MAIN CONTENT / PAGE LAYOUTS
============================================ */

/* MAIN CONTENT */
.ds-ads-main {
max-width: 1280px;
margin: 0 auto;
padding: 1.5rem 1rem;
}

.ds-ads-hero {
text-align: center;
margin-top: 1rem;
margin-bottom: 5rem;
}

.ds-ads-hero h1 {
font-size: 3rem;
font-weight: 600;
color: var(--ds-ads-primary-color);
line-height: 1.2;
margin-bottom: 1.5rem;
}

.ds-ads-hero p {
font-size: 1.25rem;
color: var(--ds-ads-text-secondary);
max-width: 800px;
margin: 0 auto 2rem;
}

a.ds-ads-cta-button,
button.a.ds-ads-cta-button {
display: inline-block;
padding: 1rem 2rem;
background: var(--ds-ads-primary-color);
color: var(--ds-ads-color-white);
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s ease;
}

a.ds-ads-cta-button:hover,
button.a.ds-ads-cta-button:hover {
text-decoration: none;
background: #7B2D8E;
}

/* ============================================
13. Legal CONTENT pages
============================================ */

.ds-ads-legal-page {
	
}
/*
.ds-ads-legal-page ul,
.ds-ads-legal-page ol {
	margin-left: 2rem;
} */

.ds-ads-legal-section {}

/* ============================================
14. Nested Lists
============================================ */

.ds-ads-nested-list {
	margin-left: 2rem;
}

.ds-ads-nested-list ol {
	counter-reset: item;
	padding: 0;
	margin: 0;
}

/* Increment the counter for each list item */
.ds-ads-nested-list ol li {
  display: block; /* Required for the :before pseudo-element to display correctly */
  font-size:1.25rem;
  font-weight:normal;
  padding-bottom:.5rem;
}

.ds-ads-nested-list ol li h2,
.ds-ads-nested-list ol li h3 {
	display: inline-block;
	font-weight:600;
	margin:0;
	padding:0;

}

.ds-ads-nested-list ol li h2 {
	font-size: 1.25rem;
}

.ds-ads-nested-list ol li h3 {
	font-size: 1.125rem;
	padding:.25rem 0;
}

.ds-ads-nested-list p {
	padding:0;
	margin:0;
}

.ds-ads-nested-list ol > li > p {
	font-size: 1rem;
}

.ds-ads-nested-list ol li ol,
.ds-ads-nested-list ol li ul {
	padding-left:1rem;
}

.ds-ads-nested-list ol li ol li ul {
	list-style: disc;
}

.ds-ads-nested-list ol li ol li ul li {
	list-style: disc;
	display:inline-block;
}

.ds-ads-nested-list ol li ol li,
.ds-ads-nested-list ol li ul li {
	font-size: 1rem;
}

/* Add the multi-level numbering before each list item */
.ds-ads-nested-list ol > li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  padding-right: 5px; /* Optional spacing */
}

/* ============================================
PROJECT-SPECIFIC: PRAYERWIZ STYLES
Remove or replace these for your project
============================================ */

/* Hero Section - PrayerWiz Homepage */
.ds-ads-hero {
text-align: center;
margin-bottom: 5rem;
}

.ds-ads-hero h1 {
font-size: 3rem;
font-weight: 600;
color: var(--ds-ads-primary-color);
line-height: 1.2;
margin-bottom: 1.5rem;
}

.ds-ads-hero p {
font-size: 1.25rem;
color: var(--ds-ads-text-secondary);
max-width: 800px;
margin: 0 auto 2rem;
}

/* Features Section - PrayerWiz Homepage */
.ds-ads-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 5rem;
}

.ds-ads-feature-card {
background: #FFFFFF;
padding: 2rem;
border-radius: 8px;
box-shadow: var(--ds-ads-shadow-cards);
border: 1px solid var(--ds-ads-card-border-color);
}

.ds-ads-emoji-icon {
font-size: 3rem;
flex-shrink: 0;
line-height: 1;
}

.ds-ads-feature-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}

.ds-ads-feature-icon {
width: 3rem;
height: 3rem;
flex-shrink: 0;
}

.ds-ads-feature-card h2 {
line-height:1.4;
font-size: 1.5rem;
font-weight: 600;
color: var(--ds-ads-primary-color);
margin: 0;
}

.ds-ads-feature-card p {
color: var(--ds-ads-text-secondary);
}





/* Content Section */
.ds-ads-content-section {
margin-bottom: 3.75rem;
}

.ds-ads-content-section h2 {
font-size: 2.25rem;
font-weight: 600;
color: var(--ds-ads-primary-color);
margin-bottom: 1rem;
}

.ds-ads-content-section h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--ds-ads-primary-color);
margin-bottom: 0.75rem;
margin-top: 1.5rem;
}

.ds-ads-content-section p {
color: var(--ds-ads-text-secondary);
}

/* ============================================
   404 ERROR PAGE
   ============================================ */

.ds-ads-error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
}

.ds-ads-error-content {
    max-width: 600px;
}

.ds-ads-error-number {
    font-size: 8rem;
    font-weight: 700;
    color: var(--ads-color-primary);
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.2;
}

.ds-ads-error-page h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.ds-ads-error-page .ds-ads-lead {
    font-size: 1.25rem;
    color: var(--ads-color-gray-700);
    margin-bottom: 1rem;
}

.ds-ads-error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.ds-ads-error-help {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ads-color-gray-200);
}

.ds-ads-error-help h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .ds-ads-error-number {
        font-size: 5rem;
    }
    
    .ds-ads-error-page h1 {
        font-size: 1.5rem;
    }
    
    .ds-ads-error-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================
   FOLLOW PAGE
   ============================================ */

.ds-ads-follow-page {
    max-width: 800px;
    margin: 0 auto;
}

/* Pastor Profile */
.ds-ads-pastor-profile {
    background: var(--ads-color-gray-50);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.ds-ads-pastor-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ds-ads-pastor-avatar {
    flex-shrink: 0;
}

.ds-ads-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--ads-color-primary) 0%, var(--ads-color-primary-dark) 100%);
    color: white;
    font-size: 3rem;
    font-weight: 700;
    border-radius: 50%;
}

.ds-ads-pastor-info h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
}

.ds-ads-pastor-title {
    color: var(--ads-color-primary);
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.ds-ads-pastor-church {
    color: var(--ads-color-gray-600);
    margin: 0;
}

.ds-ads-pastor-bio {
    line-height: 1.6;
}

/* Follow Section */
.ds-ads-follow-section {
    background: white;
    border: 2px solid var(--ads-color-gray-200);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.ds-ads-follow-section h2 {
    margin-top: 0;
}

.ds-ads-follow-benefits {
    background: var(--ads-color-primary-light);
    border-left: 4px solid var(--ads-color-primary);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.ds-ads-follow-benefits h3 {
    margin-top: 0;
    font-size: 1.125rem;
}

.ds-ads-follow-benefits ul {
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;
}

.ds-ads-follow-benefits li {
    margin-bottom: 0.5rem;
}

/* Follow Form */
.ds-ads-follow-form {
    margin-top: 2rem;
}

.ds-ads-form-group {
    margin-bottom: 1.5rem;
}

.ds-ads-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ds-ads-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ads-color-gray-300);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.ds-ads-form-input:focus {
    outline: none;
    border-color: var(--ads-color-primary);
}

.ds-ads-form-help {
    color: var(--ads-color-gray-600);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.ds-ads-follow-actions {
    margin: 2rem 0;
}

.ds-ads-button-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.ds-ads-button-success {
    background: var(--ads-color-success);
}

.ds-ads-follow-privacy {
    text-align: center;
    color: var(--ads-color-gray-600);
}

/* Status Messages */
.ds-ads-status-message {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-weight: 500;
}

.ds-ads-status-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ds-ads-status-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* How It Works */
.ds-ads-how-it-works {
    margin: 3rem 0;
}

.ds-ads-steps {
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
}

.ds-ads-steps li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 2rem;
}

.ds-ads-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--ads-color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.ds-ads-steps strong {
    display: block;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.ds-ads-steps p {
    color: var(--ads-color-gray-600);
    margin: 0;
}

/* FAQ Section */
.ds-ads-faq-section {
    margin: 3rem 0;
}

.ds-ads-faq-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ads-color-gray-200);
}

.ds-ads-faq-item:last-child {
    border-bottom: none;
}

.ds-ads-faq-item h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.ds-ads-faq-item p {
    color: var(--ads-color-gray-700);
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ds-ads-pastor-header {
        flex-direction: column;
        text-align: center;
    }
    
    .ds-ads-avatar-placeholder {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
    
    .ds-ads-pastor-info h1 {
        font-size: 1.5rem;
    }
    
    .ds-ads-follow-section,
    .ds-ads-pastor-profile {
        padding: 1.5rem;
    }
    
    .ds-ads-button-large {
        width: 100%;
    }
}



/* ============================================
13. FOOTER
============================================ */

/* FOOTER */
.ds-ads-footer {
background: var(--ds-ads-secondary-bg-light);
padding: 2rem 0;
border-top: 4px solid var(--ds-ads-primary-accent);
}

.ds-ads-footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.25rem;
}

.ds-ads-footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

.ds-ads-footer-section h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--ds-ads-text-secondary);
}

.ds-ads-footer-section p,
.ds-ads-footer-section li {
color: var(--ds-ads-text-secondary);
}

.ds-ads-footer-section li {
margin-bottom: 0.5rem;
}

.ds-ads-footer-links {
list-style: none;
}

.ds-ads-footer a {
color: var(--ds-ads-text-primary);
text-decoration: none;
transition: text-decoration 0.2s ease;
}

.ds-ads-footer-links a:hover {
text-decoration: underline;
}


.ds-ads-footer-bottom {
padding-top: 1.5rem;
border-top: 1px solid var(--ds-ads-card-border-color);
text-align: center;
}


/* ============================================
14. UTILITY CLASSES
============================================ */
/* Add utility classes here as needed:
- Margin/padding helpers
- Text alignment
- Display helpers
- etc.
*/


/* ============================================
15. RESPONSIVE MEDIA QUERIES
============================================ */

/* Responsive */
@media (max-width: 768px) {
.ds-ads-header-container {
	flex-direction: column;
	gap: 1.25rem;
}

.ds-ads-nav {
	gap: 1.25rem;
}

.ds-ads-hero h1 {
	font-size: 2.25rem;
}

.ds-ads-features {
	grid-template-columns: 1fr;
}
}


/* ============================================
PROJECT-SPECIFIC COMPONENTS
Add below as needed for your project:
============================================ */

/* ===================
CARDS
===================
Use for: Content grouping, product displays, testimonials
Include: Shadows, borders, hover states, padding
*/


/* ===================
TABLES
===================
Use for: Data presentation, pricing tables, schedules
Include: Responsive patterns, striping, sorting indicators
Remember: caption for accessibility, scope attributes
*/


/* ===================
MODALS / DIALOGS
===================
Use for: Forms, confirmations, image galleries
Include: Overlay, focus trapping, ESC key close
Remember: aria-modal="true", focus management
*/


/* ===================
ALERTS / NOTIFICATIONS
===================
Use for: Success messages, errors, warnings, info
Include: role="alert", color coding, dismiss buttons
Remember: aria-live for dynamic announcements
*/


/* ===================
TABS
===================
Use for: Content organization, settings panels
Include: Arrow key navigation, panel show/hide
Remember: role="tablist", aria-selected, aria-controls
*/


/* ===================
ACCORDIONS
===================
Use for: FAQs, content sections, collapsible menus
Include: aria-expanded, button controls
Remember: heading structure for screen readers
*/


/* ===================
ADVANCED FORMS
===================
Use for: Multi-step forms, file uploads, date pickers
Include: Validation, error states, progress indicators
Remember: aria-describedby for errors, aria-invalid
*/


/* ===================
TOOLTIPS
===================
Use for: Help text, definitions, extra info
Include: Positioning, keyboard trigger, ESC close
Remember: role="tooltip", aria-describedby
*/


/* ===================
DROPDOWN MENUS
===================
Use for: Navigation menus, select alternatives
Include: Arrow key navigation, ESC close
Remember: aria-haspopup, aria-expanded
*/


/* ===================
PAGINATION
===================
Use for: Blog lists, search results, product catalogs
Include: Current page indicator, prev/next
Remember: aria-current="page", aria-label for context
*/


/* ===================
LOADING INDICATORS
===================
Use for: AJAX calls, page transitions, form submissions
Include: Spinners, progress bars, skeleton screens
Remember: aria-live="polite", aria-busy="true"
*/

/* ============================================
   COMING SOON STYLES for Hero Section
   Add this to your main CSS file
   ============================================ */

/* Coming Soon Message */
.ds-ads-coming-soon {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ds-ads-primary-color);
    margin-top: 2rem;
    margin-bottom: .5rem;
    text-transform: capitalize;
    letter-spacing: 2px;
}

/* Beta Note */
.ds-ads-beta-note {
    font-size: 1.125rem;
    margin-top: 0;
}

/* Optional: Add animation to Coming Soon */
@media (prefers-reduced-motion: no-preference) {
    .ds-ads-coming-soon {
        animation: ds-ads-fade-in 1s ease-in;
    }
    
    @keyframes ds-ads-fade-in {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ds-ads-coming-soon {
        font-size: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .ds-ads-beta-note {
        font-size: 1rem;
    }
}