body                    {
    background-image:   url('/images/site/siteback.png');
    text-align:         center;
}
main                    {
    position:           relative;
    margin:             0 auto;
    width:              100%;
    max-width:          900px;
    padding-bottom:     60px;
    background:         white;
}
hr          {
    background:         rgb(151,151,154);
    background:         linear-gradient(25deg, rgba(151,151,154,1) 0%, rgba(106,78,139,1) 28%, rgba(42,56,42,1) 100%);
    height:             10px;
}
h1                      {
    font-family:        Merriweather, serif;
    font-size:          22pt;
    color:              #2A382A;
    margin:             6px auto;
    padding:            0 6px;
}
h2,summary              {
    font-family:        Merriweather, serif;
    font-size:          16pt;
    color:              #2A382A;
    text-align:         left;
    font-weight:        bold;
    padding:            0 6px;
}
h3                      {
    font-family:        Merriweather, serif;
    font-size:          14pt;
    color:              #2A382A;
    text-align:         left;
    padding:            0 6px;
}
p           {
    font-family:        Merriweather, Georgia, serif;
    font-size:          min(17pt, 4.6vw);
    text-align:         left;
    padding:            0 6px;
}
p           {
    font-size:          12pt;
}
.head       {
    background:         rgb(151,151,154);
    background:         linear-gradient(25deg, rgba(151,151,154,1) 0%, rgba(106,78,139,1) 28%, rgba(42,56,42,1) 100%);
    font-family:        Merriweather, Georgia, serif;
    font-size:          min(20pt, 5vw);
    text-align:         center;
    color:              white;
}
#contactButton      {
    position:       fixed;
    top:        8px;
    right:      12px;
    height:     32px;
    z-index:        1000;
}
.oldhead {
    background-image:   url('/images/wideheader.jpg');
}
#headblock              {
    background:     white;
    background-position:bottom;
    width:              100%;
    text-align:     center;
    padding:        4px 0;
}
.overlay                {
    background:         lightgrey;
    border:             solid medium #04AA6D;
    border-radius:      15px;
    padding:            12px 8px;
    display:            none;
    position:           fixed;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    max-height:         90vh;
}
summary                 {
    font-size:          14pt;
}
.label                  {
    text-align:         right;
    vertical-align:     top;
}
td>input                {
    width:              240px;
}
td>input[type=radio]    {
    width:              20px;
}
td>input[type=checkbox] {
    width:              20px;
    height:             15px;
    position:           relative;
    top:                -3px;
}
textarea                {
    display:            none;
}
.tablebutton            {
    text-align:         right;
    padding:            12px 0;
}
.button                 {
    background:         #2A382A;
    color:              white;
    border-radius:      10px;
    font-size:          12pt;
}
.button:disabled        {
    background:         darkgrey;
    color:              lightgrey;
}
#wait                   {
    display:            none;
    position:           absolute;
    width:              200px;
    height:             200px;
    left:               50%;
    top:                50%;
    transform:          translate(-50%, -50%);
    background:         lightgrey;
    opacity:            0.5;
}
#waitimg                {
    position:           absolute;
    width:              80%;
    left:               50%;
    top:                50%;
    transform:          translate(-50%, -50%);
}
details                 {
    text-align:         left;
}
details>p               {
    color:              #2A382A;
    padding-left:       6px;
}
ul                      {
    font-family:        Merriweather, serif;
    font-size:          12pt;
    color:              #2A382A;
    text-align:         left;
}
li                      {
    margin:             4px auto;
}
#foot                   {
    font-family:        Merriweather, serif;
    font-size:          10pt;
    color:              #2A382A;
    text-align:         center;
}
.foot       {
    text-align:     center;
}
.foot>a     {
    color:          black;
    font-weight:    bold;
}
#dropZone               {
    border:             dashed thin dimgrey;
    border-radius:      8px;
    background:         #F0F0F0;
    cursor:             pointer;
}
#dropZone:hover         {
//    background:         #D5FFFF;
}
#copied                 {
    display:            none;
    background:         grey;
    color:              white;
    font-size:          14pt;
    position:           fixed;
    left:               120px;
    border-radius:      6px;
    padding:            2px 6px;
}
.material-symbols-outlined  {
    cursor:             pointer;
    font-size:          13pt;
    position:           relative;
    top:                3px;
}
.blogIndexImage         {
    width:              100%;
}
.dateSlot               {
    cursor:             pointer;
}
.dateSlot>summary       {
    font-size:          14pt;
    margin:             2px auto 2px 18px;
}
.dateSlot>p             {
    background:         lightgrey;
    border:             solid thin dimgrey;
    border-radius:      8px;
    font-size:          14pt;
    text-align:         center;
    width:              80%;
    margin:             6px auto;
}
#confBox>p              {
    text-align:         center;
    font-size:          12pt;
}

.hero,
.peace,
.offers {
  max-width: 1200px;    /* wider than the old main */
  margin: 0 auto;
  width: 95%;           /* gentle edge padding */
}
main .hero,
main .peace,
main .offers {
  width: 100%;
  max-width: none;
}
.peace img {
  width: 100%;
  max-width: 350px;   /* adjust this value until it looks balanced */
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .peace img {max-width: 280px;}
}
.hero::before {background: linear-gradient(rgba(42,56,42,0.55), rgba(42,56,42,0.35));}

.hero-inner h1 {
  background: rgba(255,255,255,0.7);   /* gentle white veil */
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
}

.hero{position:relative;min-height:360px;background:url('/images/site/hero-home.jpg') center/cover no-repeat;border-radius:12px;margin:12px 0;overflow:hidden}
.hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;text-shadow:0 1px 3px rgba(0,0,0,.4);color:white}
.button{display:inline-block;background:#2A382A;color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.button:hover{filter:brightness(1.1)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
@media(max-width:700px){.grid{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:#F7F7F7;border:1px solid #e0e0e0;border-radius:12px;padding:14px;min-height:120px}

.ticks{list-style:none;padding-left:0;margin:0}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:"\2713 ";position:absolute;left:0;top:0}
@media (max-width:700px){
  .hero-inner h1, .hero-inner p {padding:6px 8px;font-size:1.1em}
  .hero{min-height:260px}
}



#menubar                {
    background:         rgb(151,151,154);
    background:         linear-gradient(25deg, rgba(151,151,154,1) 0%, rgba(106,78,139,1) 28%, rgba(42,56,42,1) 100%);
    display:            flex;
    width:              100%;
    justify-content:    center;
    flex-wrap:          wrap;
}
#menumobilebar          {
    background:         rgb(151,151,154);
    background:         linear-gradient(25deg, rgba(151,151,154,1) 0%, rgba(106,78,139,1) 28%, rgba(42,56,42,1) 100%);
    display:            none;
    width:              100%;
    text-align:         left;
    color:              white;
    font-size:          18pt;
    height:             36px;
}
#menumobiledisp         {
    display:            none;
    position:           absolute;
    z-index:            10;
    width:              50%;
    background:         lightgrey;
}
.menuitem               {
    display:            flex;
    color:              white;
    padding:            2px 8px;
    align-items:        center;
    text-decoration:    none;
    font-weight:        normal;
    font-size:          10pt;
    border-left:        solid thin white;
    border-right:       solid thin white;
}
.menuitem:hover         {
    background:         #E1F1E1;
    color:              darkgreen;
}
.menuselect             {
    background:         #928F99;
    color:              white;
}
@media screen and (max-width: 650px) {
    #menubar,#contactButton   {
        display:        none;
    }
    #menumobilebar      {
        display:        block;
    }
    .menuitem           {
        font-size:      16pt;
        padding:        5px;
        color:          #3C3E45;
    }
    .menuselect         {
        color:          white;
    }
}