/*
 *
 * Briggsdale County Shootist web style 
 *
 * Author: John Brewer
 * Date: 2/10/2012
 *
 * Updated: Ryan Mellin
 * Date: 3/2/2026
 * 
 */

html {
  box-sizing: border-box;
  min-height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* font related styles */
.italic { font-style: italic; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.xlarge { font-size: x-large; }
.xxlarge { font-size: xx-large; }
.large { font-size: large; }
.medium { font-size: medium; }
.small { font-size: small; }
.xsmall { font-size: x-small; }
.center { text-align: center; }
.golden { color: #FFC000; }
.redish { color: #9F2936; }

/*
 * center table
 *
 * <div class="centered">
 *    <table>
 *    .........
 *    </table>
 * </div>
 */
div.centered {
   text-align: center;
}
div.centered table {
   margin: 0 auto;
   width: 90%;
}
div.centered td {
   width: 25%;
}

.bottom-margin {
   margin-bottom: 100px;
}

img {
  max-width: 100%;
  height: auto;
}

iframe {
   border: solid 4px #9F2936;
}

/* body style for all web pages of this site */
body {
   background-color: #1a0e06;
   background-image: url('images/master15_image001.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: top center;
   background-size: cover;
   color: white;
   width: 100%;
   font-family: "Book Antiqua";
   font-weight: bold;
   min-height: 100vh;
}

.header {
   color: #ffcc66;
   background-image: url("images/header.jpg");
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   height: 252px;
   width: 100%;
   max-width: 1320px;
   border: solid 2px #9F2936;
   margin: 0 auto 20px auto;
   vertical-align: text-top;
   font-size: 375%;
   overflow: hidden;
   padding: 0 30px;
}

.wavy_underline {
   text-decoration-line: underline;
   text-decoration-style: wavy;
}

h2 {
   text-align: center;
   font-size: x-large;
   color: white;
   font-weight: bold;
}

hr {
   display: block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: 10.0em;
   margin-right: 10.0em;
   border-style: inset;
   border-width: 1px;
}

.story {
   font-style: italic;
   font-size: large;
   color: #FFC000;
   margin: 0px 100px;
}

.para {
   padding: 0px 10px;
   text-indent: 20px;
}

.twocol {
   margin: 10px;
   width: 90%;
}

.twocol th {
   text-align: center;
   vertical-align: top;
   padding: 5px 0px;
}

.twocol td {
   width: 50%;
   vertical-align: top;
   text-align: center;
   padding: 5px 10px 0px 10px;
}

/* setting color of the links */
a:link {
  color: #FFC000;
  font-weight: bold;
}

a:visited {
   color: yellow;
   font-weight: bold;
}

a:hover {
   color: #FFC000;
   background-color: #9F2936;
}

a:active {
  color: #9F2936;
  background-color: #FFC000;
}

/* image properties — intended to be decorative background images */
.home_imgL {
   position: absolute;
   top: 450px;
   left: 250px;
   z-index: -1;
}
.home_imgR {
   position: absolute;
   top: 450px;
   right: 50px;
   z-index: -1;
}
.about_img1 {
   position: absolute;
   top: 320px;
   right: 50px;
   z-index: -1;
}
.about_img2 {
   position: absolute;
   top: 420px;
   left: 50px;
   z-index: -1;
}
.about_img3 {
   position: absolute;
   top: 520px;
   right: 350px;
   z-index: -1;
}
.sassShoot {
   position: absolute;
   top: 440px;
   right: 170px;
   z-index: -1;
}
.briggsdaleshoot {
   position: absolute;
   top: 440px;
   left: 450px;
   z-index: -1;
}
.almost_img1 {
   position: absolute;
   top: 420px;
   right: 50px;
   z-index: -1;
}
.almost_img2 {
   position: absolute;
   top: 420px;
   left: 250px;
   z-index: -1;
}

/* attributes for the scores page */
.scores {
   width: 98%;
   height: 144px;
   border: solid 1px #9F2936;
   empty-cells: show;
}
.scores-cell {
   width: 25%;
   height: 36px;
   text-align: center;
   border: solid 1px #9F2936;
}

.stpatday {
   font-weight: bold;
   color: green;
}

/* this is for the text in the banner */
.banner {
   vertical-align: text-top;
   width: 50%;
   color: #9F2936;
   font-size: 1000%;
   text-align: center;
}

.c  { font-family: "Book Antiqua"; font-size: x-large; padding: 10px; font-weight: bold; }
#c1  { position: relative; top:  0px; left: 0px; }
#c2  { position: relative; top: -4px; left: 0px; }
#c3  { position: relative; top: -8px; left: 0px; }
#c4  { position: relative; top: -12px; left: 0px; }
#c5  { position: relative; top: -16px; left: 0px; }
#c6  { position: relative; top: -20px; left: 0px; }
#c7  { position: relative; top: -24px; left: 0px; }
#c8  { position: relative; top: -28px; left: 0px; }
#c9  { position: relative; top: -32px; left: 0px; }
#c10 { position: relative; top: -36px; left: 0px; }
#c11 { position: relative; top: -40px; left: 0px; }
#c12 { position: relative; top: -44px; left: 0px; }
#c13 { position: relative; top: -48px; left: 0px; }
#c14 { position: relative; top: -52px; left: 0px; }

.contact {
   font-size: small;
   background-color: #9F2936;
   width: 100%;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-top: 60px;
}

.image {
   background-color: #9F2936;
   border: 4px solid #663333;
   margin-top: 10px;
   padding: 6px;
}

img.sass {
   padding: 0px 0px 140px 0px;
   width: 40%;
   height: 40%;
}

.bbimg {
   border: double 8px #FFC000;
}
.bbcard {
   border: double 8px #FFC000;
   display: block;
   margin-right: auto;
   margin-left: auto;
}

.sponsor {
   font-size: 2em;
   font-family: "algerian";
   border: double #FFC000;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   background-color: #9F2936;
   color: #FFC000;
}

.sponsor_table {
   margin-left: auto;
   margin-right: auto;
   width: 85%;
}

.bcard {
   margin-left: auto;
   margin-right: auto;
   width: 70%;
   text-align: center;
}

.red   { color: red;   }
.black { color: black; }

.pic {
   margin: 10px;
   border: 1px solid #9F2936;
}

/* buttons for all pages */
.btn-group .button {
   display: block;
   padding: 5px 32px;
   font-size: 16px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   outline: none;
   color: white;
   background-color: #9F2936;
   border: none;
   border-radius: 15px;
   box-shadow: 0 5px #663333;
   margin: 20px 0px;
   width: 180px;
}

.btn-group .button:hover {
   background-color: #663333;
   box-shadow: #666;
}

.btn-group .button:active {
   border-color: #9f2936;
   box-shadow: 0 5px #666;
   transform: translateY(4px);
}

li {
   list-style: square inside;
}


/* ================================================================
   MOBILE STYLES  (max-width: 768px)
   ================================================================ */
@media screen and (max-width: 768px) {

  /* --- Prevent any absolute-positioned element from causing overflow --- */
  body {
    overflow-x: hidden;
    /* background-attachment: fixed stutters on iOS Safari; scroll is smoother.
       The dark fallback color (#1a0e06) fills anything the image doesn't cover. */
    background-attachment: scroll;
  }

  /* --- Global horizontal breathing room ---
     All direct-child tds (main layout and scores cells) and common text
     wrappers get a small left/right padding so content never runs to the
     very edge of the phone screen. */
  td, th {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* --- Stack all table elements vertically ---
     th was missing from earlier versions, which left year-header rows
     in the scores tables as cramped inline cells. */
  table, tbody, tr, td, th {
    display: block !important;
    width: 100% !important;
  }

  /* --- Header: shrink font, add horizontal padding, auto height ---
     IMPORTANT: do NOT add white-space: nowrap here. The arc letters
     are flattened to position: static below, so the text wraps
     naturally across two lines inside the taller container.
     Padding keeps the text away from both edges of the banner image. */
  .header {
    font-size: 110% !important;
    height: auto !important;
    min-height: 100px !important;
    padding: 10px 20px !important;
    width: 90% !important;
  white-space: nowrap;
    /* overflow: visible lets the header grow to fit wrapped text */
    overflow: visible !important;
  }

  /* --- Body arc sections ("* Next Monthly SASS Shoot *" etc.) ---
     Now that arc IDs are flattened, these just need reasonable sizing.
     overflow: visible ensures nothing gets clipped. */
  .xxlarge {
    font-size: large !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* --- Hide decorative absolute-positioned background images ---
     Hard pixel offsets (e.g. left: 450px) would push content way past
     the phone screen edge and cause horizontal scrolling. */
  .home_imgL, .home_imgR,
  .about_img1, .about_img2, .about_img3,
  .sassShoot, .briggsdaleshoot,
  .almost_img1, .almost_img2 {
    display: none !important;
  }

  /* --- Navigation buttons: wrap into a compact grid --- */
  .btn-group {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 5px;
    float: none !important;
    position: static !important;
  }

  .btn-group .button {
    width: 140px !important;
    font-size: 13px !important;
    padding: 5px 10px !important;
    margin: 4px 0 !important;
  }

  /* --- Scores tables: remove fixed heights ---
     .scores has height: 144px and .scores-cell has height: 36px on
     desktop — both sized for a 4-column horizontal grid. When cells
     go to display: block at full width those heights clip the content.
     height: auto lets each cell expand to fit its actual content. */
  .scores {
    height: auto !important;
    width: 100% !important;
  }

  .scores-cell {
    height: auto !important;
    width: 100% !important;
    padding: 10px 10px !important;
    text-align: center;
    border-bottom: 2px solid #FFC000 !important;
    margin-bottom: 2px;
  }

  /* --- Bottom contact banner ---
     On desktop this is already "small". On mobile we drop it further
     to x-small so that the three lines ("Questions...", "Comments...",
     "In loving memory...") each fit on one line without wrapping at
     individual words like "Phone" or "Webmaster".
     Horizontal padding keeps text away from screen edges. */
  .contact {
    font-size: x-small !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    line-height: 1.8;
  }

  /* --- General content padding ---
     Text-heavy divs get horizontal padding so prose and labels don't
     run flush to the screen edge. */
  .xlarge, .large, .medium, .small,
  .bold, .golden, .story, .para {
    padding-left: 10px;
    padding-right: 10px;
  }

  .story {
    margin: 0px 10px;
  }

}