/* GLOBAL PAGE BACKGROUND */
body {
  margin: 0;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
}

/* CENTERED 580px COLUMN */
.page-wrapper {
  width: 580px;
  margin: 0 auto;
  background: #fff;
}

/* COLORS & FONTS FOR HEADERS + NAV */
:root {
  --jh-gold: #968A7A;
}

/* H1 HEADER AREA */
.site-header {
  width: 580px;
  height: 90px;
  background: #000;
  color: var(--jh-gold);
  font-family: 'Overpass', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header h1 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
}

/* HERO IMAGE */
.hero img {
  width: 580px;
  height: 194px;
  display: block;
}

/* H2 SUBHEAD AREA */
.subhead {
  width: 580px;
  height: 56px;
  background: #000;
  color: var(--jh-gold);
  font-family: 'Overpass', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subhead h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

/* NAVIGATION BAR */
.main-nav {
  width: 580px;
  height: 45px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Overpass', sans-serif;
}

.main-nav a {
  color: var(--jh-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

/* Hover state — darker, no underline */
.main-nav a:hover {
  color: #786955; /* WAS #6F6558;  */ 
}

/* Current page state for multiple trips content*/

.main-nav a.active {
  color: #8c7f6e;
  font-weight: 700;
  cursor: pointer;
}


/* OLD WAY BEFORE TRIPS

.main-nav a.active {
  color: #484848;
  cursor: default; 
  
}  */


/* CONTENT AREA */
.content {
  background: #fff;
  padding: 20px;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

/* CONTENT HEADLINE */
.content-headline {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1px;
}

.content-subhead {
  font-size: 1.0rem;
  font-weight: bold;
  text-align: center;
  margin: -5px 0 8px; /* 25px above	0 left/right 15px below */
}

.content-subhead-2 {
  font-size: 1.0rem;
  font-weight: bold;
  text-align: center;
  margin: -1px 0 0px; /* -5px above	0 left/right 8px below */
}

.content-subhead-3 {
  font-size: 1.0rem;
  font-weight: bold;
  text-align: center;
  margin: -5px 0 0px; /* -5px above	0 left/right 8px below */
}

.content-subhead-4 {
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  margin: -5px 0 0px; /* -5px above	0 left/right 8px below */
}

.content-subhead-5 {
  font-size: 0.8rem;
  /*font-weight: reg;*/
  text-align: center;
  margin: -5px 0 0px; /* -5px above	0 left/right 8px below */
}





/* CONTENT PARAGRAPHS */
.content p {
  margin-bottom: 14px;
  text-align: left;
  line-height: 1.2;   /* adjust to taste */
  padding-left: .5rem; /* This is in addition to overall content spacing above somewhere */
  /* margin-bottom: 14px; */
}
.content p.image-intro { 
  font-size: 0.80rem;
  line-height: 1.0;
  max-width: 400px;
  margin: 0 auto 12px;
  text-align: justify;   /*center, justify, right */
  /* text-align-last: center; turn on as needed */
  color: #000;
  font-weight: 550;
  padding-left: 0;     /* overrides .content p */
  display: block;      /* safe, but not required */
}

/* old
.content p.image-intro {
  text-align: center;
  padding-left: 0;
  max-width: 420px;
  margin: 0 auto 12px;
  font-size: 0.85rem;
  line-height: 1.3;
  font-weight: 500;
}*/


.content-divider {
  width: 80%;
  margin: 30px auto;
  border: none;
  border-top: 1px solid #ccc;
}

.content-list {
  margin: 0 0 25px 20px;
  padding: 2.25rem; /* adjust to taste */
  line-height: 1.6;
}

.content-list li {
  margin-bottom: 14px;
}


/* SPECIAL OUTLINED PARA AS SEEN ON PAGE 3 */
.para-style240 {
    border: 3px solid black;
    padding: 40px;
    margin: 0 10px;
    background: #fff; /* optional but helps visibility */
}






/* IMAGE REGULATION	 */
/*old
.image-intro {
  font-size: 0.85rem;      /* smaller, but still readable
  line-height: 1.3;        /* a little tighter
  max-width: 420px;        /* controls the line length
  margin: 0 auto 12px;     /* centers it and adds space below
  text-align: center;      /* centers the text
  color: #444;             /* optional: softens it a bit 
  font-weight: 800;
  display: block;

  old.image-intro {
  text-align: center;
  margin: 70px 0 20px;
  font-style: italic;
  line-height: 0.5;
} */


/* ---------------------------------------
   BASE IMAGE RULES (shared by all blocks)
---------------------------------------- */
.image-block img,
.image-block-2 img,
.image-block-3 img {
  outline: none;
  height: auto;
}

/* Remove link outlines around images */
.image-block a,
.image-block-2 a,
.image-block-3 a {
  outline: none;
  border: none;
}

.image-block a:focus,
.image-block a:active,
.image-block-2 a:focus,
.image-block-2 a:active,
.image-block-3 a:focus,
.image-block-3 a:active {
  outline: none;
}

/* FOR ENGINE PAGE BIG PIX */

.auto-style237 {
  display: block;
  margin: 0 auto;
}






/* ---------------------------------------
   LAYOUT VARIANTS
---------------------------------------- */

/*.image row centers up the <figure> lower images like in Trip3 */


.image-row {
  display: flex;
  justify-content: center;   /* ← THIS centers the figures */
  gap: 12px;
  flex-wrap: wrap; /* allows wrapping on small screens */
}

.image-block {
  text-align: center;
  margin: 0 0 10px;
}

figure.image-block-left {
    float: left;
    margin: 0 20px 10px 0;   /* right + bottom spacing */
}

figure.image-block-right {
    float: right;
    margin: 0 0 10px 20px;   /* left + bottom spacing */
}

figure.image-block-right + p,
figure.image-block-left + p {
    margin-top: 0.2em;
    var(--base-line-height);   /* for copy around */
}


/* REGULATES ALL CAPTION FONT SIZE  */

.image-block figcaption,
.image-block-2 figcaption,
.image-block-3 figcaption,
.image-left-caption-right figcaption,
.image-right-caption-left figcaption {
  font-size: 0.80rem;
}

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

.image-block img {
  border: 2px solid #000;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.image-block figcaption {
  margin-top: 6px;
  font-style: italic;
  color: #555;
}

/* IMAGE BKOCKS WITH SIDE CAPTION */
.image-left-caption-right {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* space between image and caption */
}

.image-left-caption-right img {
    display: block; /* avoids weird inline spacing */
}

.image-left-caption-right figcaption {
    max-width: 300px; /* optional */
}

.image-right-caption-left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.image-right-caption-left figcaption {
    max-width: 300px;
}

/* 2. Left-floating image block */
.image-block-2 {
  float: left;
  margin: 0 18px 12px 0;
}

.image-block-2 img {
  display: block;
  max-width: 100%;
  border: none !important;
}

.image-block-2 figcaption {
  margin-top: 6px;
  font-style: italic;
  color: #555;
}


/* 3. Right-floating image block */
.image-block-3 {
  float: right;
  margin: 0 0 12px 18px;
}

.image-block-3 img {
  display: block;
  max-width: 100%;
  border: none !important;
}

.image-block-3 figcaption {
  margin-top: 6px;
  font-style: italic;
  color: #555;
}
00%;
}

/* ---------------------------------------
   CONTENT IMAGE SIZES
---------------------------------------- */

00%;
}

/* ---------------------------------------
   CONTENT IMAGE SIZES
---------------------------------------- */

.content-image {
  max-width: 100%;
  border-radius: 2px;
}

.content-image2 {
  max-width: 75%  !important; /* WAS 50% */
 
}

/* -----------------------------------------
SPECIAL FOR ENGINE SECTION PICTURE WRAP 0 = top 0 = right 0px = bottom 0px = left
--------------------------------------------*/

.engine-wrap {   /* normal paragraph, no float */
}

.engine-left,
.engine-right {
  border: 2px solid #000;   /* black border */
  box-sizing: border-box;   /* keeps the image size stable */
}


.engine-left {
  float: left;
  margin: 2px 18px 12px 0;  /* air on the right */
  display: block;
}

.engine-right {
  float: right;
  margin: 10px 0 12px 18px;  /* air on the left */
  display: block;
}

/* GALLERY GRID */

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 0;
  justify-content: center;  /* centers each row */
}

/*.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

 .gallery-grid img {
  width: 100%;
  height: auto;
  border: 2px solid #000;
  display: block;
} */

.gallery-grid img {
  width: auto;
  height: 154px;
  border: 2px solid #000;
  display: block;
  object-fit: cover; /* keeps cropping clean */
}

.gallery-grid img:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transform: scale(1.10);
  transition: 0.2s ease;
}






/* email link block */
.email-link {
  text-align: center;
  margin: 20px 0;
}

.email-icon {
  width: 200px;
  height: auto;
  border: none;
}

/*.email-block {
  text-align: center;
}

.email-block img {
  display: inline-block;
  margin: 0 auto;
  border: none !important;   /* overrides .image-block img *
  text-align: center;
  outline: none;
}*/

.email-block a,
.email-block a:focus,
.email-block a:active {
  outline: none;
  border: none;
}


/* COUNTER */
.counter-block {
  text-align: center;
  margin: 20px 0 18;
}

.counter-label {
  font-size: 0.75rem;
  color: #444;
  margin-bottom: 6px;
}

.counter-image {
  display: inline-block;
}


/* FOOTER */
.footer {
  background: #000; /* solid black */
  color: #e5e5e5;     
  font-size: 0.75rem;
  text-align: center;
  padding: 1px 0 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.next-page-link {
  text-align: center;
  margin: 20px 0;
  font-size: 0.8rem;
  font-weight: regular;
}

.footer-credit {
  text-align: center;
  font-size: 0.75rem;
  color: #7e7e7e;
  margin: 20px 0 15px;
  line-height: 1.5;        /* slightly tighter than footer block */
  letter-spacing: 0.40px;  /* softer tracking for the credit */
}



.footer a {
  color: #7e7e7e;          /* same light gray as footer text */
  text-decoration: none;   /* removes underline */
  letter-spacing: 0.3px;   /* match the footer’s rhythm */
}

.footer a:hover {
  color: #d3d3d3;          /* gentle brighten on hover */
  text-decoration: underline;  /* optional: adds a subtle cue */
}

/* Completely remove outlines/borders from linked images */
.image-block a img,
.image-block-2 a img,
.image-block-3 a img {
  outline: none !important;
  border: none !important;
}

.image-block a,
.image-block-2 a,
.image-block-3 a {
  outline: none !important;
  border: none !important;
}

.image-block a:focus,
.image-block a:active,
.image-block-2 a:focus,
.image-block-2 a:active,
.image-block-3 a:focus,
.image-block-3 a:active {
  outline: none !important;
  border: none !important;
}