@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
	color: #C6BA84;
	background-color: #000000;
	font-family: 'Cormorant', serif;
	}


#wrapper {
	width: 90%;           /* ✅ Fluid width for mobile */
	max-width: 1000px;    /* ✅ Caps width on desktop */
	margin: 2%; auto 4%    /* ✅ Shorthand for top/bottom & centering */
	background-color: black;
	position: relative;
	padding: 10px 20px;
	border: 1px solid #9EB7FF;
	box-sizing: border-box; /* ✅ Ensures padding doesn't add extra width */
}

#navtop {
	position: relative;
	top: 5px;
	margin: 3px auto 10px;
	width: 100%;            /* ✅ Fluid width */
	/*   max-width: 860px;      ✅ Max width for desktop */
	padding: 10px 20px;
	background-color: #000000;
	/* background-image: url(../images/grad/h5_bleugrandeur3.jpg); */
	border: 1px solid #9291D4;
	box-sizing: border-box;
}

#header {
	position: relative;
	top: 0px;
	width: 100%;            /* ✅ Fluid width */
	padding: 10px 20px;
	background-image: url(../images/grad/h5_bleugrandeur3.jpg);	
	border: 1px solid #9291D4;
	/* 
	border-bottom: 0px;
	*/
	font-family: 'Simonetta', serif;
	font-size: 18pt;
	text-shadow: 2px 2px 2px #000000;
	color: #FF9100;
	box-sizing: border-box;
}
	
.maintable {
	background-image: url(../images/grad/h5_italy3b.jpg);
	border:0px solid; /* WAS COLOR  #5A0090 */
	border-collapse:collapse;
	}

.article-lists {
	background-color:#292929;
	border:1px solid #6666FF;
	}

img.swapbdr {
	border:1px solid #888888;
	margin-bottom:20px;
	}
	
ul.list1 {

	margin-left:0px;
	}	
	
ul.excerpt-list {
	margin-top: 4%;
	}	
	
	
/* ------------ GRADIENT STYLES -------------- */
  
  	



/* NOTE ON GRADIENTS & COMPATIBILITY ..

Support for full multi-stop gradients with IE9 (using SVG).

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

END OF NOTE */

	
/* ------------ MODERN GRADIENT STYLES -------------- */

.grad-blue-dark {
    background: #395b9b;
    background: linear-gradient(-45deg, #395b9b 0%, #002366 50%, #395b9b 100%);
}

.grad-body {
    background: #1b1b1b;
    background: linear-gradient(-45deg, #1b1b1b 0%, #383838 13%, #4e4e4e 24%, #0a0a0a 47%, #010101 50%, #0d0d0d 54%, #959595 100%);
}

.grad-dk-rainbow {
    background: #0a0031;
    background: linear-gradient(-45deg, #0a0031 0%, #582475 25%, #2e0a9e 50%, #0175c1 75%, #051989 100%);
}

.grad-dk-rbow-horiz {
    background: #051989;
    background: linear-gradient(to right, #051989 0%, #0175c1 25%, #2e0a9e 50%, #582475 75%, #0a0031 100%);
}

.grad-fontquote, .fontquote {
/*
    background: #141d70;
    background: linear-gradient(to bottom, #141d70 0%, #4c4c4c 100%);
*/
background: #3E2C0F;
background: linear-gradient(124deg, rgba(62, 44, 15, 1) 0%, rgba(59, 12, 9, 1) 50%, rgba(28, 15, 33, 1) 100%);
}

.gradientq {
background: #3E2C0F;
background: linear-gradient(124deg, rgba(62, 44, 15, 1) 0%, rgba(59, 12, 9, 1) 50%, rgba(28, 15, 33, 1) 100%);

}

/* ------------ LINK STYLES -------------- */
  
  	
.link3small {
	font: bold 10px Arial, Helvetica, sans-serif;
	text-decoration: none; }
a.link3small:link { color: #6699FF;}
a.link3small:visited { color: #6699CC;}
a.link3small:hover {	color: #FFCC66;
	text-decoration: underline; }
a.link3small:active { color: #FBFAF9; text-decoration: underline;}


.link2 {
	font: 9pt Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none; }
	
a.link2:link {	color: #F5BFB1;}
a.link2:visited {	color: #F5BFB1;}
a.link2:hover {	color: #F7ECB0; text-decoration: underline;}
a.link2:active {	color: #ECCF79;}



.link1 {
	font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
		color: #6699CC;
}
a.link1:link {	color: #78A2BA;}
a.link1:visited {	color: #78A2BA;}
a.link1:hover {	color: #9ADBFA; text-decoration: underline;}
a.link1:active {	color: #C9AAEE;}


.link-copy {
	font: bold normal 10px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #8B8B8B;
	letter-spacing: .1em;
}
a.link-copy:link {	color: #8B8B8B;}
a.link-copy:visited {	color: #8B8B8B;}
a.link-copy:hover {	color: #5EA2D5; text-decoration: underline;}
a.link-copy:active {	color: #C9AAEE;}

.link3 {
	font: bold 9pt Arial, Helvetica, sans-serif;
	text-decoration: none;
}
a.link3:link { color: #F3C769;}
a.link3:visited { color: #F3C769;}
a.link3:hover {	color: #A5D1D0;	text-decoration: underline; }
a.link3:active { color: #FBFAF9; text-decoration: underline;}

.link4 {
	font: bolder 12px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #7A7BB8;
}
a.link4:link {	color: #9B9CCA;}
a.link4:visited {	color: #7A7BB8;}
a.link4:hover {	color: #D189D8; text-decoration: underline;}
a.link4:active {	color: #F59636;}


/* ------------ FONT STYLES -------------- */
  

/* "fontquote" is handled in the "IE/non-ie" targetted stylesheets ...
gb opened up next 4 quote styles mar 28 11pm  */


.fontquote {
	font-family: 'Playfair Display', serif;
	font-size: 11pt;
	background-color:#000000;
	/*
	background-image: url(../images/grad/h7_wonder2a.jpg) !important; 
	*/
	color: #F2C68A;
	margin-top:0px;
	position: relative;
	z-index: 0; }

.fontquote-large {
	font-family: 'Playfair Display', serif;
	font-size:20pt;
	font-weight: normal;
	font-style:normal;
	}
.fontquote-med {
	font-family: 'Playfair Display', serif;
	font-size:14pt;
	font-weight:normal;
	font-style:italic;
	}

.font-tangerine {
	font-family: 'Tangerine', serif;
	font-size: 36pt;
 	text-shadow: 2px 2px 2px #000000;
	color:#FF9100;
  }
  
  
.font-threedee {
font-family: Garamond, serif;
line-height: 1em;
color: #f7ad0d;
font-size: 52px;
text-shadow:0px 0px 0 rgb(202,128,-32),1px 1px 0 rgb(158,84,-76),2px 2px 0 rgb(113,39,-121), 3px 3px 0 rgb(68,-6,-166),4px 4px 3px rgba(0,0,0,0.9),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);}

.font-forum {
	font-family: 'Forum', cursive;
	font-size:12pt;
	}

/* <weight>: Use a value from 400 to 900
 <uniquifier>: Use a unique and descriptive class name */

.playfair {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 12pt;
  font-style: normal;
}

.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ------------ MISC STYLES -------------- */
  
/* ============== RANDOM QUOTE + IMAGE SECTION - FIXED & RESPONSIVE ============== */

.quote-container {
    display: flow-root;           /* Modern clear-fix for floats */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;             /* Prevents child overflow */
}

.prem-image-wrapper {
    float: left;
    margin: 20px 20px 12px 0;
    max-width: 156px;
    width: 100%;
}

#prem-random-image {
    width: 156px;
    max-width: 100%;
    height: auto;
    
    display: block;
    box-sizing: border-box;
}

/* Quote text area */
#random-quote-wrapper {
    margin-left: 168px;   /* image width + gap */
    font-family: 'Playfair Display', serif;
    font-size: 11pt;
    color: #F2C68A;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    padding-right: 10px;
    box-sizing: border-box;
}

/* Small screens: stack image on top of quote */
@media (max-width: 620px) {
    .prem-image-wrapper {
        float: none;
        margin: 0 auto 15px auto;
        text-align: center;
        max-width: 148px;
    }
    
    #random-quote-wrapper {
        margin-left: 0;
        width: 100%;
    }
}

/* Extra safety for tables */
.maintable td, .quote-container td {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* -------------- end of section ----------- */

td.quote {
	font-family: "Times New Roman", Times, serif;
	font-size: 14pt;
	background-image: url(../images/grad/h7_wonder2a.jpg); }
	
.mj {
	background-color: #666666;
	background-image: url(../images/grad/v2_dkgrey2.jpg);
	float: left;
	margin: 7px 7px 4px 4px;  }
.verdana {
	font: 9pt 'Raleway', Arial, Helvetica, sans-serif;
	font-weight: 500;
}

.index1 {color: #E9D80E; margin: 0 auto 3%;}
	
ul {list-style-position: outside}

li {
	padding-top: 6px;
	padding-bottom: 6px; }
	
.mj2 {
	background-color: #666666;
	background-image: url(../images/grad/v2_dkgrey2.jpg);
	float: left;
	left: 2px;
	top: 2px;
	position: relative;
	z-index: 1;
	 }
.mj3 {
	background-color: #666666;
	background-image: url(../images/grad/v2_dkgrey2.jpg);
	padding: 1%;
	border: 1px solid #6666FF;
}	
	
	
/* --- FLEXBOX BOTTOM NAV (The Fail-Safe Fix) --- */

.flex-nav-container {
    display: flex;             /* Activates Flexbox */
    justify-content: space-between; /* Pushes items to edges and spaces evenly */
    align-items: center;       /* Vertically centers text */
    width: 100%;
    background-image: url('../images/grad/h5_italy3b.jpg');
    border: 1px solid #3FAAFD; /* The light blue border */
    box-sizing: border-box;
    min-height: 45px;          /* Guarantees height */
}

.flex-nav-item {
    flex: 1;                   /* CRITICAL: Each item takes equal width */
    text-align: center;        /* Centers text inside the item */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Optional: Add a subtle separator between items on large screens */
.flex-nav-item:not(:last-child) {
    border-right: 1px solid rgba(63, 170, 253, 0.2);
}

/* Mobile Stack: On small screens, stack them vertically, prev max-w 768 */
@media (max-width: 500px) {
    .flex-nav-container {
        flex-direction: column;
        max-width: 50%;
        align-items: center;
        height: auto;
        margin: auto auto;
    }
    .flex-nav-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(63, 170, 253, 0.2);
        padding: 15px 0;
    }
}
/* grok-test mar 28 */

.content-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
}
.links-column { flex: 1 1 55%; min-width: 280px; }
.image-column { flex: 1 1 40%; min-width: 280px; }
.reverse-on-mobile { flex-direction: row; }
@media (max-width: 768px) {
    .reverse-on-mobile { flex-direction: column; }
}
.index-title { text-align: center; margin: 1rem 0; }
.quote-text { overflow: hidden; }
.divider { height: 8px; margin: 20px 0; }