/* ==========================================================
   index-only.css (STABLE - ALIGN FIX + SLIDESHOW FIT)
   Desktop: classic 1001px layout (234 + 690)
   Mobile portrait: stacked + full-width reflow
   Mobile landscape: 2-column header (menu + slideshow)
   ========================================================== */

/* ----------------- reset / base ----------------- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-size:100%; line-height:1em; background:url(images/bg.gif); }

html, input, textarea {
  font-family: Arial, Helvetica, sans-serif;
  color:#b0a18b;
}

img { border:0; vertical-align:top; max-width:100%; height:auto; }
a { color:#766a64; text-decoration:underline; outline:none; }
a:hover { text-decoration:none; }

.clear { clear:both; }

/* ----------------- main wrapper ----------------- */
.main{
  width:1001px;
  margin:0 auto;
  text-align:left;
  background:url(images/bg1.gif);
  overflow:hidden;
}

/* old template containers */
div.container { overflow:hidden; width:100%; }
.container:after,
.indent:after,
.indent-main:after { content:""; display:block; clear:both; }

/* ==========================================================
   SYMMETRY GAP ACROSS WHOLE PAGE (PC)
   ========================================================== */
:root{
  --header-gap: 10px;
}

/* ----------------- header ----------------- */
#header{
  font-size:0.75em;
  color:#867250;
  padding-bottom: var(--header-gap);
}

#header .indent{ padding:38px 0 0 33px; }

/* HEADER ROW flex on desktop */
#header .container.header-row{
  overflow:visible;
  width:100%;
  display:flex;
  align-items:stretch;
  gap:11px;
}

/* remove float behavior ONLY in header row */
#header .container.header-row .col-1,
#header .container.header-row .col-2{
  float:none !important;
}

/* left nav column fixed */
#header .container.header-row .col-1{
  flex:0 0 234px;
  width:234px;
}

/* right hero column fixed */
#header .container.header-row .col-2{
  flex:0 0 690px;
  width:690px;
  display:flex;
  flex-direction:column;
}

/* logo: no mystery gap below */
#header .logo{
  display:block;
  margin:0;
  padding:0;
}

/* ==========================================================
   TOP NAV
   ========================================================== */
.auto-style2{
  text-decoration:none;
  color:#ffffff;
  font-weight:bold;
}

#header .nav-panel p.auto-style3{
  background-image:url('images/m1.gif');
  background-repeat:no-repeat;
  background-position:left top;
  background-color:#556b0a;
  width:234px !important;
  height:42px !important;
  line-height:42px !important;
  padding-left:15px;
  text-transform:uppercase;
  text-align:left !important;
  margin:0 !important;
}

#header .nav-panel p.auto-style3 a{
  display:block;
  width:100%;
  height:42px;
  line-height:42px;
  color:#ffffff !important;
  text-decoration:none !important;
}

/* desktop gap handled by #header padding-bottom */
#header .nav-gap{ height:0; }

/* ==========================================================
   RIGHT SIDE: slideshow + welcome strip
   ========================================================== */
.home-slideshow-wrap{
  width:690px;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Slideshow box */
#njb-slideshow{
  flex:1 1 auto;
  width:690px;
  background:#222;
  overflow:hidden;
  position:relative;
  min-height:240px;
}

#njb-slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
  background:#222;
}

/* Welcome strip */
.welcome-strip{
  flex:0 0 54px;
  width:690px;
  height:54px;
  background:#efe8db;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  margin:0;
}

.welcome-strip img.title{
  width:auto;
  height:34px;
  flex:0 0 auto;
  display:block;
}

.welcome-strip .txt1{
  flex:1 1 auto;
  color:#7a6a5b;
  font-size:0.92em;
  line-height:1.2em;
  margin:0;
}

/* ==========================================================
   CONTENT AREA
   ========================================================== */
#content{ font-size:0.75em; width:100%; text-align:left; }
#content .indent-main{ padding:0 33px 13px 33px; }

.bg-1{ background:url(images/bg-1.gif) repeat-x top #31373c; color:#dedad4; width:100%; }
.bg-2{ background:url(images/bg-2.gif) repeat-x top #3d3732; color:#978f8a; width:100%; }
.bg-3{ background:url(images/bg-3.gif); color:#766a64; width:100%; }

#page1 #content .col-1{ float:left; width:234px; margin-right:11px; }
#page1 #content .col-2{ float:left; width:690px; }
#page1 #content .col-3{ float:left; width:300px; margin-right:37px; }
#page1 #content .col-4{ float:left; width:296px; }

#page1 #content .bg{ background:url(images/tail1.gif) repeat-y 317px top; }

#content .title{ background:url(images/tail2.gif) repeat-x bottom; margin-bottom:16px; }
#content h2{
  color:#d3c3ab; font-size:1.5em; font-weight:normal; line-height:1.44em; padding-bottom:18px;
}
#content h2 strong{
  color:#dedad4; font-size:1.66em; font-weight:normal; line-height:1em;
}
#content h5{ color:#dadada; font-size:1.33em; margin-bottom:13px; }
#content .h2-1{ background:url(images/icon1.jpg) no-repeat top left; padding-left:85px; }
#content .h2-2{ background:url(images/icon2.jpg) no-repeat top left; padding-left:102px; }

#content .indent-col{ padding:37px 30px 30px 20px; text-align:right; }
#content .indent-col1{ padding:21px 20px 1px 29px; }
#content .indent-col3{ padding:25px 20px 0px 29px; }
#content .indent1{ padding:0 0 0 5px; }
#content .indent2{ padding:0 0 0 12px; }
#content .indent3{ padding:45px 0 0 0; }

/* SECOND NAV */
.ul{ list-style:none; margin:0; padding:0; }
.ul li{
  background:url(images/marker1.gif) center right no-repeat;
  margin:0;
  padding-right:18px;
}
.ul li a{
  display:block;
  color:#dedad4;
  text-decoration:none;
  font-weight:bold;
  line-height:2em;
  font-family:"Arial Narrow", Helvetica, sans-serif;
  font-size:1.5em;
  text-transform:uppercase;
}
.ul li a:hover{ text-decoration:underline; }

/* links */
.link{
  color:#cdcbab;
  background:url(images/marker.gif) top left no-repeat;
  padding-left:11px;
  background-position:0 5px;
  text-decoration:none;
  font-weight:bold;
}
.link:hover{ text-decoration:underline; }

.link-1{ display:block; float:left; background:url(images/link_bg.gif) left top repeat-x; color:#282320; text-decoration:none; }
.link-1 em{ display:block; background:url(images/link_left.gif) no-repeat left top; }
.link-1 b{ display:block; background:url(images/link_right.gif) no-repeat right top; padding:2px 13px 3px 20px; font-style:normal; }
.link-1:hover{ text-decoration:none; color:#fff; }

/* CALENDAR + EVENTS GRID (desktop) */
.calendar-row{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.calendar-left{ flex:0 0 289px; }
.event-grid{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  gap:14px 14px;
  align-content:flex-start;
}
.event-box{ flex:0 0 310px; }

/* Event card */
.event-card { width:100%; height:159px; overflow:hidden; }
.event-thumb{
  float:left; width:110px; height:110px;
  margin-right:10px; margin-bottom:6px;
  background:#222; overflow:hidden;
}
.event-thumb img{ width:100%; height:100%; display:block; object-fit:contain; object-position:center; }

/* FOOTER */
#footer { height:61px; color:#746963; font-size:0.75em; background:url(images/bot.gif) repeat-x top; }
#footer .bg-bot{ background:url(images/tail.gif) repeat-x top; margin:0 33px; }
#footer .indent-footer{ padding:19px 8px 0 11px; }
#footer span{ color:#978a79; float:right; }
#footer .icon{ margin:22px 0 0 764px; position:absolute; }

/* ==========================================================
   MOBILE PORTRAIT (stack + full reflow)
   ========================================================== */
@media screen and (max-width: 768px){

  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  /* SUPER OBVIOUS MOBILE-ONLY INDICATOR (debug):
     If you do NOT see a thin bar at the top on your phone,
     the phone is not loading this CSS version. */
  body:before{
    content:"";
    display:block;
    height:6px;
    background:#ff00ff; /* bright magenta */
  }

  .main{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    overflow:visible !important;
  }

  /* Header padding reduced */
  #header .indent{
    padding:12px 10px 0 10px !important;
  }

  /* On mobile we don't want the desktop bottom gap behavior */
  #header{
    padding-bottom:0 !important;
  }

  /* Turn off desktop flex header row */
  #header .container.header-row{
    display:block !important;
    width:100% !important;
    gap:0 !important;
  }

  /* Both header columns become blocks */
  #header .container.header-row .col-1,
  #header .container.header-row .col-2{
    float:none !important;
    display:block !important;
    width:100% !important;
    flex:none !important;
    margin:0 !important;
  }

  /* NAV stays 234px but centered */
  #header .container.header-row .col-1.nav-panel{
    width:234px !important;
    max-width:234px !important;
    margin:0 auto !important;
    overflow:visible !important;
  }

  /* Put a small space below nav */
  #header .nav-gap{
    height: var(--header-gap) !important;
  }

  /* Hero becomes full width */
  .home-slideshow-wrap{
    width:100% !important;
    height:auto !important;
    display:block !important;
  }

  /* Responsive slideshow with ratio box */
  #njb-slideshow{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    position:relative !important;
    overflow:hidden !important;
    flex:none !important;
  }
  #njb-slideshow::before{
    content:"";
    display:block;
    padding-top:52.1739%; /* 360/690 */
  }
  #njb-slideshow img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
  }

  /* Welcome strip full width */
  .welcome-strip{
    width:100% !important;
    height:auto !important;
    flex:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:10px 12px !important;
    margin:0 !important;
  }
  .welcome-strip img.title{
    height:28px !important;
    width:auto !important;
  }

  /* CONTENT padding */
  #content .indent-main{
    padding:0 10px 13px 10px !important;
  }

  /* CRITICAL: override inline desktop widths/heights in content */
  #content [style*="width"],
  #content [style*="height"]{
    width:auto !important;
    height:auto !important;
  }

  /* Force key blocks to be full width */
  #header, #content, #footer,
  .container, .bg-1, .bg-2, .bg-3{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* Stack all template columns */
  #content .col-1,
  #content .col-2,
  #content .col-3,
  #content .col-4,
  #content .col-6,
  #page1 #content .col-1,
  #page1 #content .col-2,
  #page1 #content .col-3,
  #page1 #content .col-4{
    float:none !important;
    width:100% !important;
    margin:0 !important;
    height:auto !important;
  }

  /* Remove desktop vertical divider backgrounds */
  #page1 #content .bg,
  #page1 #content .bg1{
    background:none !important;
  }

  /* Make 2nd nav readable */
  #content .indent-col{
    padding:18px 12px !important;
    text-align:left !important;
  }
  .ul li{
    background:none !important;
    padding-right:0 !important;
  }
  .ul li a{
    font-size:1.25em !important;
    line-height:1.8em !important;
  }

  /* Calendar + events stack */
  .calendar-row{
    flex-direction:column !important;
    gap:14px !important;
  }
  .calendar-left{
    flex:none !important;
    width:100% !important;
  }
  .event-grid{
    width:100% !important;
  }
  .event-box{
    flex:1 1 100% !important;
  }

  /* Footer cleanup */
  #footer{
    height:auto !important;
  }
  #footer .icon{
    display:none !important;
  }
  #footer .bg-bot{
    margin:0 10px !important;
  }
  #footer span{
    float:none !important;
    display:block !important;
    margin-top:6px !important;
  }
}

/* ==========================================================
   MOBILE LANDSCAPE (menu + slideshow side-by-side)
   ========================================================== */
@media screen and (max-width: 1024px) and (orientation: landscape){

  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  .main{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    overflow:visible !important;
  }

  #header .indent{
    padding:10px 10px 0 10px !important;
  }

  #header{
    padding-bottom:0 !important;
  }

  /* Use flex like desktop */
  #header .container.header-row{
    display:flex !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  #header .container.header-row .col-1.nav-panel{
    flex:0 0 234px !important;
    width:234px !important;
    margin:0 !important;
  }

  #header .container.header-row .col-2{
    flex:1 1 auto !important;
    width:auto !important;
  }

  .home-slideshow-wrap{ width:100% !important; }
  #njb-slideshow{ width:100% !important; min-height:220px !important; }
  .welcome-strip{ width:100% !important; height:auto !important; }
}