/* HAYHOE GALLERY - HYBRID (one piece). Paste into Appearance > Customize > Additional CSS.
   Clear the box first (Ctrl+A, Delete) so nothing old conflicts. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400&display=swap');

/* 1. FRONT PAGE: no white gaps anywhere around the new design */
body.home,
body.home #page,
body.home .site,
body.home #content,
body.home .site-content,
body.home .site-content #primary,
body.home .site-content #main,
body.home .site-content .site-main,
body.home .site-content article,
body.home .site-content .hentry,
body.home .site-content .entry-content{
  background-color:#0d1124!important;
  padding-top:0!important;padding-bottom:0!important;
  margin-top:0!important;margin-bottom:0!important;
}
body.home{overflow-x:hidden}
body.home .site-footer,body.home #colophon{margin-top:0!important}
body.home .page-title-wrap,
body.home .page-header,
body.home .entry-header,
body.home .breadcrumb-wrap{display:none!important}

/* 2. EVERY OTHER PAGE: a few touches that tie it to the new front page
   (the old layout stays as it is) */

/* a dark title band with the serif title and the rainbow rule */
body:not(.home) .page-title-wrap,
body:not(.home) .page-header,
body:not(.home) .breadcrumb-wrap{
  background-color:#0d1124!important;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#d8212b,#f7931e,#2bb673,#2a7de1,#8a2be2) 1;
}
body:not(.home) .page-title,
body:not(.home) .page-title-wrap h1,
body:not(.home) .page-header h1{
  font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:500!important;
  color:#f1e6cf!important;font-size:42px;
}
body:not(.home) .breadcrumb,
body:not(.home) .breadcrumb a,
body:not(.home) .breadcrumb-trail,
body:not(.home) .breadcrumb-trail a{color:#d1a24f!important}

/* post and page headings in the same serif */
body:not(.home) .entry-title,
body:not(.home) .entry-title a{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}

/* photographs in a brass frame with a cream mat, as on the front page */
body.single .entry-content img,
body.single .post-thumbnail img,
body.single .wp-block-image img{
  background:#f1e6cf;padding:10px;border:1px solid #d1a24f;height:auto;
  box-shadow:0 0 0 4px #120c08,0 0 0 5px rgba(209,162,79,.4),0 14px 28px rgba(0,0,0,.35);
}

/* buttons and read-more links in brass */
body:not(.home) .more-link,
body:not(.home) .wp-block-button__link,
body:not(.home) input[type="submit"]{
  background:transparent;color:#a97c2f;border:1px solid #d1a24f;border-radius:3px;
}
body:not(.home) .more-link:hover,
body:not(.home) .wp-block-button__link:hover,
body:not(.home) input[type="submit"]:hover{background:#d1a24f;color:#0d1124}

/* a brass line and the rainbow rule above the footer, on every page */
.site-footer,#colophon{border-top:3px solid transparent;
  border-image:linear-gradient(90deg,#d8212b,#f7931e,#2bb673,#2a7de1,#8a2be2) 1}
/* HAYHOE GALLERY - TWEAKS (paste at the very BOTTOM of Additional CSS, below the hybrid stylesheet) */

/* 1. Title band: breathing room, title and breadcrumb lined up */
body:not(.home) .page-title-wrap,
body:not(.home) .page-header,
body:not(.home) .breadcrumb-wrap{
  padding-top:30px!important;
  padding-bottom:30px!important;
  overflow:visible!important;
}
body:not(.home) .page-title,
body:not(.home) .page-title-wrap h1,
body:not(.home) .page-header h1{
  margin:0!important;
  line-height:1.2!important;
  padding-left:max(24px,4vw)!important;
}
body:not(.home) .breadcrumb,
body:not(.home) .breadcrumb-trail,
body:not(.home) .page-title-wrap .breadcrumb,
body:not(.home) .page-title-wrap .breadcrumbs{
  white-space:normal!important;
  padding-right:max(24px,4vw)!important;
  line-height:1.5!important;
}

/* 2. The welcome quote: no white box on the dark front page */
body.home blockquote,
body.home .wp-block-quote,
body.home .wp-block-pullquote{
  background:transparent!important;
  border:0!important;
  border-left:3px solid #d1a24f!important;
  color:#cdbfa8!important;
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-style:italic!important;
  font-size:22px!important;
  box-shadow:none!important;
}
body.home blockquote p,
body.home blockquote cite{color:#cdbfa8!important;font-family:inherit!important;font-style:italic!important}
body.home blockquote::before,
body.home blockquote p::before{color:#d1a24f!important}

/* 3. Dark logos (Automattic, Simplenote, Longreads) turned light for the dark background.
      Black becomes white; the coloured parts keep roughly their colour. */
body.home img[src*="Automattic-Logo"],
body.home img[src*="Simplenote-Logo"],
body.home img[src*="Simplenote-logo"],
body.home img[src*="Longreads-Logo"]{
  filter:invert(1) hue-rotate(180deg)!important;
}
/* HAYHOE GALLERY - TWEAKS (paste at the very BOTTOM of Additional CSS, below the hybrid stylesheet) */

/* 1. Title band: grows to fit, title and breadcrumb centred on the same line */
body:not(.home) .page-title-wrap,
body:not(.home) .page-header,
body:not(.home) .breadcrumb-wrap{
  height:auto!important;
  min-height:120px!important;
  padding-top:24px!important;
  padding-bottom:24px!important;
  overflow:visible!important;
}
body:not(.home) .page-title-wrap,
body:not(.home) .page-title-wrap > div,
body:not(.home) .page-header,
body:not(.home) .page-header > div{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:8px 24px;
}
body:not(.home) .page-title,
body:not(.home) .page-title-wrap h1,
body:not(.home) .page-header h1{
  float:none!important;position:static!important;transform:none!important;
  margin:0!important;
  padding:0 0 0 max(24px,4vw)!important;
  line-height:1.2!important;
}
body:not(.home) .breadcrumb,
body:not(.home) .breadcrumb-trail,
body:not(.home) .page-title-wrap .breadcrumb,
body:not(.home) .page-title-wrap .breadcrumbs{
  float:none!important;position:static!important;transform:none!important;
  margin:0!important;
  white-space:normal!important;
  padding:0 max(24px,4vw) 0 0!important;
  line-height:1.5!important;
}

/* 2. The welcome quote: no white box on the dark front page */
body.home blockquote,
body.home .wp-block-quote,
body.home .wp-block-pullquote{
  background:transparent!important;
  border:0!important;
  border-left:3px solid #d1a24f!important;
  color:#cdbfa8!important;
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-style:italic!important;
  font-size:22px!important;
  box-shadow:none!important;
}
body.home blockquote p,
body.home blockquote cite{color:#cdbfa8!important;font-family:inherit!important;font-style:italic!important}
body.home blockquote::before,
body.home blockquote p::before{color:#d1a24f!important}

/* 3. Dark logos (Automattic, Simplenote, Longreads) turned light for the dark background.
      Black becomes white; the coloured parts keep roughly their colour. */
body.home img[src*="Automattic-Logo"],
body.home img[src*="Simplenote-Logo"],
body.home img[src*="Simplenote-logo"],
body.home img[src*="Longreads-Logo"]{
  filter:invert(1) hue-rotate(180deg)!important;
}