/* ==========================================================================
   1. Global Reset & Core Structural Layout
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Roboto", Arial, sans-serif;
    line-height: 1.6;
    color: #3c4043;
    background-color: #d9d6c1; 
    -webkit-font-smoothing: antialiased;
}

div.notice
{
		background-color:#d9d6c1;
	padding:10px;
	border:1px dashed black;
}


.YTVID_SMALL
{
	float:right;
	width:320px;
	height:auto;
	margin:1%;
	border: 3px black solid;

}

li.alternate1
{
	background-color:#d9d6c1;
	padding:5px;
}

li.alternate2
{
	background-color:#c8c5c1;
	padding:5px;
}

ul.no-dec li
{
	list-style-type: none;
	padding:15px;
}

/* ==========================================================================
   2. Cinematic Video Header & Downward Pan (Resting at Top)
   ========================================================================== */
.video-banner-container {
    position: relative;
    width: 100%;
    height: 300px; /* Increased canvas window height to support larger desktop artwork beautifully */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    animation: videoPanInverted 15s linear forwards; 
}

.banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
}

header.banner-content {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* LOGO BOX CONFIGURATION: Upscaled desktop dimensions */
.banner-logo-wrapper {
    margin-bottom: 15px;
    width: 100%;
    max-width: 120px; /* INCREASED: Made slightly larger on desktop monitors */
    display: flex;
    justify-content: center;
}

.banner-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.4)); 
}

header.banner-content h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 3.5rem;
    margin-bottom: 8px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

header.banner-content p {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    font-style: italic;
    color: #f1f3f4;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

@keyframes videoPanInverted {
    0% { object-position: center bottom; }
    100% { object-position: center top; }
}

/* ==========================================================================
   3. Navigation Properties (Khaki Background & Dark Green Text)
   ========================================================================== */
nav {
    background-color: #b1ab83; 
    z-index: 1000;
    position: relative;
    border-bottom: 1px solid #9e9871;
}

.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 15px;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #1b3a1e;
    transition: all 0.3s ease-in-out;
}

nav ul.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul.nav-links li {
    position: relative;
    list-style: none;
}

nav ul.nav-links li a {
    display: block;
    color: #1b3a1e; 
    text-decoration: none;
    padding: 15px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

nav ul.nav-links li a:hover {
    background-color: #1b3a1e; 
    color: #ffffff;
}

nav ul.nav-links li ul {
    position: absolute;
    list-style: none;
    background-color: #b1ab83; 
    min-width: 200px;
    top: 100%;
    left: 0;
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    border: 1px solid #9e9871;
    border-top: none;
    display: block; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
    transition-delay: 0.1s;
}

nav ul.nav-links li ul li {
    width: 100%;
    list-style: none;
}

nav ul.nav-links li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

nav ul.nav-links li ul li a {
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1b3a1e; 
}

nav ul.nav-links li ul li a:hover {
    background-color: #1b3a1e;
    color: #ffffff;
}

/* ==========================================================================
   4. Fluid Responsive Video Embed Architecture (16:9 Aspect Ratio)
   ========================================================================== */
.video-embed-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; 
    margin: 20px 0;
    clear: both;
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ==========================================================================
   5. Page Layout Core Containers
   ========================================================================== */
.container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

main {
    background-color: #ffffff; 
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

main h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    margin-bottom: 10px;
        margin-top: 20px;

    font-size: 1.8rem; 
}

main h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    color: #1b3a1e;
    margin-bottom: 10px;
        margin-top: 20px;
    font-size: 1.6rem; 
}

main p {
    margin-bottom: 18px;
    color: #3c4043;
}

main ul {
    margin-left: 20px;
    margin-bottom: 18px;
}
main ul li {
    margin-bottom: 6px;
}

footer {
    text-align: center;
    padding: 40px 20px;
    color: #5f6368;
    font-size: 0.85rem;
}


img.responsive
{
	width:75%;
	height:auto;
	margin:3%;
}

img.responsive-big
{
	width:80%;
	height:auto;
	margin:2%;
}


img.responsive2
{
	width:50%;
	height:auto;
	margin:2%;
}


img.right-inline-float
{
	float:right;
	width:50%;
	margin:2%;
}

img.left-inline-float
{
	float:left;
	width:50%;
	margin:2%;
}


img.right-inline-float-small
{
	float:right;
	width:20%;
	margin:2%;
}



/* VIDEOS EMBED  */


  /* Base Layout Container - Centered and Bound to Parent Element width */
  .video-grid {
    display: grid;
    /* Changed minmax from 320px to 280px to safely prevent mobile overflow */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto; /* Centers the whole block perfectly on large viewports */
    box-sizing: border-box;
  }
  
  .video-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 100%; /* Ensures total boundary compliance */
    box-sizing: border-box;
  }
  
  
  .video-card-larger {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      width: 80%; /* Ensures total boundary compliance */
      box-sizing: border-box;
      float:right
  }
  
  
  .video-card h3 {
    margin: 0;
    padding: 15px;
    font-size: 1rem;
    color: #333;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
  }
  
  /* Apply Fluid Scaling Rules to All Videos and Embedded Objects */
  .video-card iframe,
  .video-card .fb-video {
    display: block;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    border: none;
  }

  /* Target Facebook internal plugin structure specifically to scale correctly */
  .video-card .fb-video span, 
  .video-card .fb-video iframe {
    width: 100% !important;
    height: 100% !important;
  }
  
  .section-title {
    font-size: 1.5rem;
    color: #1b5e20;
    border-bottom: 2px solid #81c784;
    padding-bottom: 10px;
    margin: 30px 20px 10px;
  }
  
  .instagram-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }










/* ==========================================================================
   6. Mobile & Desktop Responsive Queries
   ========================================================================== */
@media (min-width: 769px) {
    .video-embed-wrapper {
        float: right;
        width: 45%; 
        padding-bottom: 25.31%; 
        margin: 5px 0 20px 25px;
    }
}

@media (max-width: 768px) {

    /* MOBILE REPOSITIONING FIXED HERE */
    
    main h2 {
          font-size: 1.3rem; 
}
   
   
       main h3 {
             font-size: 1.1rem; 
}


    .container {
         padding: 0 15px;
    }
    
    main {
          padding: 15px;
}
    
    .YTVID_SMALL
    	{
    		
    		float:none;
    		width:260px;
    		height:auto;
    		margin:0 auto;
    		margin-bottom:3px;
		display:block;
		}
    
 	img.responsive,img.responsive2
	{
		width:75%;
		max-width:300px;
		float:none;
	}
	
	img.right-inline-float
		{
			width:90%;
			float:none;
		}
		img.left-inline-float
		{
			width:90%;
			float:none;
		}

     
    .video-banner-container {
        height: auto; /* Switches container from absolute bounds to organic dynamic space */
        min-height: 280px; /* Provides fixed structural room for stacked layers */
        padding: 30px 10px 20px 10px; /* FIXED: Adds top padding to prevent emblem overflow */
    }
    
    header.banner-content {
        padding: 0; /* Lets grid alignment structures work natively */
    }
    
    .banner-logo-wrapper {
        max-width: 75px; /* Safely shrinks asset limits to accommodate phone width grids */
        margin-bottom: 10px;
    }

    header.banner-content h1 {
        font-size: 1.95rem; /* Slightly balanced text output bounds */
    }
    header.banner-content p {
        font-size: 1.05rem;
    }

    .banner-video {
        animation: none !important; 
        object-position: center center !important;
    }
    
    .video-embed-wrapper {
        float: none;
        width: 100%;
        padding-bottom: 56.25%;
        margin: 20px 0;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    nav ul.nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #b1ab83;
        border-top: 1px solid #9e9871;
    }

    nav ul.nav-links.active {
        display: flex;
    }

    nav ul.nav-links li {
        width: 100%;
    }

    nav ul.nav-links li a {
        padding: 15px 20px;
        width: 100%;
        border-bottom: 1px solid #9e9871;
    }

    nav ul.nav-links li ul {
        position: static;
        opacity: 0;
        visibility: hidden;
        display: none; 
        background-color: #a39d76; 
        padding-left: 20px;
        box-shadow: none;
        border: none;
        transform: none;
    }

    nav ul.nav-links li:hover ul,
    nav ul.nav-links li:focus-within ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}