/*
  2026 compatibility layer for samandgreggetmarried.com

  Conservation rule:
  - Desktop (970px original canvas and wider): preserve the 2007 layout/artwork.
  - Narrow screens: re-compose the SAME site for touch/mobile instead of scaling
    the old 14-column table until it collapses.
*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 8px; /* original browser-default margin */
  min-width: 0;
}

table.main {
  width: 970px;
  max-width: 100%;
  min-width: 0;
}

/* Navigation source PNGs are much larger than their intended 2007 display size. */
tr.site-nav-row a.info img,
tr.site-nav-row img.png {
  display: inline-block;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 40px !important;
}

/* Original 930 × 126 masthead. */
tr.site-header-row img.site-header-image {
  display: block;
  width: 930px;
  height: 126px;
  max-width: 100%;
  margin: 0 auto;
}

/* Long legacy URLs should wrap without forcing the whole page sideways. */
td.centerstage a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Mouse/keyboard tooltip behavior on desktop. */
a.info:focus span,
a.info:focus-visible span {
  display: block;
  position: absolute;
  z-index: 10;
  bottom: -1.25em;
  width: 15em;
  color: #21EDF4;
  text-align: left;
  font-weight: bold;
}

a.info:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}

#mapsearch,
.gsmsc-mapDiv,
.gsmsc-idleMapDiv {
  max-width: 100% !important;
  box-sizing: border-box;
}

/*
  MOBILE/TABLET RECOMPOSITION
  The original site is a 14-column presentation table. On phones, we flatten only
  the outer layout table into a vertical document. The content and artwork remain.
*/
@media (max-width: 969px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    padding: 0;
    background: #666666;
  }

  table.main,
  table.main > tbody {
    display: block;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    height: auto !important;
  }

  table.main {
    margin: 0;
    background-image: url(../images/leaves_background.jpg);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: auto 768px; /* preserve the original leaf artwork's scale */
  }

  table.main > tbody > tr {
    display: block;
    width: 100%;
    height: auto !important;
  }

  /* ---------- Masthead ---------- */
  tr.site-header-row {
    padding: 10px 10px 4px;
    box-sizing: border-box;
  }

  tr.site-header-row > td:first-child,
  tr.site-header-row > td:last-child {
    display: none;
  }

  tr.site-header-row > td[colspan="12"] {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  tr.site-header-row a {
    display: block;
  }

  tr.site-header-row img.site-header-image {
    width: 100%;
    height: auto;
    max-width: 930px;
    margin: 0 auto;
  }

  /* ---------- Navigation ---------- */
  tr.site-nav-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 10px;
    align-items: center;
    justify-items: center;
    padding: 8px 14px 18px;
    box-sizing: border-box;
  }

  tr.site-nav-row > td {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
  }

  tr.site-nav-row > td:first-child,
  tr.site-nav-row > td:last-child {
    display: none !important;
  }

  tr.site-nav-row a.info {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  tr.site-nav-row a.info img,
  tr.site-nav-row img.png {
    height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 40px !important;
  }

  /* Hover labels are a desktop interaction. Taps should simply navigate. */
  tr.site-nav-row a.info span,
  tr.site-nav-row a.info:hover span,
  tr.site-nav-row a.info:focus span,
  tr.site-nav-row a.info:focus-visible span {
    display: none !important;
  }

  /* ---------- Main content ---------- */
  tr.centerstage {
    padding: 0 12px 16px;
    box-sizing: border-box;
  }

  tr.centerstage > td:not(.centerstage) {
    display: none !important;
  }

  tr.centerstage > td.centerstage {
    display: block !important;
    width: 100% !important;
    max-width: 720px;
    height: auto !important;
    margin: 0 auto;
    padding: 18px 18px 22px;
    box-sizing: border-box;
    background-image: url(../images/note_background.png) !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    color: #336600;
    font-size: 17px;
    line-height: 1.42;
    overflow-wrap: normal;
    word-break: normal;
  }

  tr.centerstage > td.centerstage h1 {
    margin: 4px 0 20px;
    font-family: Garamond, Georgia, serif;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.03;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  tr.centerstage > td.centerstage h2 {
    font-size: 1.35em;
    line-height: 1.15;
  }

  tr.centerstage > td.centerstage h6 {
    font-size: 18px;
    line-height: 1.2;
  }

  tr.centerstage > td.centerstage p,
  tr.centerstage > td.centerstage li {
    overflow-wrap: normal;
    word-break: normal;
  }

  tr.centerstage > td.centerstage a {
    overflow-wrap: anywhere;
  }

  tr.centerstage > td.centerstage ul,
  tr.centerstage > td.centerstage ol {
    padding-left: 1.45em;
  }

  /* All ordinary content media fit the reading column. */
  tr.centerstage > td.centerstage img,
  tr.centerstage > td.centerstage video,
  tr.centerstage > td.centerstage object,
  tr.centerstage > td.centerstage embed {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  /* Legacy floated photos/logos become readable blocks on a narrow screen. */
  #intpic,
  tr.centerstage > td.centerstage img[align="left"],
  tr.centerstage > td.centerstage img[align="right"] {
    float: none !important;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 4px auto 14px !important;
    padding-right: 0 !important;
  }

  /* Sheep page's 190px desktop gutters must disappear on phones. */
  tr.centerstage > td.centerstage p[style*="margin-left: 190px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  tr.centerstage > td.centerstage p[style*="margin-left: 190px"] img {
    display: block;
    margin: 0 auto 8px;
  }

  #mapsearch {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---------- Home ---------- */
  body.page-index .home-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    font-size: 0; /* neutralizes the old   spacers */
  }

  body.page-index .home-photos img {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  body.page-index .home-photo-spacer {
    display: none;
  }

  /* ---------- Photos ---------- */
  body.page-photos tr.centerstage > td.centerstage p[align="right"] {
    text-align: center !important;
    margin: 0 0 14px;
  }

  body.page-photos tr.centerstage > td.centerstage p[align="right"] img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    margin: 0 auto 12px !important;
  }

  /* ---------- FAQ ---------- */
  body.page-faq .faqtitles {
    font-size: 26px;
    margin-bottom: 8px;
  }

  body.page-faq tr.centerstage > td.centerstage > ul:first-of-type {
    margin-top: 4px;
  }

  /* ---------- Old outer-table spacer/countdown/footer rows ---------- */
  table.main > tbody > tr:nth-child(4) {
    display: none !important;
  }

  table.main > tbody > tr:nth-child(5) {
    display: block !important;
    padding: 0 12px 18px;
    box-sizing: border-box;
    text-align: center;
  }

  table.main > tbody > tr:nth-child(5) > td {
    display: none !important;
  }

  table.main > tbody > tr:nth-child(5) > td[colspan="10"] {
    display: block !important;
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
  }

  table.main > tbody > tr:last-child {
    display: block !important;
    width: 100%;
    background-color: #666666 !important;
  }

  table.main > tbody > tr:last-child > td {
    display: flex !important;
    width: 100% !important;
    min-height: 48px;
    box-sizing: border-box;
    padding: 8px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center !important;
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
  }

  table.main > tbody > tr:last-child > td > span {
    float: none !important;
  }

  table.main > tbody > tr:last-child a.footer {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  tr.site-header-row {
    padding: 10px 8px 4px;
  }

  tr.site-nav-row {
    padding-left: 8px;
    padding-right: 8px;
    column-gap: 2px;
    row-gap: 8px;
  }

  tr.site-nav-row > td,
  tr.site-nav-row a.info {
    height: 46px !important;
  }

  tr.site-nav-row a.info img,
  tr.site-nav-row img.png {
    height: 38px !important;
    max-height: 38px !important;
  }

  tr.centerstage {
    padding-left: 10px;
    padding-right: 10px;
  }

  tr.centerstage > td.centerstage {
    padding: 16px 16px 20px;
    font-size: 16px;
    line-height: 1.4;
  }

  tr.centerstage > td.centerstage h1 {
    font-size: clamp(28px, 8.8vw, 38px);
    margin-bottom: 16px;
  }
}