/* ============================================
   GLOBAL BASE STYLES 
   using existing styles checked and improved by AI
   Should look the same and work better especially on mobiles
   AI called it 
      Rod’s Modernised, Mobile Safe CSS (2025/26 Edition)
   ============================================ */

body {
  background-color: cornsilk;
  font-family: Arial, Georgia, Times, serif;
  color: darkblue;
  font-size: 100%;
  border: 10px ridge darkgoldenrod;
  padding: 10px 20px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
/* above - box-sizing: border-box gives full width with no extra padding  
and predictable sizing 
with no need for bottom scroll bar*/


/* Make all images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Top HEADER SECTION - 28th December 2025
   ============================================ */

/* Full-width top section */
.top-section {
    width: 100%;
    box-sizing: border-box;
    background-color:darkslategray;
    color: darkgoldenrod;
    margin: 0 auto;
    padding: 0;
}

/* Make the ULs inside the top section stretch full width */
.top-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Three-column header layout */
.three-cols ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.three-cols li {
    flex: 1;
    text-align: center;
}

/* Navigation bar layout */
.nav-bar ul {
    text-align: center;
}

.nav-bar li.c {
    display: inline-block;
    margin: 5px 8px;
}


/* ============================================
   MAIN CONTENT SECTION
   ============================================ */

/* Keep your existing .main exactly as it is */
div.main {
  font-family: arial, Georgia,Times, serif;
  /* border: 10px ridge darkgoldenrod; */
  border: 2px ridge rgb(26, 12, 216);
  padding: 3px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}



li.a, li.b {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding: 5px;
}

li.a { width: 25%; }
li.b { width: 35%; }

/* Navigation buttons */
li.c {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  color: darkgoldenrod;
  padding: 8px 0;
  width: 100%;
  max-width: 200px;
  border: 4px ridge darkgoldenrod;
  margin: 5px;
}

/* Mobile stacking */
@media (max-width: 600px) {
  li.a, li.b, li.c {
    width: 100% !important;
    display: block;
  }
}
/* ============================================
   Google desired Page HEADINGS
   ============================================ */
.h1google {
      text-align: center;
      color: green;
      font-size: 40px;
  }


/* ============================================
   HORIZONTAL RULES
   ============================================ */

hr.std { border: 3px solid red; }
hr.standard { border: 4px solid darkgreen; }
hr.padded { border: 5px solid black; padding: 0 5px; }

hr.red-narrow { border-top: 2px solid red; }
hr.red-dashed { border-top: 1px dashed red; }
hr.red-dotted { border-top: 1px dotted red; }
hr.red-medium { border-top: 5px solid red; }

hr.green-big { border: 10px solid darkgreen; border-radius: 4px; }
hr.green-medium { border-top: 5px solid darkgreen; }
hr.green-narrow { border-top: 3px solid darkgreen; }

hr.gold-big { border: 10px solid darkgoldenrod; border-radius: 4px; }
hr.gold-medium { border-top: 5px solid darkgoldenrod; }
hr.gold-narrow { border-top: 3px solid darkgoldenrod; }

/* Highlights */
.highlight-red { background-color: rgb(255, 0, 55); }
.highlight-gold { background-color: gold; }
.highlight-green { background-color: greenyellow; }

/* ============================================
   TABLES (GLOBAL RESPONSIVE FIX)
   ============================================ */

table {
  width: 100% !important;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

td, th {
  word-wrap: break-word;
  padding: 6px;
}

/* ============================================
   IMAGE CLASSES (SAFE, RESPONSIVE)
   ============================================ */

      img.advert480,
      img.advert640,
      img.advert720 {
        height: auto !important;
      }


        /* image for body top header section image height auto and set max width */
      img.a {    
        display:block;
        margin-left:auto;
        margin-right:auto;
        top:3px;
        width:200px;
        height: auto !important;
      }

      /* image sizes for HeraldsHome3 ordering */
      img.herald-post {    
        display:block;
        width: 70px;
        margin-left:auto;
        margin-right:auto;
        top:5px;
        height:auto;
      }
      
      img.herald-download {    
        display:block;
        width: 100px;
        margin-left:auto;
        margin-right:auto;
        top:5px;
        height: auto !important;
      }

      /* image for index.html herald and video display for */
      img.herald-index {    
          display:block;
          width: 120px;
          margin-left:auto;
          margin-right:auto;
          top:5px;
          height: auto
        }

        
      img.front220 {    
          display:block;
          width: auto;
          margin-left:10px;
          margin-right:10px;
          top:5px;
          height: auto
        }

/* ============================================
   TEXT STYLES
   ============================================ */
        p.xlarge { font-size: 30px; padding: 10px}
        p.large { font-size: 20px; padding: 10px}
        p.medium { font-size: 15px; padding: 5px}
        p.small { font-size: 12px; padding: 10px; }
        p.tiny { font-size: 10px}
        p.front { font-size: 20px; padding: 10px}

        p.xlargeb { font-size: 30px; font-weight: bold; padding: 10px}
        p.largeb { font-size: 20px; font-weight: bold; padding: 10px}
        p.mediumb { font-size: 15px; font-weight: bold; padding: 10px}
        p.smallb { font-size: 12px; font-weight: bold; padding: 10px }
        p.tinyb { font-size: 10px; font-weight: bold;}
        
        p.mediumgreencenter { text-align: center; color: green; font-size: 20px; padding: 5px; }

        span.sub { font-size: 12px; }

        .largedarkblue { text-align: center; color: darkblue; font-size: 20px; }
        .mediumdarkblue { text-align: center; color: darkblue; font-size: 15px; }
        .largeredcenter { text-align: center; color: red; font-size: 20px; }

        .mediumgreen { font-size: 20px; color: green; padding: 15px; }
        .mediumgreencenter { text-align: center; color: green; font-size: 20px; padding: 15px; }

        p.largerib { font-style: italic; font-weight: bold; font-size: larger; }
        p.x-largeib { font-style: italic; font-weight: bold; font-size: x-large; }
        p.largeib { font-style: italic; font-weight: bold; font-size: large; }
        /* p.mediumib { font-style: italic; font-weight: bold; font-size: medium; } */

        .xlargebluecenter { text-align: center; color: blue; font-size: 30px; }
        .largebluecenter { text-align: center; color: blue; font-size: 20px; }
        .mediumbluecenter { text-align: center; color: blue; font-size: 15px; }
        .smallluecenter { text-align: center; color: blue; font-size: 12px; }
        .largeredcenter { text-align: center; color: red; font-size: 20px; }


            /*         formatting for GospelDetail3.html */
            .gospelh1 {
              color:darkgreen;
                        font-size:2.5em;
            }
            .gospelh2 {
              color:darkgreen;
                        font-size:1.875em;
            }
            .gospelh3 {
              color:darkred;
                        font-size:1.5em;
            }
            .gospelh4 {
              color:darkblue;
                        font-size:1.0em;
            }
            .gospelh5 {
              color:mediumslateblue;
                        font-size:0.75em;
            }
            
            ul.ulsquare {
              list-style-type:square;
            }
            
            ul.ulcircle {
              list-style-type:circle;
            }
            
            ul.ulroman {
                list-style-type:upper-roman;
            } 
	     
            ul.ulnumber {
                list-style-type:decimal;
            }
            
            /*       used for index of details        */
                     div.wheat-xlarge {
              background:wheat;
              font-size:30px;
              margin-left:20px;
            }
            div.wheat-large {
              background:wheat;
              font-size:20px;
              margin-left:20px;
            }
        
            div.wheat-medium {
              background:wheat;
              color:red;
              font-size:15px;
              margin-left:20px;
            }
                       
            div.wheat-small {
              background:wheat;
              font-size:12px;
              margin-left:100px;
            }

            .footnote  {
              color:darkslateblue;
              font-size:15px;
              margin-left:50px;
            }

            /*  Herald page table settings  - also uses address as above    */

          td.hrld60 { 
            border:5px ridge darkgoldenrod;
            border-radius: 10px;
            text-align:center;
            width:60%;
          }
          
        td.hrld70 { 
            text-align:center;
            border:2px ridge darkblue;
            width:70%;
          }
          
          td.hrld20 { 
            border:5px ridge darkgoldenrod;
            border-radius: 10px;
            text-align:center;
            width:auto;
          }
    
      
          /* width below was 90% */
          
          table.front {
            width:auto;
            border:4px ridge darkgoldenrod;
            border-radius: 5px;
          }
          
        td.front { 
            border:2px ridge darkblue;
            text-align:center;
            max-width:50%;
            padding: 20px;
          }
/* ============================================
   LINKS
   ============================================ */

        a:link { color: green; background: transparent; text-decoration: none; }
        a:visited { color: goldenrod; background: yellow; text-decoration: none; }
        a:hover { color: firebrick; background: lightgreen; text-decoration: underline; }
        a:active { color: coral; background: transparent; text-decoration: underline; }
        /* Header link style */
        a.heads:link,
        a.heads:visited {
          color: darkgoldenrod;
          background-color: darkslategray;
          text-decoration: none;
        }

        a.heads:hover {
          color: gold;
          background-color: transparent;
          text-decoration: underline;
        }

/* ============================================
   AUDIO / VIDEO / ADVERT SECTIONS
   ============================================ */

    div.audio {
      color: gold;
      font-size: 25px;
      background-color: darkslategrey;
      border-radius: 10px;
      padding: 15px 50px;
    }

    div.sectionQuote {
      color: gold;
      font-size: 20px;
      background-color: darkslategrey;
      border-radius: 10px;
      padding: 10px 20px;
    }

    table.audio {
      font-size: 20px;
      background-color: #F7F8E0;
      border: 5px ridge darkgoldenrod;
      border-radius: 10px;
      padding: 10px;
    }

    td.audioname,
    td.audioprompt {
      border: 2px ridge darkblue;
      border-radius: 10px;
      padding: 10px;
    }

    .advertborder {
      border: 5px ridge gold;
    }

      td.audioreading {
          width:auto;
          padding:10px;
          font-size: 20px;
      }

        img.advert,
        img.advert40pc,
        img.advert90pc {
          max-width: 100%;
          height: auto;
        }

        /*  VisualHome3 -  video page    AI    */
        /* Container table for each video block */
        table.vid {
          width: 100%;
          max-width: 900px;     /* matches your .main width */
          border-collapse: separate;
          border-spacing: 0;
          margin: 20px 0;
          background: #f8faff;  /* subtle background */
          border: 2px solid #003366;   /* dark blue border */
          border-radius: 12px;
          overflow: hidden;     /* ensures rounded corners work */
        }

        /* This makes the video full width, visually breaking out of .main. */
        .video-breakout {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            padding: 20px 0;
            background: #FFF8DC;
          }

          .video-wrapper {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 20px auto;
            
  border: 10px ridge rgb(28, 11, 184);
            border-radius: 12px;
            overflow: hidden;
          }

          /* Make the video fully responsive */
          .video-wrapper video {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
          }

          /* Fullscreen button */
          .fullscreen-btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, 0.55);
            color: white;
            border: none;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 20px;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: background 0.2s ease;
          }

          .fullscreen-btn:hover {
            background: rgba(0, 0, 0, 0.75);
          }

          /* Larger tap target for mobile */
          @media (max-width: 600px) {
            .fullscreen-btn {
              padding: 10px 12px;
              font-size: 22px;
            }
        }

      


        /* Row styling */
        table.vid tr {
          display: flex;        /* forces side‑by‑side layout */
          flex-wrap: wrap;      /* allows stacking on small screens */
        }

        /* Left and right cells */
        table.vid td {
          flex: 1;
          padding: 12px;
          vertical-align: top;
          box-sizing: border-box;
        }

        /* Left cell image */
        img.vidimg {
          width: 100%;
          max-width: 420px;     /* keeps image reasonable */
          height: auto;
          border-radius: 8px;
          display: block;
        }

        /* Optional: tighten spacing on small screens */
        @media (max-width: 600px) {
          table.vid tr {
            flex-direction: column;
          }

          table.vid td {
            padding: 10px;
          }

          img.vidimg {
            max-width: 100%;
          }
        }


        /*  HeraldHome3html page    orig    */

        img.herald-download {    
        display:block;
        width: 100px;
        margin-left:auto;
        margin-right:auto;
        top:5px;
        height: auto !important;
      }

    /* ============================================
      FORMS
      ============================================ */

    form {
      border: 2px solid goldenrod;
      padding: 10px;
      border-radius: 5px;
    }