:root
{
    --global-background:                     #f0f0f0;
    --global-color:                          #023;
    /*--global-link-color:                   #363;*/
    --global-link-color:                     maroon;

    /*--header-background-color:             #ddd;*/
    --header-background-color:               maroon;

    --header-advertisement-background-color: var(--header-background-color);
    /*--header-advertisement-color:            #ffd700;*/
    --header-advertisement-color:            #feb;

    --header-navbar-background-color:        #fff;
    --header-navbar-link-color:              var(--global-link-color);
    --header-navbar-active-link-color:       var(--global-link-color);
    --header-navbar-hover-link-color:        var(--global-link-color);
    --header-navbar-dropdown-border-color:   var(--global-link-color);
    /*--header-navbar-dropdown-hover-color:    #e0f9e0;*/
    --header-navbar-dropdown-hover-color:    #ffffdd;

    --section-background-color:              #fff;
    /*--breadcrumb-background:                 linear-gradient(to bottom, #ed7 10%, #fd0 60%, #fd5 90%);*/
    --breadcrumb-background:                 linear-gradient(to bottom, #dc8 10%, #feb 60%, #dc9 90%);

    --footer-background-color:               var(--header-background-color);
    /*--footer-color:                          #999;*/
    --footer-color:                          #f0f0f0;
    --footer-link-color:                     #fd8;

    --size-sm:                               568px;
    --size-md:                               768px;
    --size-l:                                1024px;
    --size-xl:                               1280px;
    --size-xxl:                              1920px;
    --size-3xl:                              2560px;
    --size-4xl:                              3840px;
}

@font-face
{
    font-family: Bitter;
    src:         url(/themes/reasonableWedding/font/Bitter-VariableFont_wght.ttf);
}

@font-face
{
    font-family: OpenSans;
    src:         url(/themes/reasonableWedding/font/OpenSans-VariableFont_wdth,wght.ttf);
}

html, body
{
    display:     block;
    color:       var(--global-color);
    background:  var(--global-background);
    width:       100%;
    height:      100%;
    margin:      0;
    font-family: Bitter, serif;
}

/*@media screen and (max-width: 568px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: 320px;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 568px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        !*max-width: calc(568px - 2em);*!*/
/*        max-width: 568px;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 768px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: calc(768px - 2em);*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1024px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: calc(1024px - 2em);*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1280px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: calc(1280px - 2em);*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1920px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: calc(1920px - 2em);*/
/*    }*/
/*}*/

/*@media screen and (min-width: 2560px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: calc(2560px - 2em);*/
/*    }*/
/*}*/

/*@media screen and (min-width: 3840px)*/
/*{*/
/*    #logo img*/
/*    {*/
/*        max-width: calc(3840px - 2em);*/
/*    }*/
/*}*/

@media (min-width: 1200px)
{
    body
    {
        font-size: 1.2em;
        /*line-height: 2rem;*/
    }
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{
    margin-bottom: .5em;
}

main
{
    background:     var(--global-background);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-height:     100%;

    & > section
    {
        margin-block-start: 5em;
        /*margin-block-end:   2em;*/
    }

    .row
    {
        background: var(--section-background-color);
        box-shadow: 0 .2em .2em .1em rgba(0, 0, 0, .1);
        /*margin: 0 0 2em;*/
        padding:    1em;
        @media screen and (min-width: 768px)
        {
            padding: 3em;
        }

        & > :first-child
        {
            margin-top: 0;
        }
    }


    .row#breadcrumb
    {
        padding-top:   1.5em;
        @media screen and (min-width: 768px)
        {
            padding: 2em 3em 1.5em;
        }
        background:    var(--breadcrumb-background);
        border-bottom: 1px solid #ddd;
    }

    .row:first-child
    {
        border-top-left-radius:  .2em;
        border-top-right-radius: .2em;
    }

    .row
    {
        border-bottom-left-radius:  .2em;
        border-bottom-right-radius: .2em;
    }

    h1
    {
        /*font-size: 1.8em;*/
        font-size: 3.3vh;
    }

    h2
    {
        font-size:       2.5vh;
        text-decoration: underline;
        margin-top:      2.5vh;
    }

    p, li
    {
        line-height: 1.4em;
    }
}


hr
{
    border:     none;
    border-top: 1px solid #000;
    margin:     2em 0;
}

ul
{
    margin: 0;
}

.container
{
    margin: 0 auto;
    width:  100%;

    @media screen and (min-width: 768px)
    {
        max-width: calc(100% - 5em);
        width:     60em;

        /*width:         100%;*/
        /*padding-right: 15px;*/
        /*padding-left:  15px;*/
        /*margin-right:  auto;*/
        /*margin-left:   auto;*/
    }
}


/*.row*/
/*{*/
/*    display:     flex;*/
/*    flex-wrap:   wrap;*/
/*    box-sizing:  border-box;*/
/*    align-items: stretch;*/
/*}*/


body.landing #main
{
    margin-top: -14em;
}

body:not(.landing) #main
{
    margin-top: 2em;
}


#header
{
    font-family: OpenSans, sans-serif;

    #logo
    {
        /*font-family:  Bitter, serif;*/
        padding:   .25em .33em;
        font-size: 1.5em;
        /*font-variant: small-caps;*/

        & > a
        {
            text-decoration: none;
        }
    }

    #header-fixed
    {
        /*background-color: #f0f0f0;*/
        /*background-color: #6d7e61;*/
        /*background:      #f0fff0;*/
        background: var(--header-navbar-background-color);
        /*box-shadow: 0 0 6px rgba(0, 0, 0, .5);*/
        box-shadow: 0 .2em .2em -.1em rgba(0, 0, 0, .5);
        /*color: white;*/
        /*mix-blend-mode: darken;*/
        position:   fixed; /* Set the navbar to fixed position */
        top:        0; /* Position the navbar at the top of the page */
        width:      100%; /* Full width */
        padding:    0;
        /*height:           3em;*/

        #header-advertisement
        {
            background-color: var(--header-advertisement-background-color);
            color:            var(--header-advertisement-color);

            & > .container > .row
            {
                padding:     .5em .5em;
                /*color:       var(--header-advertisement-color);*/
                font-weight: bold;
                /*font-size: 1em;*/
            }
        }


        /*height:         inherit;*/
        /*line-height:    inherit;*/
        /*position:       absolute;*/

        #header-navigation > .container > .row
        {
            display:         flex;
            justify-content: space-between;
            align-items:     flex-end; /* center */
            height:          4em;
        }

        nav
        {
            /*position:     relative;*/
            margin-right: 1em;
            /*margin-right: 5em;*/
            /*font-size: 1.5em;*/

            a, a:visited
            {
                color:           var(--header-navbar-link-color);
                text-decoration: none;
            }

            a:hover
            {
                color: var(--header-navbar-hover-link-color);
                /*background-color: #e0f9e0;*/
            }

            /*a:hover, .dropdown:hover*/
            /*{*/
            /*    background-color: red;*/
            /*}*/

            /* 1st level = visible navigation bar */

            &.nav-mobile
            {
                /* "Hide" checkbox -- moves it off screen*/

                #nav-btn
                {
                    /*position: absolute;*/
                    /*top:      -100%;*/
                    /*left:     -100%;*/
                    display: none;
                }

                .nav-icon
                {
                    cursor:          pointer;
                    display:         flex;
                    justify-content: flex-end;
                    align-items:     baseline;
                    /*padding: 30px 20px 30px 0;*/
                    position:        relative;
                    user-select:     none;
                    visibility:      visible;

                    span
                    {
                        padding-inline: .5em;
                        position:       relative;
                        font-size:      1em;

                        &::before
                        {
                            top:       5px;
                            font-size: 2em;
                            content:   '\02261';
                        }
                    }
                }

                .nav-btn:checked + .nav-icon span::before
                {
                    content: '\000d7';
                }

                .nav-btn:not(:checked) ~ .navbar
                {
                    display: none;
                }

                .nav-btn:checked ~ .navbar
                {
                    display:    block;
                    max-height: 240px;
                }

                ul
                {
                    padding:    0;
                    margin:     0;
                    list-style: none;

                    li
                    {
                        border-top:  1px solid #999;
                        /*padding:    .5em 0;*/
                        line-height: 2em;;

                        &:first-child
                        {
                            /*padding-top: 0;*/
                        }
                    }

                    a
                    {
                        padding-inline-start: .5em;

                        & + * a
                        {
                            padding-inline-start: 1em;

                            & + * a
                            {
                                padding-inline-start: 1.5em;
                            }
                        }
                    }
                }

                ul.navbar
                {
                    position:         absolute;
                    top:              6em;
                    left:             0;
                    width:            100%;
                    /*padding:          1em;*/
                    /*box-shadow:       0 6px 6px -3px rgba(0, 0, 0, .5);*/
                    border-top:       1px solid rgba(0, 0, 0, .1);
                    box-shadow:       0 .2em .2em -.1em rgba(0, 0, 0, .5);
                    /*border-top: 3px solid #999;*/
                    /*transition: max-height 0.2s ease-out;*/
                    /*overflow: hidden;*/
                    transition:       width 0.5s, height 0.5s;
                    background-color: #fff;
                }

                li.active > a
                {
                    color:      var(--header-navbar-active-link-color);
                    font-style: italic;
                }
            }

            &.nav-desktop
            {
                ul.navbar
                {
                    padding:    0;
                    margin:     0;
                    text-align: right;
                    transition: width 0.5s, height 0.5s;
                    list-style: none inside none;

                    & > li
                    {
                        /*display:          block;*/
                        float:          left;
                        /*overflow:         hidden;*/
                        /*background-color: #fff;*/
                        /*border-left:      solid 1px #999;*/
                        display:        inline-block;
                        list-style:     none;
                        /*margin-left:    1em;*/
                        padding:        0;
                        vertical-align: top;
                        /*border-bottom:  3px solid #037;*/

                        & > li.dropdown
                        {
                            border-color: var(--header-navbar-dropdown-border-color);
                        }

                        /*margin-bottom:  -3px;*/
                        /*font-size:      1.2em;*/

                        &:nth-child(2n)
                        {
                            /*border-color: #262;*/

                            & > li.dropdown
                            {
                                /*border-color: #262;*/
                            }
                        }

                        &:nth-child(3n)
                        {
                            /*border-color: #505;*/

                            & > li.dropdown
                            {
                                /*border-color: #505;*/
                            }
                        }

                        & > a
                        {
                            padding: .25em 1em;
                            display: inline-block;
                            /*line-height: 1.5em;*/
                        }
                    }
                }

                /* 2nd + 3rd + all other levels */

                ul:not(.navbar)
                {
                    list-style:     none;
                    margin-left:    0;
                    padding-left:   0;
                    vertical-align: top;
                    /*font-size:      .9em;*/

                    a
                    {
                        display: block;
                        padding: .25em 1em;
                    }

                    a:hover
                    {
                        background-color: var(--header-navbar-dropdown-hover-color);
                    }
                }

                /* dropdown */

                li.dropdown
                {
                    position: relative;

                    /* Dropdown content (hidden by default) */

                    & > .dropdown-content
                    {
                        display:          none;
                        position:         absolute;
                        background-color: #fff;
                        min-width:        100%;
                        /*box-shadow:       0 1em 2em 0 rgba(0, 0, 0, 1);*/
                        right:            0;
                        top:              calc(2em - 3px);
                        z-index:          1;
                        border:           1px solid #222;
                    }

                    /* folder sign */

                    &::after
                    {
                        /*display: flex;*/
                        /*align-items: center;*/
                        /*justify-content: center;*/
                        margin-left: -1em;
                        padding:     0 1em 0 2em;
                        cursor:      pointer;
                        transition:  transform 0.2s ease;
                    }

                    /* Arrow icon pointing right */

                    /*&::after*/
                    /*{*/
                    /*    content:    '\203A'; !* Right arrow *!*/
                    /*    !*font-size: 20px; !* Adjust as needed *!*!*/
                    /*    display:    inline-block;*/
                    /*    transform:  rotate(0deg); !* Default right *!*/
                    /*    transition: transform 0.4s ease;*/
                    /*}*/


                    /* Show the dropdown menu on hover */

                    &:hover > .dropdown-content
                    {
                        display: block;
                        /*top:     0;*/
                    }

                    /* Rotate arrow down when folder is open */

                    /*&:hover::after*/
                    /*{*/
                    /*    transform:        rotate(90deg); !* Down arrow *!*/
                    /*    transform-origin: 2em 0.75em; !* because of margin-left:  -1em; *!*/
                    /*}*/
                }

                li.active > a
                {
                    color:      var(--header-navbar-active-link-color);
                    font-style: italic;
                }

                /*ul[nav-level="2"]*/
                /*{*/
                /*    !*overflow:         hidden;*!*/
                /*    padding:    0;*/
                /*    margin:     0;*/
                /*    float: left;*/
                /*    overflow: hidden;*/

                /*    !*& > li*!*/
                /*    !*{*!*/
                /*    !*    float:            left;*!*/
                /*    !*    overflow:         hidden;*!*/
                /*    !*    background-color: #fff;*!*/
                /*    !*    border-left:      solid 1px #999;*!*/
                /*    !*    display:          inline-block;*!*/
                /*    !*    list-style:       none;*!*/
                /*    !*    margin-left:      1em;*!*/
                /*    !*    padding-left:     1em;*!*/
                /*    !*    vertical-align:   top;*!*/

                /*    !*    &:first-child*!*/
                /*    !*    {*!*/
                /*    !*        border-left:  0;*!*/
                /*    !*        margin-left:  0;*!*/
                /*    !*        padding-left: 0;*!*/
                /*    !*    }*!*/
                /*    !*}*!*/
                /*}*/
            }

        }
    }


    #banner
    {
        background-attachment: fixed;
        /*background-color:      greenyellow;*/
        background-image:      url(/themes/reasonableWedding/image/famo-1024.jpg);
        background-position:   top;
        background-repeat:     no-repeat;
        background-size:       cover;
        color:                 #fff;
        /*padding:               12em 0 20em;*/
        padding-top:           calc(4em + 100vh);
        text-align:            center;
    }

    @media screen and (min-width: 1024px)
    {
        #banner
        {
            background-image: url(/themes/reasonableWedding/image/famo-1920.jpg);
        }
    }

    @media screen and (min-width: 1920px)
    {
        #banner
        {
            background-image: url(/themes/reasonableWedding/image/famo.jpg);
        }
    }

    #banner :last-child
    {
        margin-bottom: 0
    }
}

#main
{
    padding: 4em 0 0;

    p:has(+ul)
    {
        margin-block-end: 0;
    }
}

body.blog #main .row
{
    h1
    {
        margin-block-end: 0;

        & + p
        {
            margin-block-start: 0;
            font-size:          smaller;
        }
    }
}

#footer
{
    background: var(--footer-background-color);
    padding:    4em 0 4em;
    margin-top: -2em;
    text-align: center;

    .navigation
    {
        color:       var(--footer-color);
        font-size:   .9em;
        line-height: 1em;
        margin:      2em 0 0;
        padding:     0;
        text-align:  center;

        ul
        {
            margin:     0;
            padding:    0;
            list-style: none;
        }

        li
        {
            border-left: solid 1px var(--footer-color);

            margin:      0;
            padding:     .5em 0;

            @media screen and (min-width: 768px)
            {
                display:     inline-block;
                padding:     0 0 0 1em;
                margin-left: 1em;

                &:first-child
                {
                    border-left:  0;
                    margin-left:  0;
                    padding-left: 0;
                }
            }
        }
    }

    a, a:hover
    {
        color: var(--footer-link-color);
    }
}

a, a:visited
{
    color: var(--global-link-color);
}

a[target="_blank"]::after
{
    /* ↗, but nicer. SVG adapted from Inter's rendition of "↗". */
    content:        url("data:image/svg+xml,%3Csvg viewBox='0 0 7 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.04261 6.80966L0.377841 6.14489L5.32102 1.19318H1.50284L1.51136 0.272727H6.90625V5.67614H5.97727L5.9858 1.85795L1.04261 6.80966Z' fill='black'/%3E%3C/svg%3E%0A");
    /* inline => inline-block, so that we can give it a height */
    display:        inline-block;
    height:         0.5em;
    padding-inline: 0.2em;
    aspect-ratio:   1;
    line-height:    1;
    vertical-align: text-top;
}

ul.news
{
    margin:     0;
    padding:    0;
    list-style: none;
    margin-block-start: 1.5em;

    .news-item
    {
        margin-block-end: 1.5em;

        h1, h2, h3, h4, h5, h6
        {
            margin-block-start: 0;
            margin-block-end:   0;
        }

        p
        {
            margin-block: .5em;
        }
    }

}

.notice1
{
    background-color: #def;
    border-left:      6px solid #09f;
    margin-bottom:    1em;
    padding:          1em;
}

.notice2
{
    background-color: #fed;
    border-left:      6px solid #f90;
    margin-bottom:    1em;
    padding:          1em;
}

.notice3
{
    background-color: #efe;
    border-left:      6px solid #363;
    margin-bottom:    1em;
    padding:          1em;
}

.notice4
{
    background-color: #fee;
    border-left:      6px solid #c33;
    margin-bottom:    1em;
    padding:          1em;
}

.center
{
    text-align: center;
}

figure
{
    margin: 0;

    img
    {
        border:    1px solid #544;
        max-width: 100%;
    }

    figcaption
    {
        font-size: smaller;
    }

}

@media screen and (max-width: 820px)
{
    .xl,
    .nav-desktop
    {
        display: none;
    }
}

@media screen and (min-width: 820px)
{
    .sm,
    .nav-mobile
    {
        display: none;
    }
}