@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,300;1,400;1,700&display=swap');

BODY {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202403.jpg) no-repeat;
background-position:center top;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
font-family: 'Lato', sans-serif;
}

BODY.home{
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202402.jpg) no-repeat;background-position:center top;
}

BODY.inner {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202403.jpg) no-repeat;
background-position:center top;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
font-family: 'Sans Pro', sans-serif;
}

BODY.inner1 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202403.jpg) no-repeat;
background-position:center top;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
font-family: 'Lato', sans-serif;
}

BODY.inner2 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202403.jpg) no-repeat;
background-position:center top;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
font-family: 'Lato', sans-serif;
}
BODY.inner3 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202403.jpg) no-repeat;
background-position:center top;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
font-family: 'Lato', sans-serif;
}
BODY.inner4 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck202403.jpg) no-repeat;
background-position:center top;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
font-family: 'Lato', sans-serif;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {overflow-y: scroll;} 

IMG.logo{
float:right;
}

IMG.fullscreenall{
width:100%;
}

.textblock{
margin-top:242px;
width:640px;
background:#4f5b46;
padding:11px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

.textblocklarge{
margin-top:242px;
width:980px;
background:#111;
background:#162501;
padding:11px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

.council{
border-bottom:#eee 1px solid;
}

.councilmember{
float:left;
margin-right:11px;
margin-bottom:11px;
}

.navbar{
width:100%;
background:#172601;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}

.floatleftbox{
float:left;
min-height:444px;
}


.bodyboxnoop{
text-align:left;
width:85%;
background:#3e3a47;
border:0px solid black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top:20px;
padding:11px;
margin-left:5px;
margin-bottom:50px;
opacity:0.9;
filter:alpha(opacity=90);
}

IMG.gallery{
height:192px;
margin:3px;
float:left;
margin:7px;
}


.grass{
background:transparent;
min-height:550px;
width:100%;
background-position:center top; 
}

.newcol{
background:transparent;
min-height:393px;
width:399px;
margin:11px;
text-align:center;
margin-right:auto;
margin-left:auto;
padding:11px;
}


.map{
margin-right:auto;
margin-left:auto;
border-radius: 15px;
padding:11px;
}

.smallboxnew{
float:left;
margin:11px;
background:#eee;

}

.sky{
box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.3);
background-position:center top; 
min-height:400px;
width:100%;
}

.grassbox{
position:relative; left:20px; top: 130px; 
width:50%; 
border-radius: 5px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
background:#fff;
padding:12px;
}

.bigbox{
border:0px #4e684b solid;
padding:3px;
margin:2px;
width:451px;
float:left;
}

.topnewbanner{
margin:0px;
padding:0px;
background:#f1f1f1;
width:100%;
position:fixed;
top: 0;
}

.innertopnewbanner{
  width: 960px ;
  margin-left: auto ;
  margin-right: auto ;
}

.main {
margin:11px;
  width: 960px ;
  margin-left: auto ;
  margin-right: auto ;
padding:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
text-align:center;
margin-bottom:15px;
padding:12px;
margin-top:95px;
background:transparent;
min-height:1066px;
}

.maindark {
margin:11px;
  width: 960px ;
  margin-left: auto ;
  margin-right: auto ;
padding:0px;
background:#fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-border-top-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
-khtml-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
text-align:center;
margin-bottom:15px;
border:#000000 1px solid;
border-radius: 5px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
opacity:0.9;
filter:alpha(opacity=90);
padding:12px;
}

.nav{
background:transparent;
margin-left:221px;
}

.header{
background:#fff;
margin:0px;
width:999px;
margin-right:auto;
margin-left:auto;
}

.footer{background:#606a52;width:100%;}

.footerbox{
  width: 960px ;
background:#606a52;
border:0px solid black;
margin-top:10px;
padding:0px;
  margin-left: auto ;
  margin-right: auto ;
font-size:15px;
padding:12px;
padding-top:72px;
}
	
hr.topbar{
    border: 0;
    height: 1px;
    background: #3a5997;
    background-image: -webkit-linear-gradient(left, #ccc, #3a5997, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #3a5997, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #3a5997, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #3a5997, #ccc); 
}


H1{
font-family: "open sans", sans-serif;
color: #444;
margin: 1px;
padding: 1px;
font-size: 26px;
letter-spacing: 1px;
font-weight: normal;
text-align:left;
text-shadow:0px 0px 0px #518adb;
padding-top:2px;
font-variant: small-caps;
background:transparent url(https://www.llanidloestowncouncil.gov.wales/gifs/h1.png) no-repeat;
padding-left:60px;
min-height:55px;
}


H2{
font-family: "Lato", sans-serif;
color: #eee;
margin: 2px;
padding: 2px;
font-size: 22px;
letter-spacing: 1px;
font-weight: normal;
text-align:left;
text-shadow:0px 0px 0px #518adb;
padding-top:2px;
margin-bottom:2px;
margin-left:1px;
background:transparent url(https://www.llanidloestowncouncil.gov.wales/gifs/LTClogo.png) no-repeat;
min-height:105px;
padding-left:125px;
}

H2.white{
font-family: Lato,san-serif;
color: #fff;
margin: 10px;
padding: 11px;
font-size: 21px;
letter-spacing: 1px;
font-weight: bold;
text-align:left;
text-shadow:0px 0px 0px #518adb;
padding-top:2px;
margin-bottom:7px;
margin-left:11px;
border-bottom:#fff 1px solid;
}

H2.green{
font-family: Lato,sans-serif;
font-size:29px;
color:#fff;
text-align:left;
margin-left:335px;
padding-top:34px;
text-shadow:1px 1px 0px #111;
}

.booknow{
text-align:left;
margin-left:335px;
padding-top:23px;
}



H3{
font-family: Lato,sans-serif;
color: #eee;

margin: 10px 10px 2px 2px;

padding: 11px;

font-size: 17px;

letter-spacing: 1px;

font-weight: normal;

text-align:left;

text-shadow:0px 0px 0px #518adb;
text-decoration:underline;
}

.footer{
background:#606a52;
width:100%;
margin:0px;
padding-top:10px;
font-size:15px;
border-top:0px #999999 solid;
}

.moreinfo{
background:#a1dba5;
width:100%;
margin:0px;
padding-top:10px;
font-size:15px;
border-top:0px #999999 solid;
border-radius: 15px;
}

.smallbox{
border:1px #1e281b solid;
padding:11px;
margin:1px;
float:left;
background: rgba(210,255,82,1);
background: -moz-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,1)), color-stop(100%, rgba(145,232,66,1)));
background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
background: -o-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
background: -ms-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=1 );
}


.smallboxnew{
padding:5px;
margin:1px;
float:left;
}

P.dark{
color:#444;
font-family: "Lato", Arial, Verdana, Helvetica, sans-serif;
font-weight:bold;
margin: 0px;
letter-spacing:0.5px;
font-size:15px;
margin:0px;
line-height:2;
text-align:left;
}


P{
color:#fff;
font-family: "Quattrocento Sans", Arial, Verdana, Helvetica, sans-serif;
font-weight:400;
margin: 0px;
letter-spacing:0.5px;
font-size:17px;
margin:0px;
line-height:2;
text-align:left;
margin-left:12px;
}

P.tag{
font-family: 'Satisfy', cursive;
font-size:24px;
color:#333;
font-weight:400;
color:#fff;
}

P.tag2{
font-family: 'Satisfy', cursive;
font-size:24px;
color:#222;
font-weight:400;
margin-left:335px;
margin-top:33px;
}

LI{
color:#fff;
font-family: "Quattrocento Sans", Arial, Verdana, Helvetica, sans-serif;
font-weight:400;
margin: 0px;
letter-spacing:0.5px;
font-size:16px;
margin:0px;
line-height:2;
text-align:left;
margin-left:12px;
text-align:left;
list-style-type: disc;
padding-left:15px;
padding-right:15px;
list-style-image:url(../gifs/bullet.png);
}

UL{padding-left:11px;margin-left:11px;}

a:visited{
text-decoration:none;
color:#fff;
padding:4px;
}

a:link{
text-decoration:none;
color:#fff;
padding:4px;
}

a:hover{
text-decoration:underline;
color:#fff;
padding:4px;
}

a:active{
text-decoration:none;
color:#fff;
background:#000;
padding:4px;
}

 .largeselect { 
    border: 1px solid #c4c4c4; 
    width: 300px; 
    font-size: 13px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.largeselect:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 


 .select { 
    border: 1px solid #c4c4c4; 
    width: 300px; 
    font-size: 13px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.select:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 


  .smallselect { 
    border: 1px solid #c4c4c4; 
    width: 140px; 
    font-size: 13px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.smallselect:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

.button {
  background: #ffffff;
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #111;
  font-size: 16px;
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  border:0px;
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
}

.button:hover {
  background: #aaa;
  background-image: -webkit-linear-gradient(top, #aaa, #ededed);
  background-image: -moz-linear-gradient(top, #aaa, #ededed);
  background-image: -ms-linear-gradient(top, #aaa, #ededed);
  background-image: -o-linear-gradient(top, #aaa, #ededed);
  background-image: linear-gradient(to bottom, #aaa, #ededed);
  text-decoration: none;
  cursor:pointer;
}




IMG.left{
float:left;
padding:5px;
}

IMG.right{
float:right;
padding:5px;
}

P.clear{
clear:both;
}
P.clearpc{
clear:both;
}


.whiteboxtransparent{
min-height:584px;
width:991px;
margin-right:auto;
margin-left:auto;
padding:1px;
background:transparent;
padding:11px;
}


.whitebox{
min-height:474px;
width:991px;
margin-right:auto;
margin-left:auto;
padding:1px;
background:#e5d9d9;
padding:11px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}

.logobox{
text-align:center;
background:#fff;
}

IMG.logoboxes{
width:129px;
margin:11px;
}

IMG.laura{
float:right;
}

.newsletterbox{
width:45%;
float:left;
padding:11px;
}

P.navigation{text-align:center;color:#444;}



@media only screen and (min-width : 800px) and (max-width : 999px) {

.innertopnewbanner{width:100%;}
.topnewbanner{
width:100%;
}
.whitebox{width:90%;}
.grassbox{width:90%;}
.header{width:90%;}
.footerbox{width:90%;}
.main{width:768px;margin-right:auto;margin-left:auto;}
P.top{width:100%;}
.homebox{width:600px;}
.bodybox{width:90%;}
.bigbodybox{width:90%;}
.bigbodyboxnoop{width:90%;}
.homeboxsummer{margin:0px;}
.select{width:90%;}
.largeselect{width:90%;}
.subbox{width:90%;}
.narrowbox{width:80%;}
H2{font-size:21px;text-align:center;}
.bigbox{width:42%;}
.newcol{width:90%;}
.textblocklarge{width:90%;}

P.clearpc{
clear:none;
}

}

@media only screen and (max-width : 799px) {

BODY.home{
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck2024mob.jpg) no-repeat;background-position:center top;
}

P.clearpc{
clear:none;
}

.innertopnewbanner{width:100%;}

BODY {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck999-4-2.jpg) no-repeat;
background-position:center top;
}

BODY.inner1 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck999-4-2.jpg) no-repeat;
background-position:center top;
}
BODY.inner2 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck999-4-2.jpg) no-repeat;
background-position:center top;
}
BODY.inner3 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck999-4-2.jpg) no-repeat;
background-position:center top;
}
BODY.inner4 {
background:#99a28c url(https://www.llanidloestowncouncil.gov.wales/gifs/bck999-4-2.jpg) no-repeat;
background-position:center top;
}

.newcol{
width:90%;
}

whiteboxtransparent{
width:95%;
}

.topnewbanner{
width:90%;
}

P{
line-height:2;
}

.newsletterbox{
width:90%;
float:none;
}


IMG.gallery{
height:auto;
width:90%;
margin:3px;
float:none;
}

IMG.laura{
float:none;
height:121px;
}


IMG.logo{
width:95%;
float:none;
margin-right:9px;
}

.newcol{
width:90%;
min-height:13px;
}
IMG.fullscreen{width:100%;}
.bigbox{width:95%;float:none;}
.whitebox{width:90%;}
H2.green{
font-family: "Lato","arial narrowxx", "arial","helvetica",sans-serif;
font-size:23px;
color:#fff;
text-align:left;
margin-left:15px;
padding-top:43px;
}
.booknow{
margin-left:15px;
}
P.tag{
margin-left:15px;
font-size:17px;
}
P.tag2{
margin-left:15px;
}
.grassbox{width:100%;
position:relative; left:1px; top: 13px; }
.footerbox{width:90%;}
.main{width:90%;
min-height:566px;
margin-top:5px;}
P.top{width:100%;}
.homebox{width:90%;}
.header{width:90%;}
.bodybox{width:90%;}
.bigbodybox{width:90%;}
.bigbodyboxnoop{width:90%;}
.homeboxsummer{margin:0px;}
.select{width:90%;}
.largeselect{width:90%;}
.subbox{width:90%;}
.narrowbox{width:80%;}
H1{font-size:23px;letter-spacing:0em;text-align:center;}
H2{font-size:19px;text-align:center;}
P.navigation{text-align:center;}
.textblock{width:90%;margin-top:322px;}
.textblocklarge{width:90%;margin-top:322px;}
}


/* =========================
   Llanidloes TLC — polish overrides
   Paste these at the END of 2024.css
   ========================= */

/* Theme tokens */
:root{
  --bg: #99a28c;
  --ink: #0f172a;              /* deep slate for body copy where needed */
  --panel: #162501;            /* existing dark green */
  --panel-ink: #f1f5f9;        /* off-white for contrast on dark panels */
  --accent: #8fb36e;           /* soft green accent */
  --accent-ink: #0f1b0f;       /* legible on accent areas */
  --muted: #e7ebdf;
  --header: #172601f2;         /* slightly translucent */
  --shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Use a consistent container instead of hard 960px everywhere */
.innertopnewbanner,
.main,
.footerbox,
.whitebox,
.whiteboxtransparent {
  width: min(1080px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Global type polish */
body, BODY, BODY.inner, BODY.inner1, BODY.inner2, BODY.inner3, BODY.inner4 {
  font-size: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.2px;
}

/* Headings – cleaner, more legible, responsive sizes */
h1, H1 {
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-variant: normal !important;
  letter-spacing: .5px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.4vw + 8px, 32px) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  background: none !important;      /* remove background image behind text */
  padding-left: 0 !important;
  min-height: auto !important;
  margin: 0 !important;
}

h2, H2 {
  background: none !important;      /* remove big logo-as-bg */
  color: var(--panel-ink) !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 2vw + 8px, 26px) !important;
  margin: 0 0 .25rem 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
}

h3, H3 {
  color: #e8f1e2 !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 1.5vw + 8px, 22px) !important;
  text-decoration: none !important;
  margin: 1rem 0 .25rem 0 !important;
  padding: 0 !important;
}

/* Body text */
p, P, li, LI {
  color: #f6fff2 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  margin-left: 0 !important; /* remove hard left indent to align nicely */
}

/* Links – improve affordance */
a:link, a:visited {
  color: #f9fff5 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
}
a:hover {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.5);
}

/* Fixed header – make it compact, readable, with subtle blur & shadow */
.topnewbanner{
  position: sticky !important; /* sticky avoids covering content on initial load */
  top: 0;
  background: var(--header) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  z-index: 999;
  padding: .6rem 0;
}
.navbar{ background: transparent !important; }

/* Keep the title inline with nav; reduce space */
#h1 { padding: .25rem 0 !important; }

/* Main wrapper – remove huge gaps that were compensating for fixed header */
.main {
  background: transparent !important;
  padding: clamp(12px, 2vw, 18px) !important;
  margin-top: clamp(12px, 3.4vw, 24px) !important;
  min-height: auto !important;
}

/* The key content card */
.textblock, .textblocklarge {
  width: 100% !important;
  max-width: 860px;
  margin: clamp(14px, 3vw, 22px) auto !important;
  background: #4f5b46;
  color: var(--panel-ink);
  border-radius: 14px !important;
  padding: clamp(14px, 3vw, 22px) !important;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
}

/* Hero/inline wide images */
IMG.fullscreenall{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}

/* Sidebar/float images – gentler padding + radius */
IMG.right, IMG.left {
  padding: 0 !important;
  margin: .4rem 0 .8rem 1rem !important;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

/* Button refresh (used for popup CTA etc.) */
.button{
  appearance: none;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  background: #fff !important;
  color: #1b2a12 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 10px !important;
  padding: .6rem .9rem !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
  font-weight: 700;
  transform: translateY(0);
}
.button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  background: #f7faf5 !important;
}

/* Footer – stronger contrast + tidy links */
.footer, .footerbox{
  background: #4f5a45 !important;
  color: #f1f5f9 !important;
}
.footerbox a{ color:#fff !important; border-bottom-color: rgba(255,255,255,.3); }

/* Cookie bar – subtle, readable, not sticky on scroll */
.privacyDiv > div{
  background: #eef3e7 !important;
  color: #0f1b0f !important;
  padding: .75rem 1rem;
  border-top-right-radius: 10px;
  border-top-left-radius: 0;
  box-shadow: 0 -6px 16px rgba(0,0,0,.18);
}
.privacyDiv a{ color:#0f1b0f !important; text-decoration: underline; }

/* Navigation list – space out */
#cssmenu ul{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
#cssmenu ul li a{
  display:block; padding:.4rem .6rem; border-radius:8px;
  background:transparent; border:1px solid transparent;
}
#cssmenu ul li a:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }

/* Make lists show native bullets nicely within dark panel */
ul{ padding-left: 1.2rem !important; }
li{ list-style: disc !important; }

/* Mobile refinements */
@media (max-width: 799px){
  #cssmenu ul{ gap:.35rem; justify-content:center; }
  .textblock, .textblocklarge{ max-width: 92vw; }
  IMG.right, IMG.left{ float:none !important; margin: .5rem 0 !important; }
}

/* Reduce layout shift caused by scrollFunction hiding H1 */
@media (prefers-reduced-motion: no-preference){
  #h1{ transition: opacity .2s ease; }
}


/* --- Mobile edge + wobble fix (paste-last) --- */

/* 1) Make sizing predictable and kill sideways scroll */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* 2) Ensure header spans full width (old CSS set 90% on mobile) */
@media (max-width: 799px){
  .topnewbanner{ width:100% !important; left:0; right:0; }
}

/* 3) Comfortable gutters on the page */
.main{
  padding-left: max(14px, 4vw) !important;
  padding-right: max(14px, 4vw) !important;
}

/* 4) Keep the main text card off the edges and centered */
.textblock, .textblocklarge{
  width: 100% !important;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(14px, 4vw, 22px) !important;
}

/* 5) Any image/floats can’t exceed the viewport */
img, IMG { max-width: 100%; height: auto; }
IMG.right, IMG.left{ float:none !important; margin: .6rem 0 !important; }

/* 6) Backgrounds on mobile shouldn’t “fixed” parallax (prevents jitter) */
@media (max-width: 799px){
  body, BODY, BODY.home, BODY.inner, BODY.inner1, BODY.inner2, BODY.inner3, BODY.inner4{
    background-attachment: scroll !important;
    background-size: cover !important;
  }
}

/* 7) Navigation wrap so it can't push the layout wider than the screen */
#cssmenu ul{ flex-wrap: wrap; overflow-x: hidden; }
#cssmenu ul li a{ white-space: nowrap; }

/* --- Fix background stretch (do not fill height) --- */

/* Desktop/tablet: keep intrinsic aspect, no stretch */
body, BODY, BODY.home, BODY.inner, BODY.inner1, BODY.inner2, BODY.inner3, BODY.inner4{
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: auto !important;           /* undo any 'cover' or fixed sizing */
  background-attachment: scroll !important;   /* avoid parallax forcing resizes */
}

/* Optional: on very wide screens limit max background width (prevents huge scaling) */
@media (min-width: 1600px){
  body, BODY, BODY.home, BODY.inner, BODY.inner1, BODY.inner2, BODY.inner3, BODY.inner4{
    background-size: 1600px auto !important;  /* scale by width only, keep aspect */
  }
}

/* Mobile: fit to viewport width only (never stretch height) */
@media (max-width: 799px){
  body, BODY, BODY.home, BODY.inner, BODY.inner1, BODY.inner2, BODY.inner3, BODY.inner4{
    background-size: 100% auto !important;    /* width scales down, height auto */
    background-position: center top !important;
  }
}

/* --- NAVBAR SCROLLBAR FIX --- */

/* Let containers size naturally and not create inner scroll areas */
.navbar, #cssmenu, #cssmenu ul{
  height: auto !important;
  overflow: visible !important;
  max-width: 100% !important;
}

/* Paste-last */
IMG.fullscreenall{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;                    /* soft corners */
  border:1px solid rgba(255,255,255,.55);/* subtle light border for dark bg */
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),         /* ambient shadow */
    0 2px 10px rgba(0,0,0,.18);          /* closer contact shadow */
}
@media (max-width: 799px){
  IMG.fullscreenall{ border-radius:10px; }
}