/*
Theme Name: Maldon Drama Classic
Theme URI: https://idiculous.xyz/
Author: Martin Terry
Version: 1.0
Description: Classic theme version of Maldon Drama Group site.
*/

html, body {background:#dfb6be;
		font-family: Montserrat,sans-serif;
		}
		
		
html, body, body * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    -moz-user-select: text !important;
}
		


		
		p {margin-bottom:20px}
		
		.m-footer{
			padding:20px;
			text-align:center;
			min-height:50px;
			color: #ffffff;
			background-color: #333333;
		}
		
		
		
		.alt-section{
			
			background-color:#59427a;
			color:#d5c7e8;
			height: auto
		}
		
		.alt-section a{
			color:#d5c7e8;
			text-decoration:underline
		}
		
		.m-about{
			background-color:#59427a;
			color:#d5c7e8
		}
		
		.m-content-wrapper {
			max-width: 1200px;   /* sweet spot for desktop */
			margin: 0 auto;      /* centre it */
			padding: 0 20px;     /* breathing room */
		}

		
		
		
		.m-navbar{
			background:#000
		}
		
		.m-navbar img {height:80px}
		
		.hero-section{
			margin-top:80px
		}
		
		.hero-right{
			font-size: 1.25rem;
			padding-top:30px;
			padding-left:50px
		}
		
		.hero-right button{
			margin-top:40px
		}
		
		.m-text-1 {
			font-size: 4.3rem;
			margin:0
		}
		.m-text-2 {
			font-size: 3rem;
			margin:0 0 20px 0
		}
		.m-text-3 {
			font-size: 2.5rem;
			margin:0 0 20px 0
		}
		
		.hero-section img.m-image-1 {
    width: auto;
    max-width: 100%;
    height: auto;
}


		.m-image-round {
			
		}
		
		.m-radius-20 {
			border-radius:20px
		}
		
		.m-container-layout{
			margin: -667px 0 390px auto ;
		}
		
		
		.m-prev-show{
			margin:20px;
			background-color:#fff;
			box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
		}
		
		.m-full-button{
			width:100%;
			background:#59427a;
			color:#fff
		}
		
		/* phone portrait */
		@media only screen and (max-width: 600px) {
			.m-image-1{
				
			}

		}
		/* phone landscape */
		@media only screen and (min-width: 600px) {
			
			.m-image-1{
				
			}
		}
		/* tablet portrait */
		@media only screen and (min-width: 768px) {
			
			.m-image-1{
				
			}
			
		}
		/* tablet landscape */
		@media only screen and (min-width: 992px) {
			
			.hero-right{
				margin-top:0px;
				padding-top:0px;
			}
			
			.m-image-1{
				max-height:550px;
				
			}
			
			.navbar, .navbar-end, .navbar-menu, .navbar-start {
				align-items: stretch;
				display: block;
			}
			
			.rp{
				padding-right:60px;
			}
			
		}
		
		/* desktop */
		@media only screen and (min-width: 1200px) {
			
			.m-image-1{
				
			}
		}
		
		h2 {
			font-size: 1.875rem;
			font-weight:bold
		}
		
		
		#form_comment{
			display:none;
		}

/* Allow image column to grow */
.alt-section .columns {
    align-items: flex-start !important;
}

/* Allow columns to expand naturally */
.alt-section .column {
    height: auto !important;
}

/* Ensure slideshow container is not squashed by flex */
.news-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.news-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    overflow: hidden;
}

.news-slide.active,
.news-slide.active-temp {
    opacity: 1;
}

.news-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 20px
}

.hero-section .columns {
    align-items: flex-start !important;
}

.all_productions{
  position: relative;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  max-width:600px
}
  
  

.all_productions_img{
	max-height:600px;
	
	object-fit:contain;
	border:10px solid #fff;
	border-radius:10px
	
}

.all_productions.box{
	background:none;
	box-shadow:none
}

.all_productions_text {

	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	}



/* production page */
.production-gallery .image {
    height: 180px;          /* uniform height */
    overflow: hidden;       /* hide overflow */
    border-radius: 10px;    /* match your theme */
}

.production-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* crop nicely */
    display: block;
}

.m-page-section {
    padding-top: 100px;

}

/* news page */
.news-top{
	padding-top:50px
}

.news-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* space between thumbnails */
    justify-content: center;
}

.news-gallery .column {
    flex: 0 0 calc(40% - 1rem); /* two per row */
    max-width: calc(40% - 1rem);
}

.news-gallery .image {
    aspect-ratio: 1 / 1; /* makes them square */
    overflow: hidden;
    border-radius: 10px;
}

.news-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops nicely */
    display: block;
}

.news-gallery a {
    position: relative;
    display: block;
    transition: transform 0.2s ease;
}

.news-gallery a:hover {
    transform: scale(1.03);
}

.news-gallery a::after {
    content: "🔍";
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.news-gallery a:hover::after {
    opacity: 0.8;
}


.m-natural-button {
background-color: #f7f7f7;
    border: 1px solid #ddd;
	color:#59427a !important;
    padding: 0.4em 0.9em;
    font-size: 0.9rem;
    border-radius: 8px;
    font-weight: 500;
    display: inline-block;
    margin-right: 0.6rem; /* spacing between buttons */
    transition: background 0.2s ease, border-color 0.2s;
	text-decoration: none !important;
}

.m-natural-button:hover {
	text-decoration: underline !important;
    border-color: #ccc;
}

.mdg-subnav {
    background: #000000;          /* black background */
    border-bottom: 1px solid #000000;
    text-align: center;
    font-size: 0.75rem;        /* sits under fixed logo bar */
	
}

.mdg-subnav a {
    color: #ffffff;               /* white text */
    text-decoration: none;
    margin: 0 0.75rem;
    font-weight: 500;
}

.mdg-subnav a:hover {
    text-decoration: underline;
}


