/*======================================================================

    Tsukuba Catholic Church

    Version 2.0

    Project Emmaus

    --------------------------------------------------------------------

    Beautiful Outside.

    Predictable Inside.

    Because the work deserves it.

    --------------------------------------------------------------------
    This stylesheet forms the visual foundation of the Tsukuba Catholic Church

    website and serves as the core UI framework for future

    projects built upon the Emmaus architecture.

    Every section is intentionally documented.

    Every component is reusable.

    Every line exists for a purpose.

=======================================================================*/

/*======================================================================

    TABLE OF CONTENTS


    01. Foundation

        1.1 CSS Variables

        1.2 Reset

        1.3 Typography

        1.4 Global Elements

    02. Layout

    03. Components

    04. Page Sections

    05. Utilities

    06. Animations

    07. Responsive Design

=======================================================================*/

/*======================================================================

    1.1 CSS VARIABLES

    All project colors, spacing, typography and animations

    are centralized here.

    This ensures consistency across the entire framework.

=======================================================================*/


:root{


    /*==============================================================

        BRAND COLORS

    ==============================================================*/

    --side-panel-top: 215px;    

    --primary-color:#003366;

    --primary-dark:#002244;

    --primary-light:#00509E;


    --accent-color:#D4AF37;

    --accent-light:#F2D675;

    --success-color:#2E8B57;

    --warning-color:#E69500;

    --danger-color:#C62828;

    --text-secondary:#666666;

    --surface-color:#F8FAFC;

    --border-color:#DDDDDD;

    --border-radius:12px;

    --shadow:0 8px 25px rgba(0,0,0,.12);


    /*==============================================================
        NEUTRAL COLORS
    ==============================================================*/

    --white:#FFFFFF;

    --off-white:#FAFAFA;

    --light-gray:#F5F5F5;

    --gray:#DDDDDD;

    --dark-gray:#666666;

    --text-color:#333333;

    --black:#111111;


    /*==============================================================
        BACKGROUNDS
    ==============================================================*/


    --background-color:#FFFFFF;

    --section-light:#F8FAFC;

    --section-dark:#003366;

    --footer-background:#002244;


    /*==============================================================
        TYPOGRAPHY
    ==============================================================*/


    --font-family:

    "Segoe UI",

    "Helvetica Neue",

    Arial,

    sans-serif;

    --font-size-xs:.80rem;

    --font-size-sm:.90rem;

    --font-size-md:1rem;

    --font-size-lg:1.15rem;

    --font-size-xl:1.40rem;

    --font-size-2xl:2rem;

    --font-size-3xl:3rem;

    --line-height:1.8;


    /*==============================================================
        SPACING SYSTEM

        8px Grid
    ==============================================================*/

    --space-1:.25rem;

    --space-2:.50rem;

    --space-3:.75rem;

    --space-4:1rem;

    --space-5:1.50rem;

    --space-6:2rem;

    --space-7:3rem;

    --space-8:4rem;

    --space-9:6rem;


    /*==============================================================
        BORDER RADIUS
    ==============================================================*/

    --radius-small:6px;

    --radius-medium:12px;

    --radius-large:18px;

    --radius-xl:30px;


    /*==============================================================
        SHADOWS
    ==============================================================*/

    --shadow-light:

    0 2px 8px rgba(0,0,0,.08);


    --shadow-medium:

    0 8px 25px rgba(0,0,0,.12);


    --shadow-large:

    0 20px 40px rgba(0,0,0,.18);


    /*==============================================================
        TRANSITIONS
    ==============================================================*/

    --transition-fast:.20s ease;

    --transition-normal:.35s ease;

    --transition-slow:.60s ease;


    /*==============================================================
        SITE WIDTHS
    ==============================================================*/

    --container-width:1400px;

    --content-width:900px;

}


/*======================================================================
    1.2 CSS RESET

    Establishes a clean and predictable foundation across browsers.

    This reset intentionally avoids excessive normalization.
    Instead, it prepares a consistent environment upon which
    the Emmaus Framework is built.

=======================================================================*/

/*--------------------------------------------------------------
    Universal Box Model

    Every element calculates dimensions consistently.

--------------------------------------------------------------*/

*,
*::before,
*::after{

    box-sizing:border-box;

}


/*--------------------------------------------------------------
    Remove default spacing
--------------------------------------------------------------*/

*{

    margin:0;

    padding:0;

}


/*--------------------------------------------------------------
    Root document behaviour
--------------------------------------------------------------*/

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


/*--------------------------------------------------------------
    Media Elements

    Prevent media from overflowing containers.

--------------------------------------------------------------*/

img,
picture,
video,
canvas{

    max-width:100%;

    height:auto;

    display:block;

}


/*--------------------------------------------------------------
    SVG Elements

    Prevent inline SVG spacing issues.

--------------------------------------------------------------*/

svg{

    display:block;

}


/*--------------------------------------------------------------
    Form Typography

    Form controls should inherit the design system typography.
--------------------------------------------------------------*/

input,
button,
textarea,
select{

    font:inherit;

}


/*--------------------------------------------------------------
    Buttons

    Remove browser-specific cursor behavior.

    Detailed button styling belongs in Components.

--------------------------------------------------------------*/

button{

    cursor:pointer;

}


/*--------------------------------------------------------------
    Links

    Detailed link styling belongs in Global Elements.

--------------------------------------------------------------*/

a{

    text-decoration:none;

}


/*--------------------------------------------------------------
    Accessibility

    Preserve keyboard navigation visibility.

--------------------------------------------------------------*/

:focus-visible{

    outline:3px solid var(--accent-color);

    outline-offset:3px;

}

/*======================================================================

    1.3 BASE TYPOGRAPHY

    Defines the written voice of the Emmaus Framework.

    Typography should provide:

    - readability

    - hierarchy

    - calm visual rhythm

    - multilingual support

=======================================================================*/

/*--------------------------------------------------------------

    Root Typography

--------------------------------------------------------------*/


html{

    font-size:16px;

}


body{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    font-family:var(--font-family);

    font-size:var(--font-size-md);

    line-height:var(--line-height);

    background: linear-gradient(
         90deg,
         #EAD8A6  0%,
         #F7F2E8  18%,
         #F7F2E8  82%,
         #EAD8A6 100%
    );

    color:var(--text-color);

    background-position: center top;

    background-repeat: no-repeat;

    background-attachment: scroll;

    margin: 0;
 
    overflow-x: auto;


}


/*--------------------------------------------------------------

    Heading Hierarchy

--------------------------------------------------------------*/

h1,

h2,

h3,

h4,

h5,

h6{

    font-weight:700;

    line-height:1.25;

    color:var(--primary-color);

    margin-bottom:var(--space-4);

}


h1{

    font-size:var(--font-size-3xl);

}


h2{

    font-size:var(--font-size-2xl);

}


h3{

    font-size:var(--font-size-xl);
}


h4{

    font-size:var(--font-size-lg);

}


h5,

h6{

    font-size:var(--font-size-md);
}


p{

    margin-bottom:var(--space-4);

}

strong{

    font-weight:700;
}


em{

    font-style:italic;
}


a{

    color:inherit;
}


blockquote{

    margin:var(--space-5) 0;

    padding-left:var(--space-5);

    border-left:4px solid var(--accent-color);

    font-style:italic;

}


.content-text{

    max-width:var(--content-width);

}

/*======================================================================
    1.4 GLOBAL ELEMENTS

    Establishes common behavior for elements used throughout
    the Emmaus Framework.

=======================================================================*/


/*--------------------------------------------------------------
    1.4.1 Links

    Global link behavior.

    Visual styling belongs to components and navigation.

--------------------------------------------------------------*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition-normal);

}

/*--------------------------------------------------------------
    1.4.2 Buttons

    Establishes global button behavior.

    Visual button styles belong to Components.

--------------------------------------------------------------*/

button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

    transition:var(--transition-normal);

}

button:disabled{

    cursor:not-allowed;

}

/*--------------------------------------------------------------
    1.4.3 Form Elements

    Establishes consistent behavior for user input elements.

    Detailed form components belong later.

--------------------------------------------------------------*/


input,
textarea,
select{

    font:inherit;

    color:inherit;

}

textarea{

    resize:vertical;

}

label{

    cursor:pointer;

}

input:disabled,
textarea:disabled,
select:disabled{

    cursor:not-allowed;

}

/*--------------------------------------------------------------
    1.4.4 Tables & Content Elements

    Establishes predictable behavior for common
    content structures.

--------------------------------------------------------------*/


/*--------------------------------------------------------------
    Tables

    Ensure tables remain readable and responsive.

--------------------------------------------------------------*/

table{

    width:100%;

    border-collapse:collapse;

}

th,
td{

    text-align:left;

    vertical-align:middle;

}

ul,
ol{

    margin-bottom:var(--space-4);

}

hr{

    border:none;

    border-top:1px solid var(--gray);

    margin:var(--space-6) 0;

}

/*--------------------------------------------------------------
    1.4.5 Selection & Accessibility Details

    Establishes inclusive interaction behavior.

--------------------------------------------------------------*/


/*--------------------------------------------------------------
    Text Selection

    Defines the appearance when users highlight text.

--------------------------------------------------------------*/

::selection{

    background:var(--accent-color);

    color:var(--black);

}

:focus-visible{

    outline:3px solid var(--accent-color);

    outline-offset:3px;

}

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

/*======================================================================
    LAYER 2 — LAYOUT

    Defines the spatial structure of the Emmaus Framework.

=======================================================================*/


/*======================================================================
    2.1 Container System

    Provides consistent horizontal alignment across pages.

=======================================================================*/


/*--------------------------------------------------------------
    Main Container

    Controls the maximum width of page content.

--------------------------------------------------------------*/

.container{

    width:100%;

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:var(--space-5);

}

/*--------------------------------------------------------------
    Reading Container

    Used for long-form content.

--------------------------------------------------------------*/

.content-container{

    max-width:var(--content-width);

    margin-inline:auto;

}

/*======================================================================
    2.2 Page Sections

    Defines vertical rhythm between major website sections.

=======================================================================*/


/*--------------------------------------------------------------
    Standard Section

--------------------------------------------------------------*/

.section{

    padding-block:var(--space-9);

}

/*--------------------------------------------------------------
    Section Heading

--------------------------------------------------------------*/

.section-header{

    text-align:center;

    margin-bottom:var(--space-7);

}

.section-title{

    margin-bottom:var(--space-3);

}

.section-subtitle{

    max-width:700px;

    margin-inline:auto;

}

.content-narrow{

    max-width:800px;

    margin-inline:auto;

}

/*======================================================================
    2.3 Grid & Flex Foundations

    Establishes reusable layout utilities.

======================================================================*/


/*--------------------------------------------------------------
    Flex Layout

--------------------------------------------------------------*/

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-gap{

    gap:var(--space-4);

}

.grid{

    display:grid;

}

.grid-cols-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:var(--space-6);

}

.grid-cols-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-6);

}

.grid-auto{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:var(--space-6);

}

/*==============================================================
    Responsive Breakpoints

    Desktop : 1200px+
    Laptop  : 992px+
    Tablet  : 768px+
    Mobile  : below 768px

==============================================================*/

/*======================================================================
    2.4 Responsive Layout Rules
======================================================================*/

@media (max-width:992px){

    /* grid adjustments */

    .grid-cols-3{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    /* container */
    .container{

        padding-inline:var(--space-4);

    }

    /* grids */
    .grid-cols-2{

        grid-template-columns:1fr;

    }

     .grid-cols-3{

        grid-template-columns:1fr;

    }

    /* flex utilities */
    .flex-mobile-column{

        flex-direction:column;

    }
}

/*======================================================================
    2.5 Structural Areas

    Defines the primary structural regions of every page.

======================================================================*/

header{

    position:relative;

    z-index:100;
}

main{

    display:block;

}

footer{

    position:relative;

}

/*======================================================================
    3.1 Site Header

    The primary navigation area of the website.

======================================================================*/


/*--------------------------------------------------------------
    Header
--------------------------------------------------------------*/

/* Main Header */

.site-header {

    background: var(--primary-color);

    color: var(--accent-color);

    padding: 5px 30px;

    min-height: 200px;

    position: relative;
    
    width= auto;

    overflow: visible;

    z-index: 1000;

}


/*--------------------------------------------------------------
    Header Inner Layout

--------------------------------------------------------------*/

/*--------------------------------------------------------------
    Logo

--------------------------------------------------------------*/

.site-header__logo{

    flex:0 0 auto;

}

/*--------------------------------------------------------------
    Navigation Region

--------------------------------------------------------------*/

.site-header__nav{

    flex:1;

    display:flex;

    justify-content:center;

}

/*--------------------------------------------------------------
    Header Utilities

--------------------------------------------------------------*/

.site-header__tools{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:var(--space-3);

}


/*======================================================================
3.5 Content Cards
======================================================================*/

.home-page .content-cards {

     position: absolute;

     left: -0.5%;

     top: 24px;

     width: 320px;

     z-index: 50;

}


.home-page .content-cards__grid {

     display: flex;
    
     flex-direction: column;

     gap: var(--space-5);

}

.content-card{

    display:flex;

    flex-direction:column;

    background: rgba(255, 255, 255, 0.92);

    border-radius: 12px;

    min-height: 150px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.content-card:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 36px rgba(0,0,0,.12);

}

.content-card__icon{

     font-size: 30p;

     margin-bottom: 8px;

}

.content-card__media{

    aspect-ratio:16/9;

    overflow:hidden;

}

.content-card__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.content-card__body{

    display: flex;

    flex-direction: column;

    gap: var(--space-3);

    padding: 10px;

    flex: 1;

}

.content-card__title{

    color:var(--primary-color);

}

.content-card__text{

    color:var(--text-secondary);

}

.content-card__footer{

    padding: 0 14px 14px;

}


/*======================================================================
    3.7 Button Component

======================================================================*/

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-2);

    min-height:48px;

    padding-inline:var(--space-5);

    padding-block:var(--space-3);

    border:none;

    border-radius:var(--radius-medium);

    cursor:pointer;

    font:inherit;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:

        background-color var(--transition-normal),

        color var(--transition-normal),

        border-color var(--transition-normal),

        transform var(--transition-fast),

        box-shadow var(--transition-normal);

}

.button--primary{

    background:var(--primary-color);

    color:var(--white);

}

.button--primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}


.button--secondary{

    background:var(--white);

    color:var(--primary-color);

}

.button--secondary:hover{

    background:#f5f5f5;

}

.button--outline{

    background:transparent;

    border:2px solid var(--white);

    color:var(--white);

}

.button--outline:hover{

    background:rgba(255,255,255,.12);

}

/*======================================================================
    3.8 Forms
======================================================================*/

.form{

    display:flex;

    flex-direction:column;

    gap:var(--space-5);

}

.form__group{

    display:flex;

    flex-direction:column;

    gap:var(--space-2);

}

.form__label{

    font-weight:600;

    color:var(--primary-color);

}

.form__control{

    width:100%;

    padding:var(--space-3);

    border:1px solid var(--border-color);

    border-radius:var(--radius-medium);

    background:var(--white);

    transition:

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);

}

.form__control:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 0 4px rgba(0,70,140,.12);

}

.form__help{

    color:var(--text-secondary);

}

.form__actions{

    display:flex;

    justify-content:flex-end;

    gap:var(--space-3);

}

@media (max-width:768px){

    .form__actions{

        justify-content:stretch;

    }

    .form__actions .button{

        width:100%;

    }

}


/*======================================================================
    3.9 Site Footer
======================================================================*/

.site-footer{

    background:var(--footer-background);

    color:var(--white);

    margin-top:0;

    min-height: 170px;

    overflow-x: auto;
    
    overflow-y: auto; 
    
    padding:20px 20px 15px;

    min-width= 100%;

    border-top: 6px solid var(--accent-color);

    box-shadow: 0 -5px 15px rgba(0,0,0,0.15);

}


.site-footer__container{

    display:grid;

    grid-template-columns:

        1.4fr

        1fr

        1fr;

    gap:var(--space-8);

    padding-block:1rem;

}

.site-footer__section{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}

.site-footer__section h3 {

        font-size: 17px;
        color:var(--accent-color);

    }

.site-footer__section h4 {

        font-size: 15px;
        color:var(--accent-color);

    }

.site-footer__brand{

    display:flex;

    flex-direction:column;

    gap:var(--space-4);

}

.site-footer__nav{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}

.site-footer__contact{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}


.site-footer__visit{

    display:flex;

    flex-direction:column;

    gap:var(--space-4);

}

.site-footer__map{

    overflow:hidden;

    border-radius:var(--radius-medium);

    min-height:180px;

}

.site-footer__map iframe{

    width:100%;

    height:100%;

    border:0;

}

.site-footer__bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding-top:20px;

    margin-top:20px;

    border-top:1px solid rgba(255,255,255,.25);

    position:relative;

}


/* Thin gold line inside copyright separator */

.site-footer__bottom::before{

    content:"";

    position:absolute;

    top:-2px;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:3px;

    background:var(--accent-color);

}


.site-footer__bottom p{

    margin:0;

    color:rgba(255,255,255,.85);

    font-size:0.9rem;

}

.site-footer a{

    color:inherit;

    text-decoration:none;

    transition:color var(--transition-fast);

}

.site-footer a:hover{

    color:var(--accent-color);

}



/*=========================================================
    3.10 Welcome Message
=========================================================*/

.welcome-message{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-top: 350px;

    text-align:center;

}

.welcome-message__content{

    max-width: 650px;

    margin:auto;

}

.welcome-message h1{

    color: lime;

    font-size: 42px;

    margin-bottom: 30px;

}

.welcome-message p{

   color: lime;

    font-size: 28px;

    line-height: 2;

}

/*======================================================================
    4.1 Home Page Layout Composition
   
======================================================================*/

.home-page .homepage-stage {

    position: relative;

    width: 100%;
}

.home-page .page-main::before {

    content: "";
    position: absolute;
    inset: 0;
    background: 
         linear-gradient(
            to right,
            rgba(244,231,189,.85) 0%,
            rgba(255,253,245,.35) 18%,
            rgba(255,253,245,.35) 82%,
            rgba(244,231,189,.85) 100%
        );
     z-index: 0;
     pointer-events: none;

}


.home-page .page-main {

         position: relative;
         width: auto;
         overflow-x: auto;
         /*overflow-y: auto;*/
         height: 1570px;
         background-image: url("../images/background.jpg");
         background-position: center top;
         background-repeat: no-repeat;
         background-size: 100% 1550px; 
         box-shadow: 0 0 30px rgba(0,0,0,.10);
    
}


body.home-page .homepage-scale {

  /* Main Header */

  .site-header {

    background: var(--primary-color);

    color: var(--accent-color);

    padding: 5px 30px;

    min-height: 200px;

    position: relative;
    
    width= auto;
    
    overflow: visible;

    z-index: 1000;

  }
  

  /* Main Footer */

  .site-footer{

    background:var(--footer-background);

    color:var(--white);

    margin-top:0;

    min-height: 200px;

    overflow-x: auto;
    
    overflow-y: auto; 
    
    padding:20px 20px 15px;

    width= auto;

    border-top: 6px solid var(--accent-color);

    box-shadow: 0 -5px 15px rgba(0,0,0,0.15);

  }

}


/* =========================================================
   4.2 EMMAUS HOMEPAGE
         MOBILE COMPOSITION
   ---------------------------------------------------------
   HP-SPECIFIC MOBILE NAMESPACE

   Desktop:
       Existing .home-page rules remain untouched.

   Mobile:
       .hp-page
       .hp-mobile-composition

   Composition:
       One fixed design coordinate system.

   Portrait:
       40%

   Landscape:
       80%

   Typography:
       50% of desktop design values.

   IMPORTANT:
       This block intentionally does NOT modify
       global .button
       global .content-card
       global .site-footer
       or other page components.
   ========================================================= */


/* =========================================================
   HP MOBILE BASE
   ========================================================= */

@media (max-width: 1024px) {


    /* -----------------------------------------------------
       HP PAGE ROOT
       ----------------------------------------------------- */

    body.hp-page {

        margin: 0;
        padding: 0;
        
        overflow-x: auto;
        overflow-y: auto;

        background: linear-gradient(
            90deg,
            #EAD8A6 0%,
            #F7F2E8 18%,
            #F7F2E8 82%,
            #EAD8A6 100%
        );

         background-position: left top;
         background-repeat: no-repeat;
         background-size: 1700px 100%;
       
    }


    /* =====================================================
       MASTER HP COMPOSITION
       ===================================================== */

    body.hp-page .hp-mobile-composition {

         width: 1500px;
         max-width: none;         
         margin: 0;
         padding: 0;

        /*
         * One fixed desktop composition.
         *
         * zoom is used instead of transform so that
         * visual scale and layout geometry remain
         * synchronized.
         */
        zoom: 0.40;

        transform: none;
        transform-origin: top left;


        /* -------------------------------------------------
           EMMAUS MOBILE TYPOGRAPHY VARIABLES
           -------------------------------------------------

           These remain available for components that use
           the design-system variables.

           Explicit homepage typography below handles
           components that currently use fixed values.
           ------------------------------------------------- */

        --font-size-xs: 0.40rem;
        --font-size-sm: 0.45rem;
        --font-size-md: 0.50rem;
        --font-size-lg: 0.575rem;
        --font-size-xl: 0.70rem;
        --font-size-2xl: 1rem;
        --font-size-3xl: 1.50rem;

    }


    /* =====================================================
       HEADER
       ===================================================== */

    body.hp-page .hp-mobile-composition .site-header {

        width: 100%;
        min-height: 200px;
        overflow: visible;
 
   }
 
   body.hp-page .hp-mobile-composition .header-container {

        width: 95%;
        max-width: 1700px;

        min-height: 190px;

        display: flex;

        flex-wrap: nowrap;

        align-items: center;

        gap: 25px;
    
     }

      body.hp-page .hp-mobile-composition .header-logo {

        flex: 0 0 auto;

    }


    body.hp-page .hp-mobile-composition .header-logo img {

        width: 180px;
        height: auto;

        display: block;

    }



   
    body.hp-page .hp-mobile-composition .header-identity {

        order: initial;

        flex: 1;
        width: auto;

        margin-top: 0;

        padding: 0 15px;

        text-align: center;

    }


    /*
     * Desktop: 26px
     * Mobile : 13px
     */

    body.hp-page .hp-mobile-composition .church-name {

        font-size: 10px;

    }


    /*
     * Desktop: 18px
     * Mobile : 9px
     */

    body.hp-page .hp-mobile-composition .church-location {

        font-size: 9px;

    }


    /*
     * Desktop: 14px
     * Mobile : 7px
     */

    body.hp-page .hp-mobile-composition .church-short-name {

        font-size: 7px;

    }


  /* =====================================================
       MAIN NAVIGATION
       ===================================================== */

    body.hp-page .hp-mobile-composition .main-navigation {

        order: initial;

        width: 750px;
        flex: 0 0 750px;

        height: auto;

    }


    body.hp-page .hp-mobile-composition .main-navigation > ul {

        display: flex;

        flex-wrap: wrap;

        gap: 8px 12px;

        margin: 0;
        padding: 0;

    }


    /*
     * Desktop: 15px
     * Mobile : 7.5px
     */

    body.hp-page .hp-mobile-composition .main-navigation a {

        font-size: 7.5px;

        padding: 8px 10px;

    }


    /*
     * Desktop: 14px
     * Mobile : 7px
     */

    body.hp-page .hp-mobile-composition .dropdown-menu a {

        font-size: 7px;

    }


    /*
     * Desktop: 11px
     * Mobile : 5.5px
     */

    body.hp-page .hp-mobile-composition .dropdown-arrow {

        font-size: 5.5px;

    }


    /* =====================================================
       LANGUAGE SELECTOR
       ===================================================== */

    body.hp-page .hp-mobile-composition .language-selector {

        flex: 0 0 auto;

    }


    /*
     * Desktop: 14px
     * Mobile : 7px
     */

    body.hp-page .hp-mobile-composition .language-selector select {

        font-size: 7px;

    }


    /* =====================================================
       HOMEPAGE STAGE
       ===================================================== */

    body.hp-page .hp-mobile-composition .homepage-stage {

        position: relative;

        width: 100%;

        margin: 0;
        padding: 0;

    }


    /* =====================================================
       PAGE MAIN / BACKGROUND
       ===================================================== */

    body.hp-page .hp-mobile-composition .page-main {

        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;

        /*
         * 40% composition scale.
         *
         * Preserve the original homepage vertical
         * composition rather than allowing the browser
         * to reflow it.
         */
        /*min-height: calc(250vh - 125px);*/

        /*background: red !important;*/

        height: 1570px;
        border-top: 8px solid var(--accent-color);
        background-position: center top;

        background-repeat: no-repeat;

        background-size: 100% 1550; 

        /*background-size: 830px 100%;*/

        box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
    }


    /* =====================================================
       WELCOME MESSAGE
       ===================================================== */

    /*
     * Desktop: 44px
     * Mobile : 22px
     */

     body.hp-page
    .hp-mobile-composition
    .page-main
    .welcome-message h1 {

        font-size: 15px;
    }


    /*
     * Desktop: 20px
     * Mobile : 10px
     */

     body.hp-page
    .hp-mobile-composition
    .page-main
    .welcome-message p {

        font-size: 13px;
    }


    /* =====================================================
       CONTENT CARDS — HP ONLY
       ===================================================== */

    body.hp-page .hp-mobile-composition .homepage-stage {

        .content-cards {

             position: absolute;
             left: -1.5%;
             top: 18px;
             width: 420px;
             z-index: 50;
        }
    
        .content-cards__grid {

            display: flex;
            flex-direction: column;
            gap: 16px;
         }

    /*
     * Desktop card icon: 30px
     * Mobile: 15px
     */

      .content-card__body {

          display:flex;
          flex-direction: column;
          gap: 4px;
          padding: 5px;
          flex:1;
       }


        .content-card__icon {

            font-size: 12px;
         }


    /*
     * Desktop h3:
     * 1.40rem = 22.4px
     *
     * Mobile:
     * 11.2px
     */

         .content-card__title {

             font-size: 12px;
          }


    /*
     * Desktop body:
     * 16px
     *
     * Mobile:
     * 8px
     */

         .content-card__text {

               font-size: 11px;
          }

      }


    /* =====================================================
       HP CARD LINKS / ACTIONS
       -----------------------------------------------------
       IMPORTANT:
       We do NOT modify .button globally.

       These rules apply only to homepage cards.
       ===================================================== */

    body.hp-page .hp-mobile-composition .homepage-stage {

       .content-card {

           box-sizing: border-box;
           overflow: hidden;
        }

        .content-card a {

           box-sizing: border-box;
           max-width: 100%;
           white-space: normal;
           overflow-wrap: break-word;
           word-break: normal;
           line-height: 1.3;
        }


    /*
     * Card-specific action/button classes.
     *
     * These override the inherited desktop sizing only
     * inside homepage cards.
     */
   
      
        .content-card .button {

           box-sizing: border-box;
           max-width: 100%;
           font-size: 11px;
           line-height: 1.3;
           padding: 5px 8px;
           white-space: normal;
           overflow-wrap: break-word;
           word-break: normal;
        } 

     }

    /* =====================================================
       WEATHER and UPCOMING EVENTS
       ===================================================== */

     body.hp-page .hp-mobile-composition .homepage-stage {
   
         .weather-widget {

              position: absolute;
              top: 100px;
              z-index: 50;
          }

    /*
     * Desktop: 36px
     * Mobile : 18px
     */

          .weather-icon {

               font-size: 18px;
           }


    /*
     * Desktop: 22px
     * Mobile : 11px
     */

  
           #weather-temperature {

              font-size: 15px;
           }

    /*
     * Desktop: 13px
     * Mobile : 6.5px
     */

          #weather-humidity,
          #weather-wind,
          #weather-condition {

               font-size: 13px;
           }


    /*
     * Desktop inherited body:
     * 16px
     *
     * Mobile:
     * 8px
     */

  
            #weather-location {

                font-size: 13px;
            }
 
           .upcoming-events {

               position: absolute;

               top: 650px;
               right: 1.2%;

               width: 300px;
               height: 750px;

               z-index: 60;

             }

             .upcoming-events__header {        
                 height: 100px;
              }

             .upcoming-events__title {
                 font-size: 14px;
                 font-weight: 700;
                 text-transform: uppercase;
              }

/* ================================================================
   EVENT TITLE
   ================================================================ */

.upcoming-events__event-title {

    font-size: 12px;
  
}


/* ================================================================
   EVENT DATE
   ================================================================ */

.upcoming-events__date {


    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


/* ================================================================
   EVENT DESCRIPTION
   ================================================================ */

.upcoming-events__description {

    font-size: 10.5px;

    line-height: 1.65;

 
}


/* ================================================================
   EVENT BUTTON
   ================================================================ */

.upcoming-events__button {

    
    font: inherit;
    font-size: 10px;
    font-weight: 700;
}

}


    /* =====================================================
       FOOTER — HP COMPOSITION ONLY
       ===================================================== */

    body.hp-page
    .hp-mobile-composition
    .site-footer {

        width: 100%;

        height: 580px;

        margin-top: 0;
        overflow-x: auto;
        overflow-y: auto;
        padding: 10px 15px 8px;

        border-top: 6px solid var(--accent-color);

        /*
         * Mobile footer typography is defined here
         * rather than changing the global footer.
         */
        font-size: 12px;

    }


    /*
     * Preserve desktop three-column composition.
     */

    body.hp-page
    .hp-mobile-composition
    .site-footer__container {

        display: grid;
        
        grid-template-columns:
            1.4fr
            1fr
            1fr;
           
        gap: 10px;

        padding-block: 5px;

    }


    /*
     * Footer h3:
     * Desktop 1.40rem = 22.4px
     * Mobile 11.2px
     */

    body.hp-page
    .hp-mobile-composition
    .site-footer__section h3 {

        font-size: 14px;
        margin-bottom: 5px;

    }


    /*
     * Footer h4:
     * Desktop 1.15rem = 18.4px
     * Mobile 9.2px
     */

    body.hp-page
    .hp-mobile-composition
    .site-footer__section h4 {

        font-size: 13px;
        margin-bottom: 5px;

    }


    /*
     * Visit Church button.
     *
     * HP footer only.
     */

    body.hp-page
    .hp-mobile-composition
    .site-footer .visit-button {

        font-size: 12px;

    }


    /*
     * Copyright:
     * Desktop 0.9rem = 14.4px
     * Mobile 7.2px
     */

    body.hp-page
    .hp-mobile-composition
    .site-footer__bottom p {

        font-size: 10px;

    }


    /*
     * Keep copyright centered.
     */

    body.hp-page
    .hp-mobile-composition
    .site-footer__bottom {

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

        text-align: center;

    }

}


/* =========================================================
   LANDSCAPE HP COMPOSITION
   ---------------------------------------------------------
   SAME DESIGN.
   SAME TYPOGRAPHY.
   ONLY SCALE CHANGES.

       Portrait  = 40%
       Landscape = 80%

   ========================================================= */

@media (max-width: 1024px) and (orientation: landscape) {



    /* -----------------------------------------------------
       MASTER COMPOSITION
       ----------------------------------------------------- */

    body.hp-page
    .hp-mobile-composition {

        width: 1500px;    
        max-width: none;
             
        zoom: 0.80;

        transform: none;
        transform-origin: top left;

    }
     

     /* =====================================================
       HEADER
       ===================================================== */

    body.hp-page .hp-mobile-composition .site-header {

        width: 100%;
        min-height: 200px;

    }


    body.hp-page .hp-mobile-composition .header-container {

        min-height: 190px;

    }

      /* -----------------------------------------------------
       PAGE HEIGHT COMPENSATION
       ----------------------------------------------------- */

    body.hp-page
    .hp-mobile-composition
    .homepage-stage
    .page-main {

        min-height: 100%;
        min-width: auto;

    }
 

    body.hp-page .hp-mobile-composition .church-name {

        font-size: 20px;

    }
 

    body.hp-page .hp-mobile-composition .church-location {

        font-size: 15px;

    }

   
    body.hp-page .hp-mobile-composition .church-short-name {

        font-size: 13.5px;

    }


    /* =====================================================
       MAIN NAVIGATION
       ===================================================== */  

    body.hp-page .hp-mobile-composition .main-navigation a {

        font-size: 15px;

    }


    body.hp-page .hp-mobile-composition .dropdown-menu a {

        font-size: 13px;

    }


    body.hp-page .hp-mobile-composition .dropdown-arrow {

        font-size: 12px;

    }


    /* =====================================================
       LANGUAGE SELECTOR
       ===================================================== */

  
    body.hp-page .hp-mobile-composition .language-selector select {

        font-size: 14px;

    }

   body.hp-page .hp-mobile-composition .homepage-stage {

     .page-main {

        height: 1500px;
      }

 
      /* =====================================================
       WELCOME MESSAGE
       ===================================================== */
   
    .page-main
    .welcome-message h1 {

        font-size: 20px;

    }

    .page-main
    .welcome-message p {

        font-size: 15px;

    }

     .content-cards {

             /*position: absolute;*/
             /*left: -1.5%;*/
             /*top: 36px;*/
             width: 450px;
             z-index: 50;
      }

       .content-cards__grid {

            display: flex;
            flex-direction: column;
            gap: 36px;
         }

    .content-card__icon {

        font-size: 16px;

    }


    .content-card__title {

        font-size: 14px;

    }


    .content-card__text {

        font-size: 13px;

    }


    /* =====================================================
       HP CARD LINKS / ACTIONS
       =====================================================
    */

    .content-card .button
    {

        font-size: 13.5px;

    } 


    /* =====================================================
       WEATHER
       ===================================================== */
  
    .weather-widget {

              width: 350px;
              right: 1.5%;
          }

    .weather-icon {

        font-size: 18px;

    }

 
    #weather-temperature {

        font-size: 14px;

    }


    #weather-humidity,
    #weather-wind,
    #weather-condition {

        font-size: 14px;

    }

    #weather-location {

        font-size: 14px;

    }

    .upcoming-events {

               right: 1.5%;
               width: 450px;
               height: 550px;

        }


    .content-cards__grid {
        
        display: flex;
        flex-direction: column;
        gap: 18px;
     }

   }

      /* =====================================================
       FOOTER — HP COMPOSITION ONLY
       ===================================================== */

    body.hp-page
    .hp-mobile-composition
    .site-footer {

        height: 380px;
        font-size: 15px;

    } 

    body.hp-page
    .hp-mobile-composition
    .site-footer__section h3 {

        font-size: 17px;
    }


    body.hp-page
    .hp-mobile-composition
    .site-footer__section h4 {

        font-size: 17px;
    }

    body.hp-page
    .hp-mobile-composition
    .site-footer .visit-button {

        font-size: 15px;

    }


    body.hp-page
    .hp-mobile-composition
    .site-footer__bottom p {

        font-size: 12px;

    }

}


/* =========================================================
   EMMAUS NORMAL PAGES
   MOBILE COMPOSITION
   ---------------------------------------------------------
   Visual composition : approximately 850px
   Internal design    : 1700px
   Scale              : 50%

   IMPORTANT:
   - PHP wrappers remain untouched.
   - Homepage is NOT affected.
   - Global desktop components remain untouched.
   - This block intentionally overrides normal mobile
     reflow for the shared site shell.
   ========================================================= */


/* =========================================================
   PORTRAIT / GENERAL MOBILE
   ========================================================= */

@media (max-width: 1024px) {

    /*
     * -------------------------------------------------------
     * NORMAL PAGE ROOT
     * -------------------------------------------------------
     *
     * The body becomes the composition canvas.
     *
     * 1700px × 50% = 850px visual composition.
     */

    body:not(.hp-page) {

        width: 1700px;
        max-width: none;
        min-width: 1700px;

        margin: 0;
        padding: 0;

        overflow-x: auto;
        overflow-y: auto;

        zoom: 0.40;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    body:not(.hp-page) .site-header {

        width: 100%;
        height: 350px;

    }

    /*
     * Preserve the desktop header composition.
     */

    body:not(.hp-page) .header-container {

        width: 95%;
        max-width: 1700px;

        height: 330px;

        display: flex;
        flex-wrap: nowrap;
        align-items: center;

        gap: 25px;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    body:not(.hp-page) .header-logo {

        flex: 0 0 auto;
    }


    body:not(.hp-page) .header-logo img {

        width: 180px;
        height: auto;
        display: block;
    }


    /* -----------------------------------------------------
       CHURCH IDENTITY
       ----------------------------------------------------- */

    body:not(.hp-page) .header-identity {

        order: initial;

        flex: 1;
        width: auto;

        margin-top: 0;
        padding: 0 15px;

        text-align: center;
    }


    /*
     * Typography is reduced because the entire composition
     * is also being viewed at 50%.
     */

    body:not(.hp-page) .church-name {

        font-size: 14px;
    }


    body:not(.hp-page) .church-location {

        font-size: 13px;
    }


    body:not(.hp-page) .church-short-name {

        font-size: 11px;
    }


    /* =====================================================
       MAIN NAVIGATION
       ===================================================== */

    body:not(.hp-page) .main-navigation {

        order: initial;

        width: 750px;
        flex: 0 0 750px;

        height: auto;
    }


    body:not(.hp-page) .main-navigation > ul {

        display: flex;
        flex-wrap: wrap;

        gap: 8px 12px;

        margin: 0;
        padding: 0;
    }


    body:not(.hp-page) .main-navigation a {

        font-size: 11px;

        padding: 8px 10px;
    }


    /* -----------------------------------------------------
       DROPDOWN
       ----------------------------------------------------- */

    body:not(.hp-page) .dropdown-menu a {

        font-size: 10px;
    }


    body:not(.hp-page) .dropdown-arrow {

        font-size: 10px;
    }


    /* =====================================================
       LANGUAGE SELECTOR
       ===================================================== */

    body:not(.hp-page) .language-selector {

        flex: 0 0 auto;
    }


    body:not(.hp-page) .language-selector select {

        font-size: 11px;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    body:not(.hp-page) .site-footer {

        width: 100%;

        height: 550px;

        margin-top: 0;

        padding: 20px 20px 15px;

        border-top: 6px solid var(--accent-color);

        font-size: 8px;
    }


    /*
     * Preserve the desktop three-column footer.
     */

    body:not(.hp-page) .site-footer__container {

        display: grid;

        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap: var(--space-8);

        padding-block: 1rem;
    }


    body:not(.hp-page) .site-footer__section h3 {

        font-size: 14px;
    }


    body:not(.hp-page) .site-footer__section h4 {

        font-size: 13px;
    }


    body:not(.hp-page) .site-footer .visit-button {

        font-size: 12px;
    }


    body:not(.hp-page) .site-footer__bottom {

        display: flex;
        flex-direction: row;

        justify-content: center;
        align-items: center;

        text-align: center;
    }


    body:not(.hp-page) .site-footer__bottom p {

        font-size: 11px;
    }


    /* =====================================================
       NORMAL PAGE CONTENT
       ===================================================== */

    /*
     * Prevent the existing generic mobile rules from
     * forcing content into a narrow phone layout.
     */

    body:not(.hp-page) .page-main {

        width: 100%;
    }


    body:not(.hp-page) .page-section {

        width: 100%;
    }


    /*
     * Containers remain controlled by their own desktop
     * composition rather than becoming single-column
     * mobile containers.
     */

    body:not(.hp-page) .container {

        max-width: 1200px;
    }

    body:not(.hp-page) .about-intro__text {
   
         margin-top: 100px;

         font-size: 11px;

    }


}


/* =========================================================
   LANDSCAPE
   ---------------------------------------------------------
   Keep the same 850px visual composition.
   ========================================================= */

@media (max-width: 1024px) and (orientation: landscape) {

    body:not(.hp-page) {

        width: 1700px;
        max-width: none;
        min-width: 1700px;

        zoom: 0.8;
    }

      /*body:not(.hp-page) {
        background: blue !important;
    }*/

}


/* =========================================================
   EMMAUS NORMAL PAGES
   MOBILE BACKGROUND CANVAS
   ---------------------------------------------------------
   Keep the global golden gradient continuous across the
   entire fixed mobile composition.
   ========================================================= */

@media (max-width: 1024px) {

    body:not(.hp-page) {

        background: linear-gradient(
            90deg,
            #EAD8A6 0%,
            #F7F2E8 18%,
            #F7F2E8 82%,
            #EAD8A6 100%
        );

        background-size: 1700px 100%;
        background-position: left top;
        background-repeat: no-repeat;
    }

}



/*======================================================================
    Hero Backgrounds
======================================================================*/

.hero--home{

    background-image: url("../images/hero-home.png");

}


.hero--priest-message{

    background-image: url("../assets/images/hero-priest-message.png");

}

.hero--parish-news{

    background-image: url("../images/hero-parish-news.png");

}

.hero--events{

    background-image: url("../images/hero-events.png");

}

.hero--gallery{

    background-image: url("../images/hero-gallery.png");

}

.hero--sacraments{

    background-image: url("../images/hero-sacraments.png");

}

.hero--contact{

    background-image: url("../images/hero-contact.png");

}


/*=========================================================
  Emmaus Framework
  Component : PDF Viewer
=========================================================*/

/*---------------------------------------------------------
  Main Container
---------------------------------------------------------*/

.document-viewer {

    width: 100%;
    max-width: 1400px;
    margin: 2rem auto;

    background: var(--background-color);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

    overflow: hidden;

}


/*---------------------------------------------------------
  Header
---------------------------------------------------------*/

.document-viewer__header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.5rem 2rem;

    background: var(--primary-color);

    color: white;

}


/*---------------------------------------------------------
  Title
---------------------------------------------------------*/

.document-viewer__title {

    margin: 0;

    font-size: 1.8rem;

    font-weight: 600;

}


/*---------------------------------------------------------
  Header Actions
---------------------------------------------------------*/

.document-viewer__actions {

    display: flex;

    gap: .75rem;

}


/*---------------------------------------------------------
  Toolbar
---------------------------------------------------------*/

.document-viewer__toolbar {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: .75rem;

    padding: 1rem;

    background: var(--surface-color);

    border-bottom: 1px solid var(--border-color);

}


/*---------------------------------------------------------
  Toolbar Buttons
---------------------------------------------------------*/

.document-viewer__button {

    padding: .65rem 1.2rem;

    border: none;

    border-radius: 6px;

    background: var(--primary-color);

    color: white;

    cursor: pointer;

    transition: .25s ease;

}

.document-viewer__button:hover {

    background: var(--accent-color);

    color: var(--primary-color);

}


/*---------------------------------------------------------
  Viewer Body
---------------------------------------------------------*/

.document-viewer__body {

    padding: 2rem;

    background: var(--surface-color);

}


/*---------------------------------------------------------
  PDF Viewport
---------------------------------------------------------*/

.document-viewer__viewport {

        width: 100%;

        height: 900px;

        background: white;

        border: 1px solid var(--border-color);

        border-radius: var(--border-radius);

        overflow: auto;

        position: relative;

       text-align: center;

}


/*---------------------------------------------------------
  Message Area
---------------------------------------------------------*/

.document-viewer__message {

    padding: 4rem 2rem;

    text-align: center;

    color: var(--text-color);

    font-size: 1.1rem;

}


/*---------------------------------------------------------
  Footer
---------------------------------------------------------*/

.document-viewer__footer {

    padding: 1rem 2rem;

    background: var(--surface-color);

    border-top: 1px solid var(--border-color);

    text-align: center;

    color: var(--text-color);

    font-size: .9rem;

}

/*=========================================================
  PDF Viewer
  Responsive
=========================================================*/

@media (max-width: 768px) {

    .document-viewer {

        margin: 1rem;

    }

    .document-viewer__header {

        flex-direction: column;

        text-align: center;

        gap: 1rem;

    }

    .document-viewer__title {

        font-size: 1.5rem;

    }

    .document-viewer__toolbar {

        justify-content: center;

    }

    .document-viewer__body {

        padding: 1rem;

    }

    .document-viewer__viewport {

        height: 600px;

        background: white;

        border: 1px solid var(--border-color);

        border-radius: var(--border-radius);

        overflow: auto;

        position: relative;

       text-align: center;

    }

}

/* ==================================================
   Emmaus Header
================================================== */


/* Header Container */

.header-container {

    width: 95%;

    max-width: 1700px;

    margin: auto;

    display: flex;

    align-items: center;

    min-height:190px;

    gap: 25px;

}



/* ==================================================
   Logo
================================================== */


.header-logo img {

    width: 180px;

    height: auto;

    display: block;

}



/* ==================================================
   Church Identity
================================================== */


.header-identity {

    text-align: center;

    flex: 1;

    padding: 0 15px;

}



.church-name {

    font-size: 32px;

    font-weight: 700;

    letter-spacing: 0.5px;

}



.church-location {

    font-size: 26px;

    margin-top: 3px;

}



.church-short-name {

    font-size: 16px;

    font-weight: bold;

    letter-spacing: 2px;

    margin-top: 3px;

    opacity: 0.9;

}



/* ==================================================
   Main Navigation
================================================== */


.main-navigation {

    width: 750px;
 
    flex: 0 0 750px;

}


.main-navigation > ul {

    display: flex;
 
    flex-wrap: wrap;

    gap: 8px 12px;

    list-style: none;

    margin: 0;

    padding: 0;

}



.main-navigation > ul > li {

    position: relative;

}



.main-navigation a {

    color: #D4AF37;

    text-decoration: none;

    font-size: 18px;

    font-weight: 700;

    padding: 8px 10px;

    display: block;

    transition: color 0.3s ease;

}



.main-navigation a:hover {

    color: #FFD700;

}



/* Active Page */

.main-navigation a.active {

    color: #FFD700;

    border-bottom: 3px solid #FFD700;

}



/* ==================================================
   Dropdown Menu
================================================== */


.dropdown-menu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 9999;

    background: #003366;

    min-width: 220px;

    padding: 10px 0;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

    border-radius: 4px;

}



.dropdown:hover .dropdown-menu {

    display: block;

}



.dropdown-menu li {

    width: 100%;

}



.dropdown-menu a {

    color: #D4AF37;

    padding: 10px 18px;

    font-size: 17px;

}



.dropdown-menu a:hover {

    background: #f2f2f2;

    color: #003366;

}



/* Dropdown Arrow */

.dropdown-arrow {

    margin-left: 5px;

    font-size: 11px;

}


/* ==================================================
   Dropdown Menu — Remove List Markers
================================================== */

.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.dropdown-menu li {
    list-style: none;
}

/* ==================================================
   Ask a Question Button
================================================== */


.ask-question a {

    background: #FFD700;

    color: #003366;

    border-radius: 20px;

    padding: 9px 18px;

    font-weight: 700;

}



.ask-question a:hover {

    background: white;

    color: #003366;

}

/* ASK A QUESTION – ACTIVE STATE */

.main-navigation .ask-question a.active {

color: #ffffff;

}

/* ASK A QUESTION – ACTIVE + HOVER */

.main-navigation .ask-question a.active:hover {

color: #f5d98a;

}


/* ==================================================
   Language Selector
================================================== */


.language-selector select {

    padding: 6px 10px;

    border-radius: 5px;

    border: 1px solid rgba(255, 255, 255, 0.4);
     
    background: transparent;

    color: white;

    font-size: 14px;

    cursor: pointer;

}


 .language-selector option {

    color: #003366;

    background: white;


}


/* ==================================================
   Emmaus Hero Section
================================================== */


/* Main Hero Container */

.hero-section {

    position: relative;

    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
   
}


/* Hero Content Area */

.hero-content {

    position: relative;

    z-index: 1;

    max-width: 700px;

    text-align: left;

    color: white;

    padding: 40px 20px;

}



/* Main Title */

.hero-content h1 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 15px;

    letter-spacing: 1px;

}



/* Subtitle */

.hero-content h2 {

    font-size: 28px;

    font-weight: 500;

    margin-bottom: 20px;

}



/* Description */

.hero-content p {

    font-size: 18px;

    line-height: 1.7;

    margin-bottom: 35px;

}

.hero-overlay{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:20px 40px;

}

/* ==================================================
   Hero Buttons
================================================== */


.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}



.hero-button {

    display: inline-block;

    padding: 12px 30px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition: all 0.3s ease;

}



/* Primary Button */

.hero-button.primary {

    background: #FFD700;

    color: #003366;

}



.hero-button.primary:hover {

    background: white;

    color: #003366;

}



/* Secondary Button */

.hero-button.secondary {

    background: transparent;

    color: white;

    border: 2px solid white;

}



.hero-button.secondary:hover {

    background: white;

    color: #003366;

}



/* ==================================================
   Responsive Hero
================================================== */


@media (max-width: 900px) {


    .hero-section {

        position:relative;
        min-height: 450px;

    }


    .hero-content h1 {

        font-size: 36px;

    }


    .hero-content h2 {

        font-size: 22px;

    }


    .hero-content p {

        font-size: 16px;

    }


}



@media (max-width: 600px) {


    .hero-content h1 {

        font-size: 30px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }


    .hero-button {

        width: 80%;

        text-align: center;

    }

}

/* ==================================================
   Emmaus Home Content
================================================== */


.home-content {

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;

}



/* Welcome Section */

.welcome-section {

    text-align: center;

    margin-bottom: 40px;

}


.welcome-section h2 {

    color:#003366;

    font-size:32px;

    margin-bottom:15px;

}


.welcome-section p {

    max-width:850px;

    margin:auto;

    font-size:17px;

    line-height:1.7;

    color:#444;

}



/* ==================================================
   Quick Access Cards
================================================== */


.quick-links {

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:20px;

    margin-bottom:45px;

}



.quick-card {

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100px;

    background:white;

    border-radius:15px;

    text-decoration:none;

    box-shadow:0 5px 15px rgba(0,0,0,0.12);

    transition:all .3s ease;

}



.quick-card h3 {

    color:#003366;

    font-size:18px;

    text-align:center;

}



.quick-card:hover {

    transform:translateY(-5px);

    box-shadow:0 8px 20px rgba(0,0,0,0.18);

}



.quick-card:hover h3 {

    color:#b8860b;

}



/* ==================================================
   Latest News
================================================== */


.latest-news {

    background:#f5f7fa;

    padding:25px;

    border-radius:15px;

    text-align:center;

}



.latest-news h2 {

    color:#003366;

    margin-bottom:15px;

}



.latest-news p {

    color:#555;

    line-height:1.6;

}



/* ==================================================
   Emmaus Weather Widget
================================================== */

.home-page .weather-widget{

    position: absolute;

    right: 2%;
  
    top: var(--side-panel-top);

    width: 250px;

    background:white;

    border-radius:14px;

    box-shadow:0 6px 18px rgba(0,0,0,.20);

    padding:12px;

    align-items:center;

    gap:12px;

    z-index:50;

    transition:.3s;

}

.weather-widget:hover{

    transform:translateY(-3px);

}

.weather-icon{

    font-size:36px;

}

.weather-information{

    flex:1;

}

#weather-location{

    font-weight:700;

    color:#003366;

}

#weather-temperature{

    font-size:22px;

    font-weight:bold;

    color:#003366;

}

#weather-humidity,
#weather-wind {

    font-size:13px;

    color:#666;

    margin-top:3px;

}

#weather-condition{

    font-size:13px;

    color:#666;

}



/* ==================================================
   News Bar
================================================== */


.news-bar {

    width:90%;

    max-width:1200px;

    margin:30px auto;

    background:#003366;

    color:white;

    border-radius:15px;

    padding:25px;

}



.news-bar-content {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}



.news-bar-text h2 {

    margin:0 0 10px;

    color:white;

}



.news-bar-text p {

    margin:0;

    line-height:1.6;

}



.news-bar-button {

    display:inline-block;

    padding:12px 25px;

    background:#FFD700;

    color:#003366;

    text-decoration:none;

    border-radius:25px;

    font-weight:600;

    transition:.3s ease;

}



.news-bar-button:hover {

    background:white;

}



/* Visit Church Button */

.visit-button {

    display: inline-block;

    background: #FFD700;

    color: #003366;

    padding: 10px 25px;

    border-radius: 25px;

    text-decoration: none;

    font-weight: 700;

}


.visit-button:hover {

    background: white;

}

.site-footer__section .visit-button{

    align-self:flex-start;

    width:auto;

}

/* ==================================================
   Emmaus Today's Word Section
================================================== */


.todays-word {

    padding: var(--space-8) 0;

    background: var(--surface-color);

}


.todays-word__container {

    max-width: 1000px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: var(--space-7);

    background: white;

    padding: var(--space-7);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-light);

}


/* Cross Icon */

.todays-word__icon {

    flex: 0 0 auto;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: var(--primary-color);

    color: var(--accent-color);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 45px;

}



/* Content Area */

.todays-word__content {

    flex: 1;

}


.todays-word__title {

    color: var(--primary-color);

    margin-bottom: var(--space-2);

}


.todays-word__subtitle {

    color: var(--accent-color);

    font-size: var(--font-size-lg);

    margin-bottom: var(--space-4);

}



/* Scripture Quote */

.todays-word__verse {

    background: var(--section-light);

    padding: var(--space-4);

    border-left: 4px solid var(--accent-color);

    margin-bottom: var(--space-4);

    color: var(--text-color);

    font-style: italic;

}


.todays-word__verse strong {

    display:block;

    margin-top:var(--space-2);

    color:var(--primary-color);

    font-style:normal;

}



/* Reflection Text */

.todays-word__text {

    color:var(--text-secondary);

    max-width:70ch;

}



/* Mobile */

@media(max-width:768px){


    .todays-word__container {

        flex-direction:column;

        text-align:center;

        padding:var(--space-5);

    }


    .todays-word__verse {

        text-align:left;

    }

}


/*======================================================================
    4.3 ABOUT US PAGE

    Emmaus Framework
    Prince of Peace Tsukuba Catholic Church

    This section styles the current About Us page structure.

======================================================================*/


/*======================================================================
    ABOUT PAGE FOUNDATION
======================================================================*/

.about-page .page-main {

    position: relative;

    border-top: 8px solid var(--accent-color);

}


.about-container {

    width: 92%;

    max-width: 1200px;

    margin-inline: auto;

}


/*======================================================================
    ABOUT INTRODUCTION
======================================================================*/

.about-intro {

    min-height: 700px;

    padding: var(--space-9) 20px;

    background: rgba(255,255,255,.88);

    background-image: url("../images/about-hero.jpg");

    text-align: center;

}


.about-intro__content {

    max-width: 900px;

    margin-inline: auto;

}


.about-eyebrow {

    display: inline-block;

    margin-bottom: var(--space-3);

    color: var(--accent-color);

    font-size: var(--font-size-sm);

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.about-intro__title {

    margin-bottom: var(--space-5);

    color: var(--primary-color);

    font-size: clamp(2rem, 4vw, 3rem);

}


.about-intro__text {

    max-width: 800px;

    margin-inline: auto;
   
    margin-top: 250px;

    color: lime;

    font-size: var(--font-size-xl);

    line-height: 2;

}


.about-intro__text:last-child {

    margin-bottom: 50px;

}


/*======================================================================
    SECTION HEADINGS
======================================================================*/

.about-section-heading {

    max-width: 900px;

    margin: 0 auto var(--space-7);

    text-align: center;

}


.about-section-heading h2 {

    margin-bottom: var(--space-4);

    color: var(--primary-color);

    font-size: clamp(1.8rem, 3vw, 2.4rem);

}


.about-section-heading p {

    max-width: 800px;

    margin-inline: auto;

    color: var(--text-secondary);

}


.about-section-heading p:last-child {

    margin-bottom: 0;

}


/*======================================================================
    HISTORY SECTION
======================================================================*/

.about-history {

    padding: var(--space-9) 0;

    background: rgba(248,250,252,.92);

}


.about-history__content {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: var(--space-7);

    align-items: center;

    max-width: 1000px;

    margin-inline: auto;

    padding: var(--space-7);

    background: var(--white);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-light);

}


.about-year {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 180px;

    padding: var(--space-5);

    background: var(--primary-color);

    border-radius: var(--radius-large);

    text-align: center;

    box-shadow: var(--shadow-medium);

}


.about-year__number {

    color: var(--accent-light);

    font-size: 3.5rem;

    font-weight: 800;

    line-height: 1;

}


.about-year__label {

    margin-top: var(--space-3);

    color: var(--white);

    font-size: var(--font-size-sm);

    line-height: 1.5;

}


.about-history__text p {

    max-width: 75ch;

    line-height: 1.85;

}


.about-history__text p:last-child {

    margin-bottom: 0;

}


/*======================================================================
    QUEEN OF PEACE / PRINCE OF PEACE
======================================================================*/

.about-peace {

    padding: var(--space-9) 0;

    background: rgba(255,255,255,.92);

}


.about-peace__story {

    display: grid;

    grid-template-columns: 1fr 70px 1fr;

    gap: var(--space-5);

    align-items: stretch;

}


.about-peace__item {

    padding: var(--space-7);

    background: var(--section-light);

    border-radius: var(--radius-large);

    border-top: 5px solid var(--accent-color);

    box-shadow: var(--shadow-light);

    transition:

        transform var(--transition-normal),

        box-shadow var(--transition-normal);

}


.about-peace__item:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-medium);

}


.about-peace__item--featured {

    background: var(--primary-color);

    border-top-color: var(--accent-light);

}


.about-peace__item h3 {

    margin-bottom: var(--space-2);

    color: var(--primary-color);

    font-size: var(--font-size-xl);

}


.about-peace__item--featured h3 {

    color: var(--accent-light);

}


.about-peace__item p {

    line-height: 1.8;

}


.about-peace__item--featured p {

    color: rgba(255,255,255,.92);

}


.about-peace__subtitle {

    color: var(--accent-color);

    font-weight: 600;

}


.about-peace__item--featured .about-peace__subtitle {

    color: var(--accent-light);

}


.about-peace__symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    margin-bottom: var(--space-4);

    border-radius: 50%;

    background: var(--primary-color);

    color: var(--accent-color);

    font-size: 25px;

}


.about-peace__item--featured .about-peace__symbol {

    background: var(--accent-color);

    color: var(--primary-color);

}


.about-peace__arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent-color);

    font-size: 38px;

    font-weight: 700;

}


/*======================================================================
    PASTORS
======================================================================*/

.about-pastors {

    padding: var(--space-9) 0;

    background: rgba(248,250,252,.95);

}


.about-pastors__timeline {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px 25px;

    max-width: 1000px;

    margin-inline: auto;

}


.pastor {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    padding: 13px 18px;

    background: var(--white);

    border-left: 4px solid var(--accent-color);

    border-radius: var(--radius-small);

    box-shadow: var(--shadow-light);

    transition:

        transform var(--transition-fast),

        box-shadow var(--transition-fast);

}


.pastor:hover {

    transform: translateX(4px);

    box-shadow: var(--shadow-medium);

}


.pastor__name {

    color: var(--primary-color);

    font-weight: 700;

}


.pastor__country {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

    text-align: right;

}


.pastor--current {

    background: var(--primary-color);

    border-left-color: var(--accent-light);

}


.pastor--current .pastor__name {

    color: var(--accent-light);

}


.pastor--current .pastor__country {

    color: rgba(255,255,255,.85);

}


/*======================================================================
    CONGREGATION AND DIOCESE
======================================================================*/

.about-congregation {

    padding: var(--space-9) 0;

    background: rgba(255,255,255,.94);

}


.about-two-column {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--space-6);

}


.about-info-card {

    display: flex;

    flex-direction: column;

    padding: var(--space-7);

    background: var(--white);

    border-radius: var(--radius-large);

    border-top: 5px solid var(--accent-color);

    box-shadow: var(--shadow-light);

}


.about-info-card h2 {

    margin-bottom: var(--space-5);

    color: var(--primary-color);

    font-size: var(--font-size-xl);

}


.about-info-card p {

    line-height: 1.8;

}


.about-info-card .about-external-link {

    margin-top: auto;

}


/*======================================================================
    EXTERNAL LINKS
======================================================================*/

.about-external-link {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-3);

    width: fit-content;

    margin-top: var(--space-3);

    padding: 10px 18px;

    background: var(--primary-color);

    color: var(--accent-light);

    border-radius: 25px;

    font-weight: 700;

    transition:

        background-color var(--transition-normal),

        color var(--transition-normal),

        transform var(--transition-fast),

        box-shadow var(--transition-normal);

}


.about-external-link span {

    font-size: 18px;

    transition: transform var(--transition-fast);

}


.about-external-link:hover {

    background: var(--accent-color);

    color: var(--primary-color);

    transform: translateY(-2px);

    box-shadow: var(--shadow-medium);

}


.about-external-link:hover span {

    transform: translateX(4px);

}


/*======================================================================
    CATHOLIC CHURCH IN JAPAN
======================================================================*/

.about-japan {

    padding: var(--space-9) 0;

    background: var(--section-light);

}


.about-japan__content {

    display: grid;

    grid-template-columns: 200px 1fr;

    gap: var(--space-7);

    align-items: center;

    max-width: 1000px;

    margin-inline: auto;

    padding: var(--space-7);

    background: var(--white);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-light);

}


.about-japan__date {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 180px;

    background: var(--primary-color);

    border-radius: var(--radius-large);

    text-align: center;

}


.about-japan__date span {

    color: var(--accent-light);

    font-size: 3rem;

    font-weight: 800;

    line-height: 1;

}


.about-japan__date small {

    margin-top: var(--space-3);

    color: var(--white);

    font-size: var(--font-size-md);

}


.about-japan__text p {

    line-height: 1.85;

}


.about-japan__text p:last-of-type {

    margin-bottom: var(--space-4);

}


/*======================================================================
    INTERNATIONAL COMMUNITY
======================================================================*/

.about-community {

    padding: var(--space-9) 0;

    background:

        linear-gradient(

            135deg,

            var(--primary-color),

            var(--primary-dark)

        );

    color: var(--white);

}


.about-community__content {

    max-width: 900px;

    margin-inline: auto;

    text-align: center;

}


.about-community .about-eyebrow {

    color: var(--accent-light);

}


.about-community h2 {

    color: var(--white);

    font-size: clamp(1.8rem, 3vw, 2.5rem);

}


.about-community p {

    color: rgba(255,255,255,.92);

    line-height: 1.85;

}


.about-community strong {

    color: var(--accent-light);

}


/*======================================================================
    CLOSING SECTION
======================================================================*/

.about-closing {

    padding: var(--space-9) 0;

    background: rgba(255,255,255,.95);

    text-align: center;

}


.about-closing__content {

    max-width: 700px;

    margin-inline: auto;

}


.about-closing__cross {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;

    height: 75px;

    margin: 0 auto var(--space-5);

    border-radius: 50%;

    background: var(--primary-color);

    color: var(--accent-color);

    font-size: 35px;

    box-shadow: var(--shadow-medium);

}


.about-closing h2 {

    margin-bottom: var(--space-3);

    color: var(--primary-color);

    font-size: clamp(2rem, 4vw, 3rem);

}


.about-closing p {

    color: var(--text-secondary);

    font-size: var(--font-size-lg);

}


/*======================================================================
    ABOUT PAGE TABLET
======================================================================*/

@media (max-width: 900px) {


    .about-peace__story {

        grid-template-columns: 1fr;

    }


    .about-peace__arrow {

        min-height: 40px;

        transform: rotate(90deg);

    }


    .about-two-column {

        grid-template-columns: 1fr;

    }


    .about-pastors__timeline {

        grid-template-columns: 1fr;

    }

}


/*======================================================================
    ABOUT PAGE MOBILE
======================================================================*/

@media (max-width: 768px) {


    .about-container {

        width: 94%;

    }


    .about-intro {

        padding: var(--space-7) 15px;

    }


    .about-intro__text {

        font-size: var(--font-size-md);

    }


    .about-history,

    .about-peace,

    .about-pastors,

    .about-congregation,

    .about-japan,

    .about-community,

    .about-closing {

        padding: var(--space-7) 0;

    }


    .about-history__content,

    .about-japan__content {

        grid-template-columns: 1fr;

        padding: var(--space-5);

        gap: var(--space-5);

    }


    .about-year,

    .about-japan__date {

        min-height: 140px;

    }


    .about-year__number {

        font-size: 3rem;

    }


    .about-japan__date span {

        font-size: 2.5rem;

    }


    .about-peace__item,

    .about-info-card {

        padding: var(--space-5);

    }


    .pastor {

        align-items: flex-start;

        flex-direction: column;

        gap: 4px;

    }


    .pastor__country {

        text-align: left;

    }


    .about-external-link {

        width: 100%;

        justify-content: center;

    }


}


/*======================================================================
    ABOUT PAGE SMALL MOBILE
======================================================================*/

@media (max-width: 480px) {


    .about-intro__title {

        font-size: 2rem;

    }


    .about-section-heading h2 {

        font-size: 1.75rem;

    }


    .about-peace__symbol {

        width: 48px;

        height: 48px;

        font-size: 22px;

    }


    .about-closing__cross {

        width: 65px;

        height: 65px;

        font-size: 30px;

    }

}

/* ================================================================
   EMMAUS FRAMEWORK
   SACRAMENT PAGE TEMPLATE
   ---------------------------------------------------------------
   Shared by:
   Baptism
   Confirmation
   Eucharist
   Reconciliation
   Anointing of the Sick
   Holy Orders
   Matrimony
================================================================ */


/* ================================================================
   SACRAMENT INTRO / HERO
================================================================ */

.sacrament-intro {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 140px 20px 130px;

    background-image: var(--sacrament-hero-image);

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    color: var(--white);

    text-align: center;

    overflow: hidden;
}


.sacrament-intro__content {

    position: relative;

    z-index: 2;

    width: 92%;

    max-width: 900px;

    margin: 0 auto;

}


.sacrament-eyebrow {

    display: block;

    margin-bottom: var(--space-3);

    color: var(--accent-color);

    font-size: var(--font-size-sm);

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.sacrament-intro .sacrament-eyebrow {

    color: var(--accent-light);

}


.sacrament-intro__title {

    margin: 0 0 var(--space-5);

    color: var(--white);

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.15;

}


.sacrament-intro__reflection {

    max-width: 720px;

    margin: 0 auto;

    color: rgba(255,255,255,.94);

    font-size: clamp(1.05rem, 2vw, 1.3rem);

    line-height: 1.8;

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 768px) {

    .sacrament-intro {

        min-height: 460px;

        padding: 80px 20px;

        background-position: center center;

    }

}


/* ================================================================
   COMMON CONTAINER
================================================================ */

.sacrament-container {

    width: 92%;

    max-width: 1200px;

    margin: 0 auto;

}


/* ================================================================
   STANDARD SACRAMENT SECTION
================================================================ */

.sacrament-section {

    padding: var(--space-9) 0;

    background: rgba(255,255,255,.96);

}


.sacrament-section-heading {

    max-width: 850px;

    margin-bottom: var(--space-6);

}


.sacrament-section-heading h2 {

    margin-top: 0;

    margin-bottom: var(--space-4);

    color: var(--primary-color);

    font-size: clamp(1.8rem, 3vw, 2.6rem);

    line-height: 1.25;

}


.sacrament-section-heading p {

    max-width: 75ch;

    margin-bottom: 0;

}


.sacrament-text {

    max-width: 850px;

}


.sacrament-text p {

    margin-bottom: var(--space-5);

    line-height: 1.9;

}


.sacrament-text p:last-child {

    margin-bottom: 0;

}


/* ================================================================
   SPIRITUAL REFLECTION
================================================================ */

.sacrament-reflection {

    position: relative;

    padding: var(--space-9) 0;

    background: var(--primary-color);

    color: var(--white);

    overflow: hidden;

}


.sacrament-reflection::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 7px;

    background: var(--accent-color);

}


.sacrament-reflection__content {

    max-width: 850px;

}


.sacrament-reflection h2 {

    margin-top: 0;

    margin-bottom: var(--space-5);

    color: var(--accent-light);

    font-size: clamp(1.8rem, 3vw, 2.6rem);

}


.sacrament-reflection p {

    margin-bottom: var(--space-5);

    color: rgba(255,255,255,.94);

    line-height: 1.9;

}


.sacrament-reflection p:last-child {

    margin-bottom: 0;

}


/* ================================================================
   SYMBOLS SECTION
================================================================ */

.sacrament-symbols {

    padding: var(--space-9) 0;

    background: var(--section-light);

}


.sacrament-symbols__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--space-5);

}


.sacrament-symbol {

    padding: var(--space-6);

    background: rgba(255,255,255,.96);

    border-top: 4px solid var(--accent-color);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-light);

    text-align: center;

    transition: var(--transition-normal);

}


.sacrament-symbol:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-medium);

}


.sacrament-symbol__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin: 0 auto var(--space-4);

    border-radius: 50%;

    background: rgba(212,175,55,.12);

    color: var(--accent-color);

    font-size: 2rem;

}


.sacrament-symbol h3 {

    margin: 0 0 var(--space-3);

    color: var(--primary-color);

}


.sacrament-symbol p {

    margin: 0;

    line-height: 1.75;

    font-size: var(--font-size-sm);

}


/* ================================================================
   PREPARATION SECTION
================================================================ */

.sacrament-preparation {

    padding: var(--space-9) 0;

    background: rgba(255,255,255,.96);

}


.sacrament-preparation__content {

    max-width: 850px;

    padding: var(--space-7);

    border-left: 5px solid var(--accent-color);

    background: var(--section-light);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-light);

}


.sacrament-preparation h2 {

    margin-top: 0;

    margin-bottom: var(--space-5);

    color: var(--primary-color);

    font-size: clamp(1.8rem, 3vw, 2.5rem);

}


.sacrament-preparation p {

    margin-bottom: var(--space-5);

    line-height: 1.9;

}


.sacrament-preparation p:last-child {

    margin-bottom: 0;

}


/* ================================================================
   DOCUMENTS & FORMS
================================================================ */

.sacrament-documents {

    padding: var(--space-9) 0;

    background: var(--section-light);

}


.sacrament-documents__list {

    max-width: 850px;

    display: flex;

    flex-direction: column;

    gap: var(--space-3);

}


.sacrament-document {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    padding: var(--space-5) var(--space-6);

    background: var(--primary-color);

    color: var(--white);

    border-left: 5px solid var(--accent-color);

    border-radius: var(--radius-medium);

    text-decoration: none;

    transition: var(--transition-normal);

}


.sacrament-document:hover {

    transform: translateX(5px);

    box-shadow: var(--shadow-medium);

}


.sacrament-document strong {

    flex-shrink: 0;

    color: var(--accent-light);

}


.sacrament-document--empty {

    cursor: default;

    opacity: .8;

}


.sacrament-document--empty:hover {

    transform: none;

    box-shadow: none;

}


/* ================================================================
   CLOSING / CALL TO ACTION
================================================================ */

.sacrament-closing {

    padding: var(--space-9) 0;

    background: var(--primary-color);

    color: var(--white);

    text-align: center;

}


.sacrament-closing__content {

    max-width: 750px;

    margin: 0 auto;

}


.sacrament-closing__cross {

    margin-bottom: var(--space-4);

    color: var(--accent-color);

    font-size: 2.5rem;

}


.sacrament-closing h2 {

    margin: 0 0 var(--space-4);

    color: var(--accent-light);

    font-size: clamp(1.8rem, 3vw, 2.6rem);

}


.sacrament-closing p {

    max-width: 650px;

    margin: 0 auto var(--space-6);

    color: rgba(255,255,255,.92);

    line-height: 1.8;

}


/* ================================================================
   SACRAMENT BUTTON
================================================================ */

.sacrament-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 25px;

    background: var(--accent-color);

    color: var(--primary-color);

    border-radius: var(--radius-medium);

    font-weight: 700;

    text-decoration: none;

    transition: var(--transition-normal);

}


.sacrament-button:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-medium);

}


.sacrament-button span {

    font-size: 1.2em;

}


/* ================================================================
   SACRAMENT PAGE RESPONSIVE
================================================================ */

@media (max-width: 1000px) {

    .sacrament-symbols__grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 768px) {

    .sacrament-intro {

        padding: 70px 20px 65px;

    }


    .sacrament-container {

        width: 94%;

    }


    .sacrament-section,
    .sacrament-reflection,
    .sacrament-symbols,
    .sacrament-preparation,
    .sacrament-documents,
    .sacrament-closing {

        padding: var(--space-7) 0;

    }


    .sacrament-symbols__grid {

        grid-template-columns: 1fr;

    }


    .sacrament-symbol {

        padding: var(--space-5);

    }


    .sacrament-preparation__content {

        padding: var(--space-5);

    }


    .sacrament-document {

        align-items: flex-start;

        flex-direction: column;

    }

}

@media (max-width: 480px) {

    .sacrament-intro {

        padding: 55px 15px;

    }


    .sacrament-intro__reflection {

        font-size: 1rem;

    }


    .sacrament-container {

        width: 92%;

    }


    .sacrament-section-heading h2,
    .sacrament-reflection h2,
    .sacrament-preparation h2,
    .sacrament-closing h2 {

        font-size: 1.7rem;

    }

}


/* ================================================================
   BAPTISM DOCUMENTS MODAL
================================================================ */

.sacrament-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.sacrament-modal.is-open {
    visibility: visible;
    opacity: 1;
}


/* ---------------------------------------------------------------
   DARK OVERLAY
---------------------------------------------------------------- */

.sacrament-modal__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 20, 45, 0.72);

    backdrop-filter: blur(3px);
}


/* ---------------------------------------------------------------
   MODAL BOX
---------------------------------------------------------------- */

.sacrament-modal__box {
    position: relative;
    z-index: 1;

    width: min(520px, 100%);

    padding: 42px 38px 38px;

    text-align: center;

    background: #ffffff;

    border-top: 5px solid #d4af37;

    border-radius: 8px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.30);

    transform: translateY(15px) scale(0.98);

    transition: transform 0.25s ease;
}


.sacrament-modal.is-open .sacrament-modal__box {
    transform: translateY(0) scale(1);
}


/* ---------------------------------------------------------------
   CLOSE BUTTON
---------------------------------------------------------------- */

.sacrament-modal__close {
    position: absolute;

    top: 12px;
    right: 15px;

    width: 34px;
    height: 34px;

    border: none;
    background: transparent;

    color: #003366;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition: color 0.2s ease;
}


.sacrament-modal__close:hover {
    color: #d4af37;
}


/* ---------------------------------------------------------------
   CROSS
---------------------------------------------------------------- */

.sacrament-modal__cross {
    margin-bottom: 12px;

    color: #d4af37;

    font-size: 28px;
}


/* ---------------------------------------------------------------
   TITLE
---------------------------------------------------------------- */

.sacrament-modal__box h2 {
    margin: 8px 0 16px;

    color: #003366;

    font-size: 28px;
}


/* ---------------------------------------------------------------
   MESSAGE
---------------------------------------------------------------- */

.sacrament-modal__box p {
    margin: 0 auto 26px;

    max-width: 420px;

    color: #555;

    font-size: 16px;
    line-height: 1.7;
}


/* ---------------------------------------------------------------
   PREVENT BACKGROUND SCROLLING
---------------------------------------------------------------- */

body.modal-open {
    overflow: hidden;
}


/* ---------------------------------------------------------------
   MOBILE
---------------------------------------------------------------- */

@media (max-width: 600px) {

    .sacrament-modal__box {
        padding: 38px 24px 30px;
    }

    .sacrament-modal__box h2 {
        font-size: 23px;
    }

    .sacrament-modal__box p {
        font-size: 15px;
    }

}


/* ================================================================
   PARISH INFORMATION & ACTIVITIES
================================================================ */

.sacrament-information {
    padding: 80px 20px;

    background: #f7f5ef;
}


.sacrament-information__grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;

    margin-top: 40px;
}


.sacrament-information__item {
    padding: 28px 30px;

    background: #ffffff;

    border-left: 4px solid #d4af37;

    border-radius: 6px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.07);
}


.sacrament-information__date {
    display: block;

    margin-bottom: 8px;

    color: #b08a20;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.05em;
}


.sacrament-information__item h3 {
    margin: 0 0 12px;

    color: #003366;

    font-size: 21px;
}


.sacrament-information__item p {
    margin: 0;

    color: #555;

    line-height: 1.7;
}

/* ================================================================
   CONTACT PAGE
   Emmaus Framework
================================================================ */


/* ================================================================
   CONTACT HERO
================================================================ */

.contact-intro {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 90px 20px;

    background:
        linear-gradient(
            rgba(7, 27, 52, 0.58),
            rgba(7, 27, 52, 0.72)
        ),
        url('/assets/images/contact-hero.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.contact-intro__content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

}


.contact-intro .parish-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

}


.contact-intro .parish-intro__title {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(2.4rem, 5vw, 4.2rem);

    line-height: 1.1;

    font-weight: 600;

    letter-spacing: 0.02em;

}


.contact-intro .parish-intro__reflection {

    max-width: 720px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.92);

    font-size: 1.15rem;

    line-height: 1.8;

}


/* ================================================================
   CONTACT INFORMATION SECTION
================================================================ */

.contact-information {

    padding: 85px 20px;

    background: 
       linear-gradient( 
           135deg, 
           #fffd7f 0%, 
           #f6edcf 45%, 
           #ead9a6 100%
      );

}


.contact-information .parish-section-heading {

    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;

}


.contact-information__grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 30px;

    max-width: 1050px;

    margin: 0 auto;

}


.contact-information__card {

    position: relative;

    padding: 42px 38px;

    background: 
          linear-gradient( 
               145deg, 
               #ffffff 0%, 
               #fffaf0 100%, 
          );

    border: 1px solid rgba(183, 145, 62, 0.20);

    border-radius: 14px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.contact-information__card:hover {

    transform: translateY(-5px);

    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.10);

}


.contact-information__icon {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 22px;

    border-radius: 50%;

    background: #0b2948;

    color: #d4af5a;

    font-size: 1.6rem;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

}


.contact-information__card h3 {

    margin: 10px 0 18px;

    color: #0b2948;

    font-size: 1.55rem;

}


.contact-information__card p {

    margin: 0 auto 12px;

    max-width: 500px;

    color: #555;

    line-height: 1.75;

}


.contact-information__address {

    font-size: 0.98rem;

}


.contact-information__phone,
.contact-information__email {

    display: block;

    margin-top: 15px;

    color: #0b2948;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.2s ease;

}


.contact-information__phone:hover,
.contact-information__email:hover {

    color: #b7913e;

}


/* ================================================================
   CONTACT MAP
================================================================ */

.contact-map {

    padding: 85px 20px;

    background: 
        linear-gradient( 
           135deg, 
           #f4edda 0%,
           #e8d49a 100%
       );

}


.contact-map .parish-section-heading {

    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;

}


.contact-map__wrapper {

    max-width: 1100px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid rgba(183, 145, 62, 0.20);

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);

}


.contact-map__wrapper iframe {

    display: block;

    width: 100%;

    min-height: 420px;

    border: 0;

}


.contact-map__action {

    display: flex;

    justify-content: center;

    margin-top: 30px;

}


/* ================================================================
   CONTACT BUTTON
================================================================ */

.parish-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 25px;

    border: 1px solid #b7913e;

    border-radius: 6px;

    background: #0b2948;

    color: #ffffff;

    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: 0.02em;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.parish-button span {

    color: #d4af5a;

    font-size: 1.15rem;

    transition: transform 0.25s ease;

}


.parish-button:hover {

    background: #b7913e;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.15);

}


.parish-button:hover span {

    color: #ffffff;

    transform: translateX(3px);

}


/* ================================================================
   CONTACT FORM SECTION
================================================================ */

.contact-form-section {

    padding: 95px 20px;

    background: 
       linear-gradient( 
           135deg, 
           #fffdf8 0%, 
           #f8f0d8 55%, 
           #efe0b3 100%
      );

}


.contact-form__layout {

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 70px;

    align-items: start;

    max-width: 1100px;

    margin: 0 auto;

}


/* ================================================================
   FORM INTRODUCTION
================================================================ */

.contact-form__intro {

    padding-top: 15px;

}


.contact-form__intro h2 {

    margin: 12px 0 22px;

    color: #0b2948;

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.15;

}


.contact-form__intro > p {

    color: #555;

    font-size: 1.05rem;

    line-height: 1.8;

}


.contact-form__cross {

    margin: 32px 0;

    color: #b7913e;

    font-size: 2.2rem;

}


.contact-form__notice {

    padding: 18px 20px;

    border-left: 3px solid #b7913e;

    background: #f8f6f1;

    color: #666;

    font-size: 0.92rem;

    line-height: 1.7;

}


/* ================================================================
   FORM CONTAINER
================================================================ */

.contact-form__wrapper {

    padding: 42px;

    background: 
          linear-gradient( 
              145deg, 
               #fffdf8%, 
               #f8efd7 100%, 
           );

    border: 1px solid rgba(183, 145, 62, 0.20);

    border-radius: 14px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);

}


.contact-form {

    width: 100%;

}


/* ================================================================
   FORM GROUP
================================================================ */

.contact-form__group {

    margin-bottom: 23px;

}


.contact-form__label {

    display: block;

    margin-bottom: 8px;

    color: #0b2948;

    font-size: 0.92rem;

    font-weight: 600;

}


.contact-form__label span {

    color: #b7913e;

}


/* ================================================================
   INPUTS
================================================================ */

.contact-form__input,
.contact-form__textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #d8d4ca;

    border-radius: 6px;

    background: #ffffff;

    color: #333;

    font-family: inherit;

    font-size: 0.98rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.contact-form__textarea {

    min-height: 165px;

    resize: vertical;

    line-height: 1.65;

}


.contact-form__input:focus,
.contact-form__textarea:focus {

    border-color: #b7913e;

    box-shadow:
        0 0 0 3px rgba(183, 145, 62, 0.12);

}


/* ================================================================
   FORM NOTICE
================================================================ */

.contact-form__notice-box {

    margin: 5px 0 25px;

    padding: 13px 16px;

    border-radius: 6px;

    background: rgba(11, 41, 72, 0.06);

}


.contact-form__notice-box p {

    margin: 0;

    color: #666;

    font-size: 0.82rem;

    line-height: 1.6;

}


/* ================================================================
   FORM SUBMIT
================================================================ */

.contact-form__submit {

    display: flex;

    justify-content: flex-start;

}


/* ================================================================
   CONTACT CLOSING
================================================================ */

.contact-closing {

    padding: 80px 20px;

    background:
        linear-gradient(
            rgba(11, 41, 72, 0.97),
            rgba(7, 27, 52, 0.97)
        );

    text-align: center;

}


.contact-closing__content {

    max-width: 750px;

    margin: 0 auto;

}


.contact-closing__cross {

    margin-bottom: 20px;

    color: #d4af5a;

    font-size: 2.3rem;

}


.contact-closing h2 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(1.9rem, 4vw, 2.8rem);

}


.contact-closing p {

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.05rem;

    line-height: 1.8;

}


/* ================================================================
   CONTACT MOBILE
================================================================ */

@media (max-width: 900px) {


    .contact-information__grid {

        grid-template-columns: 1fr;

        max-width: 650px;

    }


    .contact-form__layout {

        grid-template-columns: 1fr;

        gap: 45px;

        max-width: 700px;

    }


    .contact-form__intro {

        text-align: center;

    }


    .contact-form__notice {

        text-align: left;

    }

}


@media (max-width: 600px) {


    .contact-intro {

        min-height: 360px;

        padding: 75px 18px;

    }


    .contact-intro .parish-intro__title {

        font-size: 2.35rem;

    }


    .contact-intro .parish-intro__reflection {

        font-size: 1rem;

        line-height: 1.7;

    }


    .contact-information,
    .contact-map,
    .contact-form-section {

        padding: 65px 16px;

    }


    .contact-information__card {

        padding: 32px 24px;

        background: 
          linear-gradient( 
           145deg, 
           #ffffff 0%, 
           #fffaf0 100%, 
         );

    }


    .contact-form__wrapper {

        padding: 28px 20px;

         background: 
            linear-gradient( 
              145deg, 
               #fffdf8%, 
               #f8efd7 100%, 
             );

    }


    .contact-map__wrapper iframe {

        min-height: 350px;

    }


    .parish-button {

        width: 100%;

    }


    .contact-form__submit {

        width: 100%;

    }


    .contact-form__submit .parish-button {

        width: 100%;

    }


    .contact-closing {

        padding: 65px 18px;

    }

}


/* ================================================================
   ASK A QUESTION
   Emmaus Framework
   Parish Assistant / Preset Q&A Interface
================================================================ */


/* ================================================================
   ASK QUESTION HERO
================================================================ */

.qa-intro {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 85px 20px;

    background:
        url('/assets/images/ask-question.png')
        65% center / cover no-repeat;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.qa-intro__content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

}


.qa-intro .parish-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

}


.qa-intro .parish-intro__title {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(2.4rem, 5vw, 4.2rem);

    line-height: 1.1;

    font-weight: 600;

    letter-spacing: 0.02em;

}


.qa-intro .parish-intro__reflection {

    max-width: 760px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.92);

    font-size: 1.1rem;

    line-height: 1.8;

}


/* ================================================================
   PARISH ASSISTANT MAIN AREA
================================================================ */

.qa-assistant {

    padding: 90px 20px;

    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #f8f0d8 55%,
            #efe0b3 100%
        );

}


/* ================================================================
   ASSISTANT HEADER
================================================================ */

.qa-assistant__header {

    display: flex;

    align-items: center;

    gap: 25px;

    max-width: 850px;

    margin: 0 auto 45px;

}


.qa-assistant__icon {

    flex: 0 0 76px;

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #0b2948;

    color: #d4af5a;

    font-size: 1.9rem;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.14);

}


.qa-assistant__welcome {

    flex: 1;

}


.qa-assistant__welcome .parish-eyebrow {

    margin-bottom: 8px;

}


.qa-assistant__welcome h2 {

    margin: 0 0 10px;

    color: #0b2948;

    font-size: clamp(1.8rem, 4vw, 2.6rem);

    line-height: 1.2;

}


.qa-assistant__welcome p {

    margin: 0;

    max-width: 720px;

    color: #5b5b5b;

    font-size: 1rem;

    line-height: 1.75;

}


/* ================================================================
   SEARCH AREA
================================================================ */

.qa-search {

    max-width: 850px;

    margin: 0 auto 45px;

}


.qa-search__label {

    display: block;

    margin-bottom: 10px;

    color: #0b2948;

    font-size: 0.95rem;

    font-weight: 600;

}


.qa-search__box {

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(183, 145, 62, 0.35);

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.qa-search__box:focus-within {

    border-color: #b7913e;

    box-shadow:
        0 0 0 4px rgba(183, 145, 62, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.08);

}


.qa-search__icon {

    flex: 0 0 auto;

    padding-left: 18px;

    color: #b7913e;

    font-size: 1.15rem;

}


.qa-search__input {

    flex: 1;

    min-width: 0;

    padding: 18px 15px;

    border: 0;

    outline: none;

    background: transparent;

    color: #333333;

    font-family: inherit;

    font-size: 1rem;

}


.qa-search__input::placeholder {

    color: #999999;

}


.qa-search__button {

    flex: 0 0 auto;

    margin: 6px;

    padding: 12px 22px;

    border: 1px solid #b7913e;

    border-radius: 7px;

    background: #0b2948;

    color: #ffffff;

    font-family: inherit;

    font-size: 0.92rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.qa-search__button:hover {

    background: #b7913e;

    transform: translateY(-1px);

}


.qa-search__clear {

    display: block;

    margin: 10px auto 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: #0b2948;

    font-family: inherit;

    font-size: 0.85rem;

    cursor: pointer;

}


.qa-search__clear:hover {

    color: #b7913e;

}


/* ================================================================
   CONVERSATION AREA
================================================================ */

.qa-conversation {

    max-width: 850px;

    margin: 0 auto 60px;

    padding: 30px;

    background:
        rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(183, 145, 62, 0.18);

    border-radius: 16px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.06);

}


.qa-message {

    display: flex;

    gap: 14px;

    margin-bottom: 22px;

}


.qa-message:last-child {

    margin-bottom: 0;

}


.qa-message__avatar {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #0b2948;

    color: #d4af5a;

    font-size: 1rem;

}


.qa-message__bubble {

    max-width: 700px;

    padding: 16px 20px;

    border-radius: 4px 16px 16px 16px;

    background: #ffffff;

    border: 1px solid rgba(183, 145, 62, 0.16);

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.05);

}


.qa-message__bubble p {

    margin: 0;

    color: #4f4f4f;

    font-size: 0.98rem;

    line-height: 1.75;

}


/* ================================================================
   USER MESSAGE
================================================================ */

.qa-message--user {

    justify-content: flex-end;

}


.qa-message--user .qa-message__avatar {

    order: 2;

    background: #b7913e;

    color: #ffffff;

}


.qa-message--user .qa-message__bubble {

    order: 1;

    border-radius: 16px 4px 16px 16px;

    background: #0b2948;

    border-color: #0b2948;

}


.qa-message--user .qa-message__bubble p {

    color: #ffffff;

}


/* ================================================================
   TOPICS
================================================================ */

.qa-topics {

    max-width: 1050px;

    margin: 0 auto 70px;

}


.qa-topics .parish-section-heading {

    margin-bottom: 40px;

    text-align: center;

}


.qa-topics__grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

}


.qa-topic-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-height: 210px;

    padding: 28px 25px;

    border: 1px solid rgba(183, 145, 62, 0.22);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffaf0 100%
        );

    text-align: left;

    font-family: inherit;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.qa-topic-card:hover {

    transform: translateY(-6px);

    border-color: rgba(183, 145, 62, 0.5);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.10);

}


.qa-topic-card__icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background: #0b2948;

    color: #d4af5a;

    font-size: 1.35rem;

}


.qa-topic-card__title {

    margin-bottom: 10px;

    color: #0b2948;

    font-size: 1.25rem;

    font-weight: 600;

}


.qa-topic-card__description {

    color: #666666;

    font-size: 0.92rem;

    line-height: 1.65;

}


.qa-topic-card__arrow {

    margin-top: auto;

    padding-top: 18px;

    color: #b7913e;

    font-size: 1.2rem;

    transition:
        transform 0.25s ease;

}


.qa-topic-card:hover .qa-topic-card__arrow {

    transform: translateX(5px);

}


/* ================================================================
   QUESTION AREA
================================================================ */

.qa-question-area {

    max-width: 850px;

    margin: 0 auto 70px;

}


.qa-question-area__header {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}


.qa-question-area__header h2 {

    margin: 0;

    color: #0b2948;

    font-size: 1.8rem;

}


.qa-back-button {

    flex: 0 0 auto;

    padding: 9px 14px;

    border: 1px solid rgba(183, 145, 62, 0.35);

    border-radius: 6px;

    background: #ffffff;

    color: #0b2948;

    font-family: inherit;

    font-size: 0.85rem;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;

}


.qa-back-button:hover {

    background: #0b2948;

    color: #ffffff;

}


/* ================================================================
   QUESTION CARDS
================================================================ */

.qa-question-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.qa-question-card {

    overflow: hidden;

    border: 1px solid rgba(183, 145, 62, 0.20);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.05);

}


.qa-question-card__question {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    width: 100%;

    padding: 20px 22px;

    border: 0;

    background: transparent;

    color: #0b2948;

    font-family: inherit;

    font-size: 1rem;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

}


.qa-question-card__question:hover {

    background: #fffaf0;

}


.qa-question-card__arrow {

    flex: 0 0 auto;

    color: #b7913e;

    font-size: 1.1rem;

    transition:
        transform 0.25s ease;

}


.qa-question-card.is-open
.qa-question-card__arrow {

    transform: rotate(90deg);

}


.qa-question-card__answer {

    padding: 0 22px 22px;

}


.qa-question-card__answer p {

    margin: 0 0 18px;

    color: #5b5b5b;

    font-size: 0.96rem;

    line-height: 1.8;

}


.qa-question-card__link {

    color: #0b2948;

    font-size: 0.9rem;

    font-weight: 600;

    text-decoration: none;

}


.qa-question-card__link:hover {

    color: #b7913e;

}


/* ================================================================
   SEARCH RESULT STATE
================================================================ */

.qa-search-result {

    margin-bottom: 25px;

}


.qa-search-result__title {

    margin: 0 0 20px;

    color: #0b2948;

    font-size: 1.25rem;

}


.qa-search-result__empty {

    padding: 28px;

    border: 1px solid rgba(183, 145, 62, 0.22);

    border-radius: 12px;

    background: #ffffff;

    text-align: center;

}


.qa-search-result__empty p {

    margin: 0 0 20px;

    color: #5b5b5b;

    line-height: 1.7;

}


/* ================================================================
   ASK OUR PARISH
================================================================ */

.qa-contact {

    max-width: 850px;

    margin: 0 auto;

    padding: 55px 45px;

    border-radius: 16px;

    background:
        linear-gradient(
            rgba(11, 41, 72, 0.98),
            rgba(7, 27, 52, 0.98)
        );

    text-align: center;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.12);

}


.qa-contact__cross {

    margin-bottom: 18px;

    color: #d4af5a;

    font-size: 2.2rem;

}


.qa-contact h2 {

    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(1.7rem, 4vw, 2.4rem);

}


.qa-contact p {

    max-width: 650px;

    margin: 0 auto 28px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1rem;

    line-height: 1.8;

}


.qa-contact__actions {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

}


.qa-contact__actions .parish-button {

    min-width: 155px;

}


/* ================================================================
   SECONDARY BUTTON
================================================================ */

.parish-button--secondary {

    background: transparent;

    color: #ffffff;

}


.parish-button--secondary:hover {

    background: #b7913e;

    color: #ffffff;

}


/* ================================================================
   ASK OUR PARISH FORM
================================================================ */

.qa-question-form {

    max-width: 850px;

    margin: 50px auto 0;

    padding: 42px;

    border: 1px solid rgba(183, 145, 62, 0.20);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #f8efd7 100%
        );

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.07);

}


.qa-question-form h2 {

    margin: 0 0 12px;

    color: #0b2948;

    font-size: 2rem;

}


.qa-question-form > p {

    margin: 0 0 30px;

    color: #666666;

    line-height: 1.75;

}


.qa-question-form__group {

    margin-bottom: 22px;

}


.qa-question-form__label {

    display: block;

    margin-bottom: 8px;

    color: #0b2948;

    font-size: 0.92rem;

    font-weight: 600;

}


.qa-question-form__label span {

    color: #b7913e;

}


.qa-question-form__input,
.qa-question-form__textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #d8d4ca;

    border-radius: 6px;

    background: #ffffff;

    color: #333333;

    font-family: inherit;

    font-size: 0.98rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.qa-question-form__textarea {

    min-height: 170px;

    resize: vertical;

    line-height: 1.65;

}


.qa-question-form__input:focus,
.qa-question-form__textarea:focus {

    border-color: #b7913e;

    box-shadow:
        0 0 0 3px rgba(183, 145, 62, 0.12);

}


/* ================================================================
   ASK QUESTION CLOSING
================================================================ */

.qa-closing {

    padding: 80px 20px;

    background:
        linear-gradient(
            rgba(11, 41, 72, 0.97),
            rgba(7, 27, 52, 0.97)
        );

    color: #ffffff;

    text-align: center;

}


/* ================================================================
   ASK QUESTION MOBILE
================================================================ */

@media (max-width: 900px) {


    .qa-topics__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .qa-assistant__header {

        max-width: 700px;

    }


}


@media (max-width: 600px) {


    .qa-intro {

        min-height: 360px;

        padding: 70px 18px;

    }


    .qa-intro .parish-intro__title {

        font-size: 2.35rem;

    }


    .qa-intro .parish-intro__reflection {

        font-size: 1rem;

        line-height: 1.7;

    }


    .qa-assistant {

        padding: 65px 16px;

    }


    .qa-assistant__header {

        align-items: flex-start;

        gap: 16px;

        margin-bottom: 35px;

    }


    .qa-assistant__icon {

        flex-basis: 58px;

        width: 58px;

        height: 58px;

        font-size: 1.45rem;

    }


    .qa-assistant__welcome h2 {

        font-size: 1.75rem;

    }


    .qa-search__box {

        flex-wrap: wrap;

        padding: 8px;

    }


    .qa-search__icon {

        padding-left: 8px;

    }


    .qa-search__input {

        padding: 13px 10px;

    }


    .qa-search__button {

        width: 100%;

        margin: 5px 0 0;

    }


    .qa-conversation {

        padding: 20px;

        margin-bottom: 45px;

    }


    .qa-message__bubble {

        max-width: calc(100vw - 105px);

    }


    .qa-topics__grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .qa-topic-card {

        min-height: auto;

        padding: 24px 22px;

    }


    .qa-question-area__header {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .qa-question-area__header h2 {

        font-size: 1.55rem;

    }


    .qa-question-card__question {

        padding: 18px;

        font-size: 0.95rem;

    }


    .qa-question-card__answer {

        padding: 0 18px 20px;

    }


    .qa-contact {

        padding: 42px 22px;

    }


    .qa-contact__actions {

        flex-direction: column;

    }


    .qa-contact__actions .parish-button {

        width: 100%;

    }


    .qa-question-form {

        padding: 28px 20px;

    }


    .qa-question-form h2 {

        font-size: 1.7rem;

    }


    .qa-closing {

        padding: 65px 18px;

    }

}


/* ================================================================
   MASS SCHEDULE PAGE
   Emmaus Framework
================================================================ */


/* ================================================================
   HERO / INTRODUCTION
================================================================ */

.mass-schedule-intro {

    width: 100%;

    min-height: 800px;

    padding: 90px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-image:
        url("../images/mass-schedule.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

}


/* ---------------------------------------------------------------
   Hero Content
---------------------------------------------------------------- */

.mass-schedule-intro__content {

    width: 100%;

    max-width: 850px;

    color:#ffffff;

    margin: 0 auto;

    padding: 40px;

    background: rgba(0, 0, 0, 0.30);

    border-radius: var(--border-radius);

}


/* ---------------------------------------------------------------
   Hero Eyebrow
---------------------------------------------------------------- */

.mass-schedule-intro .parish-eyebrow {

    display: block;

    margin-bottom: 15px;

}


/* ---------------------------------------------------------------
   Hero Title
---------------------------------------------------------------- */

.mass-schedule-intro .parish-intro__title {

    margin: 0 0 20px;

}


/* ---------------------------------------------------------------
   Hero Reflection
---------------------------------------------------------------- */

.mass-schedule-intro .parish-intro__reflection {

    max-width: 750px;

    margin: 0 auto;

    line-height: 1.8;

}


/* ================================================================
   CURRENT MASS SCHEDULE SECTION
================================================================ */

.mass-schedule-section {

    width: 100%;

    padding: 75px 20px 85px;

    background: var(--background-color);

}


/* ---------------------------------------------------------------
   Section Container
---------------------------------------------------------------- */

.mass-schedule-section .parish-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

}


/* ---------------------------------------------------------------
   Section Heading
---------------------------------------------------------------- */

.mass-schedule-section .parish-section-heading {

    max-width: 850px;

    margin: 0 auto 40px;

    text-align: center;

}


/* ================================================================
   PDF VIEWER AREA
================================================================ */

.mass-schedule__viewer {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

}


/* ================================================================
   PREPARING FOR MASS
================================================================ */

.mass-schedule-information {

    width: 100%;

    padding: 75px 20px 85px;

    background: var(--surface-color);

}


/* ---------------------------------------------------------------
   Information Heading
---------------------------------------------------------------- */

.mass-schedule-information .parish-section-heading {

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;

}


/* ================================================================
   INFORMATION CARDS
================================================================ */

.mass-schedule-information__grid {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

}


/* ---------------------------------------------------------------
   Individual Card
---------------------------------------------------------------- */

.mass-schedule-information__card {

    padding: 35px 30px;

    text-align: center;

    background: var(--background-color);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

}


/* ---------------------------------------------------------------
   Card Icon
---------------------------------------------------------------- */

.mass-schedule-information__icon {

    margin-bottom: 20px;

    font-size: 2rem;

}


/* ---------------------------------------------------------------
   Card Heading
---------------------------------------------------------------- */

.mass-schedule-information__card h3 {

    margin: 10px 0 15px;

}


/* ---------------------------------------------------------------
   Card Text
---------------------------------------------------------------- */

.mass-schedule-information__card p {

    margin: 0;

    line-height: 1.8;

}


/* ================================================================
   CLOSING
================================================================ */

.mass-schedule-closing {

    width: 100%;

    padding: 80px 20px;

}


/* ---------------------------------------------------------------
   Closing Content
---------------------------------------------------------------- */

.mass-schedule-closing .parish-closing__content {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}


/* ---------------------------------------------------------------
   Closing Cross
---------------------------------------------------------------- */

.mass-schedule-closing .parish-closing__cross {

    margin-bottom: 20px;

    font-size: 2rem;

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 900px) {

    .mass-schedule-information__grid {

        grid-template-columns: 1fr;

        max-width: 600px;

    }

}


@media (max-width: 768px) {

    .mass-schedule-intro {

        min-height: 600px;

        padding: 60px 15px;

    }


    .mass-schedule-intro__content {

        padding: 30px 20px;

    }


    .mass-schedule-section {

        padding: 55px 15px 65px;

    }


    .mass-schedule-information {

        padding: 55px 15px 65px;

    }


    .mass-schedule-information__grid {

        gap: 20px;

    }


    .mass-schedule-information__card {

        padding: 30px 20px;

    }


    .mass-schedule-closing {

        padding: 60px 20px;

    }

}


/* ================================================================
   MONTHLY BULLETIN PAGE
   Emmaus Framework
================================================================ */


/* ================================================================
   HERO / INTRODUCTION
================================================================ */

.bulletin-intro {

    width: 100%;

    min-height: 1050px;

    padding: 90px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-image:
        url("../images/bulletin.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

}


.annual-schedule-intro {

    width: 100%;

    min-height: 1050px;

    padding: 90px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-image:
        url("../images/annual-event.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

}


/* ---------------------------------------------------------------
   Hero Content
---------------------------------------------------------------- */

.bulletin-intro__content {

    width: 100%;

    max-width: 850px;

    color:#ffffff;

    margin: 0 auto;

    padding: 40px;

    background: rgba(0, 0, 0, 0.30);

    border-radius: var(--border-radius);

}


/* ---------------------------------------------------------------
   Hero Eyebrow
---------------------------------------------------------------- */

.bulletin-intro .parish-eyebrow {

    display: block;

    margin-bottom: 15px;

}


/* ---------------------------------------------------------------
   Hero Title
---------------------------------------------------------------- */

.bulletin-intro .parish-intro__title {

    margin: 0 0 20px;

}


/* ---------------------------------------------------------------
   Hero Reflection
---------------------------------------------------------------- */

.bulletin-intro .parish-intro__reflection {

    max-width: 750px;

    margin: 0 auto;

    line-height: 1.8;

}


/* ================================================================
   CURRENT MONTHLY BULLETIN SECTION
================================================================ */

.bulletin-section {

    width: 100%;

    padding: 75px 20px 85px;

    background: var(--background-color);

}


/* ---------------------------------------------------------------
   Section Container
---------------------------------------------------------------- */

.bulletin-section .parish-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

}


/* ---------------------------------------------------------------
   Section Heading
---------------------------------------------------------------- */

.bulletin-section .parish-section-heading {

    max-width: 850px;

    margin: 0 auto 40px;

    text-align: center;

}


/* ================================================================
   PDF VIEWER AREA
================================================================ */

.bulletin__viewer {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

}


/* ================================================================
   PREPARING FOR MASS
================================================================ */

.bulletin-information {

    width: 100%;

    padding: 75px 20px 85px;

    background: var(--surface-color);

}


/* ---------------------------------------------------------------
   Information Heading
---------------------------------------------------------------- */

.bulletin-information .parish-section-heading {

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;

}


/* ================================================================
   INFORMATION CARDS
================================================================ */

.bulletin-information__grid {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

}


/* ---------------------------------------------------------------
   Individual Card
---------------------------------------------------------------- */

.bulletin-information__card {

    padding: 35px 30px;

    text-align: center;

    background: var(--background-color);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

}


/* ---------------------------------------------------------------
   Card Icon
---------------------------------------------------------------- */

.bulletin-information__icon {

    margin-bottom: 20px;

    font-size: 2rem;

}


/* ---------------------------------------------------------------
   Card Heading
---------------------------------------------------------------- */

.bulletin-information__card h3 {

    margin: 10px 0 15px;

}


/* ---------------------------------------------------------------
   Card Text
---------------------------------------------------------------- */

.bulletin-information__card p {

    margin: 0;

    line-height: 1.8;

}


/* ================================================================
   CLOSING
================================================================ */

.bulletin-closing {

    width: 100%;

    padding: 80px 20px;

}


/* ---------------------------------------------------------------
   Closing Content
---------------------------------------------------------------- */

.bulletin-closing .parish-closing__content {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}


/* ---------------------------------------------------------------
   Closing Cross
---------------------------------------------------------------- */

.bulletin-closing .parish-closing__cross {

    margin-bottom: 20px;

    font-size: 2rem;

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 900px) {

    .bulletin-information__grid {

        grid-template-columns: 1fr;

        max-width: 600px;

    }

}


@media (max-width: 768px) {

    .bulletin-intro {

        min-height: 600px;

        padding: 60px 15px;

    }
 
    .annual-schedule-intro {

        min-height: 600px;

        padding: 60px 15px;

    }


    .bulletin-intro__content {

        padding: 30px 20px;

    }


    .bulletin-section {

        padding: 55px 15px 65px;

    }


    .bulletin-information {

        padding: 55px 15px 65px;

    }


    .bulletin-information__grid {

        gap: 20px;

    }


    .bulletin-information__card {

        padding: 30px 20px;

    }


    .bulletin-closing {

        padding: 60px 20px;

    }

}


/* ================================================================
   PRIEST MESSAGE PAGE
================================================================ */

.priest-message-page {
    background: var(--background-color);
}


/* ================================================================
   PRIEST MESSAGE HERO
================================================================ */

.priest-message-hero {

    position: relative;

    min-height: 620px;

    background:
        linear-gradient(
            90deg,
            rgba(10, 30, 60, 0.92),
            rgba(10, 30, 60, 0.55),
            rgba(10, 30, 60, 0.20)
        );

    display: flex;

    align-items: stretch;

    overflow: hidden;
}


.priest-message-hero__content {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 70px 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}


.priest-message-hero__text {

    flex: 1;

    max-width: 650px;

    color: white;

    text-align: left;
}


.priest-message-hero__text h1 {

    margin: 15px 0 20px;

    font-size: clamp(
        2.5rem,
        5vw,
        4.5rem
    );

    line-height: 1.1;
}


.priest-message-hero__text p {

    margin: 0;

    max-width: 600px;

    font-size: 1.25rem;

    line-height: 1.8;

}


/* ================================================================
   PRIEST IMAGE
================================================================ */

.priest-message-hero__image {

    flex: 0 0 420px;

    display: flex;

    justify-content: center;

    align-items: center;
}


.priest-message-hero__image img {

    width: 100%;

    max-width: 420px;

    height: 480px;

    object-fit: cover;

    object-position: center;

    border-radius: 12px;

    box-shadow: var(--shadow);

    border: 4px solid rgba(255, 255, 255, 0.75);
}


/* ================================================================
   MESSAGE SECTION
================================================================ */

.priest-message-section {

    padding-top: 80px;

    padding-bottom: 80px;

    background:
        var(--background-color);
}


.priest-message-section .parish-container {

    max-width: 1050px;

    margin: 0 auto;

}


/* ================================================================
   MESSAGE CARD
================================================================ */

.priest-message-card {

    background:
        var(--surface-color);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--border-radius);

    box-shadow:
        var(--shadow);

    overflow: hidden;
}


/* ================================================================
   MESSAGE HEADER
================================================================ */

.priest-message-card__header {

    text-align: center;

    padding: 50px 40px 35px;

    background:
        var(--primary-color);

    color: white;
}


.priest-message-card__header h2 {

    margin: 12px 0 12px;

    font-size: 2rem;
}


.priest-message-card__date {

    display: block;

    margin-top: 12px;

    opacity: 0.85;

    font-size: 0.95rem;
}


/* ================================================================
   MESSAGE BODY
================================================================ */

.priest-message-card__body {

    padding: 60px 80px;

    background:
        var(--surface-color);
}


.priest-message-card__body p {

    margin: 0 0 1.6rem;

    font-size: 1.12rem;

    line-height: 2;

    color: var(--text-color);

}


.priest-message-card__body p:last-child {

    margin-bottom: 0;

}


/* ================================================================
   EMPTY MESSAGE
================================================================ */

.priest-message-card__empty {

    padding: 50px 20px;

    text-align: center;

    color: var(--text-color);
}

/* ================================================================
   PRIEST MESSAGE CLOSING
================================================================ */

.priest-message-closing {

    padding: 80px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            #172f55,
            var(--primary-color)
        );

    color: white;

}


.priest-message-closing .parish-container {

    max-width: 900px;

    margin: 0 auto;

}


.priest-message-closing .parish-closing__content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


/* ================================================================
   GOLDEN CROSS
================================================================ */

.priest-message-closing .parish-closing__cross {

    margin-bottom: 25px;

    font-size: 4.5rem;

    line-height: 1;

    font-weight: 400;

    background:
        linear-gradient(
            180deg,
            #fff4b0 0%,
            #e8c45a 35%,
            #c9952e 70%,
            #ffe89a 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(
            0 3px 8px
            rgba(0, 0, 0, 0.35)
        );

}


/* ================================================================
   CLOSING TITLE
================================================================ */

.priest-message-closing h2 {

    margin: 0 0 18px;

    font-size: 2.2rem;

    color: white;

}


.priest-message-closing p {

    max-width: 700px;

    margin: 0 auto;

    font-size: 1.1rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.9);

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 600px) {

    .priest-message-closing {

        padding: 60px 20px;

    }


    .priest-message-closing .parish-closing__cross {

        font-size: 3.8rem;

    }


    .priest-message-closing h2 {

        font-size: 1.8rem;

    }

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 900px) {

    .priest-message-hero__content {

        flex-direction: column;

        text-align: center;

        padding:
            60px 25px;

    }


    .priest-message-hero__text {

        text-align: center;

    }


    .priest-message-hero__text p {

        margin-left: auto;

        margin-right: auto;

    }


    .priest-message-hero__image {

        flex: none;

        width: 100%;

    }


    .priest-message-hero__image img {

        height: 420px;

        max-width: 360px;

    }


    .priest-message-card__body {

        padding:
            40px 30px;

    }

}


@media (max-width: 600px) {

    .priest-message-hero {

        min-height: auto;

    }


    .priest-message-hero__content {

        padding:
            45px 20px;

        gap: 35px;

    }


    .priest-message-hero__text h1 {

        font-size: 2.5rem;

    }


    .priest-message-hero__text p {

        font-size: 1.05rem;

    }


    .priest-message-hero__image img {

        height: 360px;

        max-width: 300px;

    }


    .priest-message-card__header {

        padding:
            40px 20px 30px;

    }


    .priest-message-card__header h2 {

        font-size: 1.6rem;

    }


    .priest-message-card__body {

        padding:
            35px 22px;

    }


    .priest-message-card__body p {

        font-size: 1.05rem;

        line-height: 1.9;

    }

}


/* ================================================================
   PARISH NEWS
   Image-Based News Cards
================================================================ */


/* ================================================================
   PARISH NEWS PAGE
================================================================ */

.parish-news-page {
    background:
        linear-gradient(
            180deg,
            #f8f5ed 0%,
            #ffffff 45%,
            #f5f1e7 100%
        );
}


/* ================================================================
   PARISH NEWS INTRODUCTION
================================================================ */

.parish-news-intro {
    text-align: center;

    padding: 75px 20px 65px;

    background:
        linear-gradient(
            135deg,
            #071b3a 0%,
            #102f5c 55%,
            #071b3a 100%
        );

    color: #ffffff;

    position: relative;

    overflow: hidden;
}


/*
 * Subtle golden glow.
 */

.parish-news-intro::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -120px;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.20),
            transparent 70%
        );

    pointer-events: none;

}


.parish-news-intro__content {
    max-width: 900px;

    margin: 0 auto;

    position: relative;

    z-index: 1;
}


/* ================================================================
   EYEBROW
================================================================ */

.parish-news-intro .parish-eyebrow {

    color: #d8b65a;

    letter-spacing: 0.18em;

}


/* ================================================================
   INTRO TITLE
================================================================ */

.parish-news-intro .parish-intro__title {

    margin-top: 12px;

    margin-bottom: 18px;

    color: #f1d98a;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.30);

}


/* ================================================================
   INTRO TEXT
================================================================ */

.parish-news-intro .parish-intro__reflection {

    max-width: 720px;

    margin: 0 auto;

    color: #f5f2ea;

    line-height: 1.85;

}


/* ================================================================
   NEWS SECTION
================================================================ */

.parish-news-section {

    padding-top: 75px;

    padding-bottom: 85px;

}


/* ================================================================
   SECTION HEADING
================================================================ */

.parish-news-section .parish-section-heading {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 50px;

}


.parish-news-section
.parish-section-heading
.parish-eyebrow {

    color: #b38a24;

    letter-spacing: 0.16em;

}


.parish-news-section
.parish-section-heading
h2 {

    color: #102f5c;

    margin-top: 10px;

    margin-bottom: 15px;

}


.parish-news-section
.parish-section-heading
p {

    color: #5e6470;

    line-height: 1.8;

}


/* ================================================================
   NEWS GRID
================================================================ */

.parish-news-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 32px;

    max-width: 1250px;

    margin: 0 auto;

    align-items: start;

}


/* ================================================================
   POST CARD
================================================================ */

.post-card {

    position: relative;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    border:
        1px solid
        rgba(16, 47, 92, 0.10);

    box-shadow:
        0 8px 25px
        rgba(16, 47, 92, 0.10);

    text-align: center;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}


/* ================================================================
   CARD HOVER
================================================================ */

.post-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 18px 40px
        rgba(16, 47, 92, 0.18);

    border-color:
        rgba(179, 138, 36, 0.45);

}


/* ================================================================
   IMAGE AREA
================================================================ */

.post-card__image-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #e9e5db;

}


/*
 * Golden accent line.
 */

.post-card__image-wrapper::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #9c7518,
            #e0bd55,
            #9c7518
        );

}


/* ================================================================
   POST IMAGE
================================================================ */

.post-card__image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.55s ease;

}


/*
 * Gentle image zoom on hover.
 */

.post-card:hover
.post-card__image {

    transform:
        scale(1.045);

}


/* ================================================================
   CARD CONTENT
================================================================ */

.post-card__content {

    padding:
        25px
        24px
        28px;

}


/* ================================================================
   CATEGORY
================================================================ */

.post-card__category {

    display: block;

    margin-bottom: 9px;

    color: #b38a24;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


/* ================================================================
   TITLE
================================================================ */

.post-card__title {

    margin:
        0
        auto
        10px;

    color: #102f5c;

    font-size: 1.35rem;

    line-height: 1.35;

    font-weight: 700;

}


/* ================================================================
   DATE
================================================================ */

.post-card__date {

    display: block;

    margin-bottom: 18px;

    color: #777d87;

    font-size: 0.88rem;

}


/* ================================================================
   READ MORE
================================================================ */

.post-card__action {

    display: inline-block;

    padding:
        8px
        18px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #102f5c,
            #17457f
        );

    color: #f1d98a;

    font-size: 0.86rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.post-card:hover
.post-card__action {

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 14px
        rgba(16, 47, 92, 0.22);

}


/* ================================================================
   EMPTY NEWS MESSAGE
================================================================ */

.parish-news-empty {

    max-width: 700px;

    margin: 0 auto;

    padding: 45px 30px;

    text-align: center;

    background: #ffffff;

    border-radius: 16px;

    border:
        1px solid
        rgba(16, 47, 92, 0.10);

    box-shadow:
        0 8px 25px
        rgba(16, 47, 92, 0.08);

}


/* ================================================================
   CLOSING SECTION
================================================================ */

.parish-news-closing {

    background:
        linear-gradient(
            135deg,
            #071b3a,
            #102f5c,
            #071b3a
        );

    color: #ffffff;

    text-align: center;

    padding:
        70px
        20px
        75px;

}


/* ================================================================
   CLOSING CROSS
================================================================ */

.parish-news-closing
.parish-closing__cross {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 62px;

    height: 62px;

    margin-bottom: 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #9c7518,
            #f1d98a,
            #9c7518
        );

    color: #102f5c;

    font-size: 1.7rem;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.25);

}


.parish-news-closing h2 {

    color: #f1d98a;

    margin-bottom: 15px;

}


.parish-news-closing p {

    max-width: 700px;

    margin: 0 auto;

    color: #f3f0e8;

    line-height: 1.8;

}


/* ================================================================
   TABLET
================================================================ */

@media (max-width: 1000px) {

    .parish-news-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 26px;

    }

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 650px) {

    .parish-news-intro {

        padding:
            60px
            18px
            50px;

    }


    .parish-news-section {

        padding-top: 55px;

        padding-bottom: 65px;

    }


    .parish-news-grid {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .post-card__content {

        padding:
            22px
            20px
            25px;

    }


    .post-card__title {

        font-size: 1.25rem;

    }


    .parish-news-closing {

        padding:
            60px
            20px
            65px;

    }

}


/* ================================================================
   EMMAUS PHOTO GALLERY
================================================================ */


/* ================================================================
   GALLERY PAGE
================================================================ */

.gallery-page {

    background:
        linear-gradient(
            180deg,
            #f8f7f3 0%,
            #ffffff 45%,
            #f4f1e8 100%
        );

}


/* ================================================================
   GALLERY INTRODUCTION
================================================================ */

.gallery-intro {

    text-align: center;

    padding:
        75px 20px
        65px;

    background:
        linear-gradient(
            135deg,
            #071f3d,
            #123c6b
        );

    color: #ffffff;

}


.gallery-intro .parish-intro__content {

    max-width: 900px;

    margin: 0 auto;

}


.gallery-intro .parish-eyebrow {

    color: #e8c96a;

}


.gallery-intro .parish-intro__title {

    margin-bottom: 18px;

    color: #f1d98a;

}


.gallery-intro .parish-intro__reflection {

    max-width: 720px;

    margin:
        0 auto;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    line-height: 1.8;

}


/* ================================================================
   GALLERY SECTION
================================================================ */

.gallery-section {

    padding:
        75px 20px
        85px;

}


.gallery-section
.parish-section-heading {

    max-width: 850px;

    margin:
        0 auto 50px;

    text-align: center;

}


/* ================================================================
   ALBUM GRID
================================================================ */

.gallery-albums {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                260px,
                1fr
            )
        );

    gap: 32px;

    max-width: 1250px;

    margin: 0 auto;

}


/* ================================================================
   ALBUM CARD
================================================================ */

.album-card {

    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgba(
            10,
            35,
            65,
            0.12
        );

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.album-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 18px 42px
        rgba(
            10,
            35,
            65,
            0.22
        );

}


/* ================================================================
   ALBUM LINK
================================================================ */

.album-card__link {

    display: block;

    color: inherit;

    text-decoration: none;

}


/* ================================================================
   ALBUM IMAGE
================================================================ */

.album-card__image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background:
        #102f5c;

}


.album-card__image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(
                0,
                0,
                0,
                0.35
            )
        );

    opacity: 0.55;

    transition:
        opacity 0.35s ease;

}


.album-card:hover
.album-card__image::after {

    opacity: 0.15;

}


.album-card__image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.65s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.album-card:hover
.album-card__image img {

    transform:
        scale(1.08);

}


/* ================================================================
   ALBUM CONTENT
================================================================ */

.album-card__content {

    position: relative;

    padding:
        20px 22px
        22px;

    text-align: center;

    border-top:
        3px solid
        #d6b65b;

}


.album-card__title {

    margin:
        0 0 8px;

    color:
        #102f5c;

    font-size:
        1.25rem;

    font-weight:
        600;

}


.album-card__count {

    display: inline-block;

    color:
        #80651b;

    font-size:
        0.88rem;

    letter-spacing:
        0.04em;

}


/* ================================================================
   ALBUM HOVER GOLD GLOW
================================================================ */

.album-card::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    border:
        1px solid
        transparent;

    border-radius:
        14px;

    pointer-events: none;

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.album-card:hover::before {

    border-color:
        rgba(
            214,
            182,
            91,
            0.65
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.25
        );

}


/* ================================================================
   GALLERY MESSAGE
================================================================ */

.gallery-message {

    grid-column:
        1 / -1;

    padding:
        60px 20px;

    text-align: center;

    color:
        #666;

}


/* ================================================================
   SELECTED ALBUM
================================================================ */

.gallery-album {

    max-width:
        1400px;

    margin:
        75px auto 0;

    padding-top:
        60px;

    border-top:
        1px solid
        rgba(
            16,
            47,
            92,
            0.15
        );

}


/* ================================================================
   ALBUM HEADER
================================================================ */

.gallery-album__header {

    margin-bottom:
        42px;

    text-align:
        center;

}


.gallery-album__header h2 {

    margin:
        10px 0;

    color:
        #102f5c;

}


.gallery-album__header p {

    margin:
        0;

    color:
        #756b58;

}


/* ================================================================
   BACK TO ALBUMS
================================================================ */

.gallery-album__back {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #8b6a19;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.gallery-album__back:hover {

    color:
        #102f5c;

    transform:
        translateX(-4px);

}


/* ================================================================
   PHOTO GRID
================================================================ */

.gallery-photos {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    gap:
        22px;

}


/* ================================================================
   PHOTO CARD
================================================================ */

.photo-card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        10px;

    background:
        #ffffff;

    cursor:
        pointer;

    box-shadow:
        0 7px 22px
        rgba(
            10,
            35,
            65,
            0.12
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.photo-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 14px 32px
        rgba(
            10,
            35,
            65,
            0.22
        );

}


/* ================================================================
   PHOTO IMAGE
================================================================ */

.photo-card__image-wrapper {

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        4 / 3;

}


.photo-card__image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.photo-card:hover
.photo-card__image {

    transform:
        scale(1.07);

}


/* ================================================================
   PHOTO GOLD OVERLAY
================================================================ */

.photo-card__image-wrapper::after {

    content:
        "View";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            7,
            31,
            61,
            0.52
        );

    color:
        #f1d98a;

    font-size:
        1rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    opacity:
        0;

    transition:
        opacity 0.3s ease;

}


.photo-card:hover
.photo-card__image-wrapper::after {

    opacity:
        1;

}


/* ================================================================
   GALLERY CLOSING
================================================================ */

.gallery-closing {

    position:
        relative;

    padding:
        75px 20px
        80px;

    background:
        linear-gradient(
            135deg,
            #071f3d,
            #123c6b
        );

    color:
        #ffffff;

    text-align:
        center;

}


.gallery-closing
.parish-closing__content {

    max-width:
        760px;

    margin:
        0 auto;

}


.gallery-closing
.parish-closing__cross {

    margin-bottom:
        18px;

    font-size:
        2.5rem;

    background:
        linear-gradient(
            135deg,
            #9c7518,
            #f4dc8c,
            #9c7518
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.gallery-closing h2 {

    color:
        #f1d98a;

}


.gallery-closing p {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    line-height:
        1.8;

}


/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 900px) {

    .gallery-photos {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }

}


@media (max-width: 650px) {

    .gallery-intro {

        padding:
            60px 20px
            50px;

    }


    .gallery-section {

        padding:
            55px 16px
            65px;

    }


    .gallery-albums {

        grid-template-columns:
            1fr;

        max-width:
            450px;

    }


    .gallery-photos {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
            12px;

    }


    .gallery-album {

        margin-top:
            55px;

        padding-top:
            45px;

    }

}


@media (max-width: 400px) {

    .gallery-photos {

        gap:
            9px;

    }

}

/* ================================================================
   POST IMAGE VIEWER / MODAL
================================================================ */


/* ================================================================
   EMMAUS IMAGE MODAL
================================================================ */

.post-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(
            4,
            17,
            35,
            0.92
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

}


.post-modal.is-open {

    opacity: 1;

    visibility: visible;

}


/* ================================================================
   MODAL CONTENT
================================================================ */

.post-modal__content {

    position: relative;

    max-width:
        min(
            1400px,
            95vw
        );

    max-height:
        92vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform:
        scale(0.88);

    transition:
        transform 0.4s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.post-modal.is-open
.post-modal__content {

    transform:
        scale(1);

}


/* ================================================================
   MODAL IMAGE
================================================================ */

.post-modal__image {

    display: block;

    max-width:
        92vw;

    max-height:
        82vh;

    width: auto;

    height: auto;

    object-fit:
        contain;

    border-radius:
        8px;

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            0.55
        );

    background:
        #ffffff;

}


/* ================================================================
   CLOSE BUTTON
================================================================ */

.post-modal__close {

    position: absolute;

    top:
        -52px;

    right:
        -10px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            241,
            217,
            138,
            0.7
        );

    border-radius:
        50%;

    background:
        rgba(
            7,
            31,
            61,
            0.85
        );

    color:
        #f1d98a;

    font-size:
        1.7rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;

}


.post-modal__close:hover {

    transform:
        rotate(90deg);

    background:
        #f1d98a;

    color:
        #102f5c;

}


/* ================================================================
   MODAL TITLE
================================================================ */

.post-modal__title {

    margin-top:
        16px;

    color:
        #f1d98a;

    font-size:
        1.05rem;

    font-weight:
        600;

    text-align:
        center;

    letter-spacing:
        0.03em;

}


/* ================================================================
   PREVENT PAGE SCROLLING
================================================================ */

body.post-modal-open {

    overflow:
        hidden;

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 650px) {

    .post-modal {

        padding:
            18px;

    }


    .post-modal__image {

        max-width:
            96vw;

        max-height:
            80vh;

        border-radius:
            5px;

    }


    .post-modal__close {

        top:
            -48px;

        right:
            0;

        width:
            38px;

        height:
            38px;

    }


    .post-modal__title {

        font-size:
            0.95rem;

    }

}


/* ================================================================
   ANNOUNCEMENTS GRID
================================================================ */

.announcements-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                280px,
                1fr
            )
        );

    gap: 28px;

    width: 100%;

    max-width: 1200px;

    margin:
        0 auto;

}


/* ================================================================
   ANNOUNCEMENT CARD
================================================================ */

.announcements-grid .post-card {

    position: relative;

    border-top:
        3px solid
        #d6b65c;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* ================================================================
   HOVER
================================================================ */

.announcements-grid .post-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(
            0,
            0,
            0,
            0.22
        );

}


/* ================================================================
   ANNOUNCEMENT CATEGORY
================================================================ */

.announcements-grid
.post-card__category {

    color:
        #d6b65c;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* ================================================================
   ANNOUNCEMENT TITLE
================================================================ */

.announcements-grid
.post-card__title {

    color:
        #102f5c;

}


/* ================================================================
   ANNOUNCEMENT ACTION
================================================================ */

.announcements-grid
.post-card__action {

    color:
        #102f5c;

    border-color:
        #d6b65c;

}


.announcements-grid
.post-card__action:hover {

    background:
        #d6b65c;

    color:
        #102f5c;

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 700px) {

    .announcements-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }

}


/* ================================================================
   ANNOUNCEMENT SEE MORE
================================================================ */

.announcements-grid .post-card__action {

    color: #d6b65c;

    font-weight: 600;

}


.announcements-grid .post-card__action:hover {

    color: #b9963f;

}


/* Emmaus Compact desktop canvas 
_________________________________
_________________________________
*/

@media (min-width: 1025px) {

 
    /* Higher Desktop Resolution Canvas for home page */

    body.hp-page .hp-mobile-composition .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.hp-page .hp-mobile-composition .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.hp-page .hp-mobile-composition .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }
   
}


 /* Medium Desktop Resolution canvas
  ___________________________________________
  ___________________________________________
*/

@media (min-width: 1025px) and (max-width: 1379px) {

    /* Overall */
    body {
        overflow-x: auto;
    }

     /* Medium Desktop Resolution canvas for home page */

    .home-page {
        width: 1380px;
        min-width: 1380px;        
    }

     
}


/* Emmaus Compact desktop canvas 2 
_________________________________
_________________________________
*/

@media (min-width: 1025px) {

    /* Higher Desktop Resolution Canvas for about page */

    body.about-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.about-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.about-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

    /* Higher Desktop Resolution Canvas for sacrament pages */

    body.sacrament-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.sacrament-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.sacrament-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

     /* Higher Desktop Resolution Canvas for mass-schedule page */

    body.mass-schedule-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.mass-schedule-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.mass-schedule-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

}

      /* Medium Desktop Resolution canvas 2
  ___________________________________________
  ___________________________________________
*/

@media (min-width: 1025px) and (max-width: 1379px) {

    /* Overall */
    body {
        overflow-x: auto;
    }

    
     /* Medium Desktop Resolution canvas for about page */

    .about-page {
        width: 1380px;
        min-width: 1380px;        
    }
     
     /* Medium Desktop Resolution canvas for sacrament pages */

     .sacrament-page {
        width: 1380px;
        min-width: 1380px;        
    }

      /* Medium Desktop Resolution canvas for mass-schedule page */

     .mass-schedule-page {
        width: 1380px;
        min-width: 1380px;        
    }

}


/* Emmaus Compact desktop canvas 3
_________________________________
_________________________________
*/

@media (min-width: 1025px) {

    /* Higher Desktop Resolution Canvas for priest-message page */

    body.priest-message-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.priest-message-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.priest-message-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

     /* Higher Desktop Resolution Canvas for gallery page */

    body.gallery-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.gallery-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.gallery-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

   /* Higher Desktop Resolution Canvas for bulletin page */

    body.bulletin-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.bulletin-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.bulletin-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }  

      /* Higher Desktop Resolution Canvas for annual-schedule page*/

    body.annual-schedule-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.annual-schedule-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.annual-schedule-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

}


      /* Medium Desktop Resolution canvas 3
  ___________________________________________
  ___________________________________________
*/

@media (min-width: 1025px) and (max-width: 1379px) {

    /* Overall */
    body {
        overflow-x: auto;
    }

    
     /* Medium Desktop Resolution canvas for annual schedule page */

    .annual-schedule-page {
        width: 1380px;
        min-width: 1380px;        
    }
     
     /* Medium Desktop Resolution canvas for bulletin page */

     .bulletin-page {
        width: 1380px;
        min-width: 1380px;        
    }

      /* Medium Desktop Resolution canvas for gallery page */

    .gallery-page {
        width: 1380px;
        min-width: 1380px;        
    }

      /* Medium Desktop Resolution canvas for priest message page */

    .priest-message-page {
        width: 1380px;
        min-width: 1380px;        
    }

}


/* Emmaus Compact desktop canvas 4
_________________________________
_________________________________
*/

@media (min-width: 1025px) {

    /* Higher Desktop Resolution Canvas for parish-news page */

    body.parish-news-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.parish-news-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.parish-news-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }


    /* Higher Desktop Resolution Canvas for contact page */

    body.contact-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.contact-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.contact-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }


    /* Higher Desktop Resolution Canvas for ask-question page*/

    body.ask-question-page .header-logo {
        flex: 0 0 180px;
        min-width: 180px;
    }

    body.ask-question-page .header-identity {
        flex: 0 0 450px;
        min-width: 450px;
    }

    body.ask-question-page .main-navigation {
        flex: 1 1 750px;
        min-width: 0;
    }

}


      /* Medium Desktop Resolution canvas 4
      ___________________________________________
      ___________________________________________
      */

@media (min-width: 1025px) and (max-width: 1379px) {

    /* Overall */
    body {
        overflow-x: auto;
    }

    
     /* Medium Desktop Resolution canvas for parish news 
        and announcements pages */

     .parish-news-page {
        width: 1380px;
        min-width: 1380px;        
    }
 
    /* Medium Desktop Resolution canvas for contact page */
   .contact-page {
        width: 1380px;
        min-width: 1380px;        
    }
     
    /* Medium Desktop Resolution canvas for ask-question page */

    .ask-question-page {
        width: 1380px;
        min-width: 1380px;        
    }

}


/* =========================================================
   TEMPORARY RESPONSIVE TEST
   ========================================================= */
     
/*    body:not(.hp-page) {
        background: blue !important;
    }


    body.hp-page {
        background: red !important;
    }

    .hp-mobile-composition {
        width: 300px !important;
        background: red !important;
    }

*/

/* =========================================================
   EMMAUS COMPONENT: HOME MAIL SERVICE BUTTON
   Purpose: Link to Xserver mail administration
   ========================================================= */

.home-mail-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 10px;
    margin-bottom: 0;

    width: 100%;
    box-sizing: border-box;
}

.home-mail-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 10px 24px;

    background-color: #003366;
    color: #F2D675;

    border: 2px solid #D4AF37;
    border-radius: 6px;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.home-mail-button:hover {
    background-color: #00509E;
    color: #FFFFFF;
    border-color: #F2D675;
}

.home-mail-button:focus-visible {
    outline: 3px solid #D4AF37;
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .home-mail-button {
        max-width: calc(100% - 32px);
        padding: 9px 18px;
        font-size: 14px;
    }
}