/**********  START OF BRAND GLOBAL VARIABLES **************/

:root {
  --primary-color: #264653; /* Dark Teal Blue for primary elements */
  --secondary-color: #e9c46a; /* Golden Yellow for secondary elements */
  --accent-color: #e9c46a; /* Golden Yellow for accent buttons and highlights */
  --coral-color: #d48a47;  /* Warm Coral for warnings and secondary accents */
  --background-color: #eaf6fe; /* Light Grey for background */
  --header-background-color: #091a32; /* Dark Slate for footer */
  --footer-background-color: #2a2a2a; /* Dark Slate for footer */
  --text-color: #2a2a2a; /* Dark Grey for text */
  --heading-color: #264653; /* Dark Teal Blue for headings */
  --link-color: #0000EE; /* Dark Teal Blue for links */
  --link-hover-color: #551A8B; /* Rich Teal for hover */
  --button-bg-color: #e76f51; /* Soft Coral for buttons */
  --button-bg-hover-color:#cf6249; /* Soft Coral for buttons */	
  --button-text-color: #ffffff; /* White text on buttons */
  --border-color: #dcdcdc; /* Soft Grey for borders */
  --input-bg-color: #ffffff; /* White background for inputs */
  --input-text-color: #2a2a2a; /* Dark Grey for input text */
  --font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --heading-font-family: 'Cinzel', Georgia, serif;
  --font-size-base: 100%; /* 16px */
  --paragraph-font-size: 1.15rem; /* 16px */
  --heading1-font-size: 2rem;
  --heading2-font-size: 1.75rem;	
  --heading3-font-size: 1.75rem;	
  --heading4-font-size: 1.75rem;	
  --heading5-font-size: 1.5rem;	
  --heading6-font-size: 1.5rem;	
  --line-height: 1.5;
  --padding-small: 8px;
  --padding-medium: 16px;
  --padding-large: 24px;
  --card-bg-color: #ffffff; /* White background for cards */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --highlight-color: #e9c46a; /* Golden highlight color */
  --disabled-color: #bdc3c7; /* Soft Grey for disabled elements */
  --overlay-color: rgba(0, 0, 0, 0.5);
  --gradient-start-color: #264653;
  --gradient-end-color: #2a9d8f;
  --error-color: #e76f51; /* Coral for error messages */
  --success-color: #2ecc71; /* Green for success */
  --warning-color: #f39c12; /* Same warning color */
  --info-color: #3498db; /* Same info color */
  --scrollbar-track-color: #ecf0f1;
  --scrollbar-thumb-color: #bdc3c7;
  --modal-bg-color: #ffffff;
  --card-border-radius: 8px;
  --container-max-width: 1200px;
  --grid-gap: 16px;	
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	padding-top: 90px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font-family);
	color: var(--heading-color);
	letter-spacing: .03em;
}

/* On dark/hero sections that use Bootstrap's text-white, headings must be
   explicitly white — inheritance alone is overridden by the rule above. */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.nsuc-modal-header .modal-title,
.auth-card-header h1,
.auth-card-header h2,
.auth-card-header h3,
.auth-card-header h4,
.auth-card-header h5,
.auth-card-header h6 {
	color: #fff;
}

/* Restore dark heading colour inside light cards that sit within dark sections. */
.text-white .card h1,
.text-white .card h2,
.text-white .card h3,
.text-white .card h4,
.text-white .card h5,
.text-white .card h6 {
	color: var(--heading-color);
}

h1 { font-size: var(--heading1-font-size); }
h2 { font-size: var(--heading2-font-size); }
h3 { font-size: var(--heading3-font-size); }
h4 { font-size: var(--heading4-font-size); }
h5 { font-size: var(--heading5-font-size); }
h6 { font-size: var(--heading6-font-size); }

p {
	font-size: var(--paragraph-font-size);
	padding: var(--padding-small);
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover-color);
}

/* Skip to main content link — hidden until focused by keyboard */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-to-content:focus {
    top: 0;
    color: #ffffff;
    outline: 3px solid var(--accent-color);
    outline-offset: 0;
}

/* Accessibility focus styles for links */
a:focus {
	outline: 2px dashed var(--accent-color); /* Add dashed outline for keyboard focus */
	outline-offset: 4px;
}

li{
	color: var(--text-color);
	font-size: var(--paragraph-font-size);
}
.btn-teal {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.btn-teal:hover {
	background-color: #1c3a47;
	border-color: #1c3a47;
	color: #fff;
}

.mybutton {
	background-color: var(--button-bg-color); /* Updated button background */
	color: var(--button-text-color);
	padding: var(--padding-medium);
	border: 1px solid var(--border-color);
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 4px var(--shadow-color);
	transition: box-shadow 0.2s, background-color 0.2s;
}

/* Added manual hover and active states for buttons */
.mybutton:hover {
	background-color: #1b66a1; /* Slightly darkened version of --button-bg-color */
	box-shadow: 0 4px 6px var(--shadow-color);
}

.mybutton:active {
	background-color: #155482; /* More darkened version of --button-bg-color */
	box-shadow: 0 1px 2px var(--shadow-color);
}

/* Accessibility focus styles for buttons */
.mybutton:focus {
	outline: 3px solid var(--accent-color); /* Visible outline for keyboard focus */
	background-color: #e64c3c; /* Optional: Slight background change */
	outline-offset: 4px;
}

/* Full-width Button for Forms and Calls-to-Action */
.mybutton.full-width {
    width: 100%;
    padding: var(--padding-medium);
    font-size: 1.25rem;
}

input, textarea{
	max-width: 600px;
}
/* Input and textarea focus styles for usability */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: var(--primary-color); /* Add focus outline */
	outline: none;
	box-shadow: 0 0 5px rgba(33, 118, 181, 0.5); /* Optional focus shadow */
	
}

input[type="text"], textarea {
	background-color: var(--input-bg-color);
	color: var(--input-text-color);
	padding: var(--padding-small);
	border: 1px solid var(--border-color);
}


.card {
	background-color: var(--card-bg-color);
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 4px var(--shadow-color);
	padding: var(--padding-large);
	margin-bottom: var(--padding-medium);
}

/* On screens wider than Bootstrap's xxl breakpoint, grow the container
   so content fills the viewport with just 60 px of breathing room per side
   rather than Bootstrap's fixed 1320 px (which leaves ~300 px gaps at 1920 px). */
@media (min-width: 1400px) {
    .container {
        max-width: calc(100% - 120px);
    }
}

.highlight {
	background-color: var(--highlight-color);
}

.modal {
/*	background-color: var(--modal-bg-color);*/
	padding: var(--padding-large);
	box-shadow: 0 4px 8px var(--shadow-color);
}

.scrollbar {
	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Scrollbar customization for WebKit browsers */
.scrollbar::-webkit-scrollbar {
	width: 12px;
}

.scrollbar::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-color);
}

.scrollbar::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border-radius: 10px;
}

.grid {
	display: grid;
	grid-gap: var(--grid-gap);
}

/**********  END OF BRAND GLOBAL VARIABLES **************/


/* THIS IS TEST CODE DELETE WHEN IN PROD*/


/*
body::before {
	content: "xs";
	position: fixed;
	top: 40px;
	left: 0;
	z-index: 9999999;
	background-color: var(--accent-color);
	color: var(--button-text-color);
	padding-left: 10px;
	padding-right: 10px;
}
*/


/*@media (min-width: 50px) { body::before { content: "xs"; top: 65px; }}
/*@media (min-width: 576px) { body::before { content: "sm"; top: 65px; }}  /* Large Phones */
/*@media (min-width: 768px) { body::before { content: "md"; top: 65px; }}  /* Tablets or Small Desktops */
/*@media (min-width: 992px) { body::before { content: "lg"; top: 65px; }}  /* Larger Desktops */
/*@media (min-width: 1200px) { body::before { content: "xl"; top: 65px; }}  /* Large Desktops and Widescreen monitors */
/*@media (min-width: 1400px) { body::before { content: "xxl"; top: 65px; }}  /* Very Large Screens such as high resolution monitors */

/* END OF THIS IS TEST CODE DELETE WHEN IN PROD*/


.navbar-logo {
  position: relative;
  margin-left: -10px;
  z-index: 1;
}

.navbar {
  background-color: var(--header-background-color); 
}

.nav-active{
	color: var(--accent-color);
}

.nav-menu button {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: var(--accent-color); /* Updated for better contrast */
	color: var(--text-color); 
	border: none;
	border-radius: 5px;
	font-size: 1.25rem;
	cursor: pointer;
}
.nav-menu button:hover {
	background-color: #e64a19;
}


/* Make the login button full width when the navbar collapses */
.navbar .btn {
  width: auto; /* Default width */
}

@media (max-width: 768px) {
  .navbar .btn {
    width: 100%; /* Full width for small screens */
    margin-top: 10px; /* Optional: add margin for better spacing */
	margin-bottom: 10px;
  }
  
  .navbar .nav-item {
    text-align: center; /* Center align nav items on collapse */
  }
}






/* FOOTER */
.footer {
	background-color: var(--footer-background-color);
}

.footer > hr {
	display: none;
}

.footer h1, 
.footer h2, 
.footer h3, 
.footer h4, 
.footer h5, 
.footer h6 {
    color: #f4f4f9; /* Light grey for footer headings */
}

.footer p {
    color: #dcdcdc; /* Softer light grey for paragraph text */
}

.footer a {
    color: #e9c46a; /* Golden yellow for footer links */
    text-decoration: none;
}

.footer a:hover {
    color: #f4a261; /* Warm orange for hover effect */
}

.footer a:focus {
    outline: 2px dashed #f4a261; /* Dashed outline for focused links */
    outline-offset: 4px;
}
.footer input[type="text"]:focus{
	border-color: var(--secondary-color); /* Add focus outline */
	outline: none;
	box-shadow: 0 0 10px rgba(233, 196, 106, 0.7); /* Optional focus shadow */
}

/*TILT*/
.tilt {
	
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-15deg);
     -moz-transform: rotate(-15deg);
       -o-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
.pic{
	padding: var(--padding-small);
}

/* END FOOTER */ 




main {
	min-height: 600px;
}

footer {
	margin-bottom: auto;
}




/* CONTACT US PAGE */

/* Using Grid for contact details to allow more control */
.contact-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
	gap: 20px; /* Adds space between items */
	margin-bottom: var(--padding-large);
}

.contact-item {
	text-align: center;
}

.contact-item h3 {
	margin-bottom: 10px;
	border: thin;
	border-radius: 5px;
	font-size: 1.5rem;
}

.contact-item p {
	font-size: 1rem;
}

.contact-item a {
	color: var(--accent-color); /* Updated color for better visibility */
	text-decoration: none;
	font-weight: bold;
}

.contact-form {
	max-width: 600px;
	margin: 0 auto;
}

.contact-form label {
	display: block;
	margin-bottom: 10px;
	font-size: 1rem;
	text-align: left;
}

.contact-form input, .contact-form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.contact-form button {
	display: block;
	width: 100%;
	padding: 15px;
	background-color: var(--accent-color); /* Updated for better contrast */
	color: var(--text-color); 
	border: none;
	border-radius: 5px;
	font-size: 1.25rem;
	cursor: pointer;
}

.contact-form button:hover {
	background-color: #e64a19;
}

.contact-store-hours{
	font-family: "Lato", sans-serif;
	font-weight: 400;
}

/*  LOGIN PAGE AND FORGOT PASS */

.login {
	width: 100%;
	max-width: 400px;
	background-color: #ffffff;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
	margin: 100px auto;
	border-radius: 7px;
}
.login h1 {
	text-align: center;
	padding: 20px 0 20px 0;
	border-bottom: 1px solid #dee0e4;
}
.login form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
	
}
.login form label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background-color: var(--primary-color); /* Updated button background color */
	color: var(--button-text-color);
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"] {
	width: 80%;
	max-width: 400px;
	height: 50px;
	border: 1px solid #dee0e4;
	margin-bottom: 20px;
	padding: 0 15px;
}
.login form input[type="submit"] {
	width: 100%;
	padding: 15px;
	margin-top: 20px;
/*	background-color: var(--primary-color); /* Updated button background color */
/*	color: var(--button-text-color);  */
	border: 0;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s, box-shadow 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
	box-shadow: 0 2px 4px var(--shadow-color);
	transition: background-color 0.2s;
}

/* Profile Form Container */
.profile-form {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--padding-medium);
}

/* Flexbox for each label and input */
.profile .form-group {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 10px 0;
}

.profile form label {
	width: 50px;
	height: 50px;
	background-color: var(--primary-color); /* Icon background color */
	color: var(--button-text-color); /* Icon text color */
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px; /* Optional: Rounded corners for icons */
	flex-shrink: 0; /* Prevents label from shrinking */
	margin-right: 10px; /* Add space between icon and input */
}

/* Input fields */
.profile input[type="text"], 
.profile input[type="email"], 
.profile input[type="password"], 
.profile input[type="submit"] {
	flex-grow: 1; /* Allow inputs to grow to fill available space */
	padding: 10px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%; /* Ensure inputs take up remaining space */
	min-width: 0; /* Prevent inputs from overflowing */
	margin: 0; /* Remove default margin */
}

/* Full-width for the submit button */
.profile input[type="submit"] {
	width: 100%; /* Full width for submit button */
	margin: 20px 0;
}

/* Set a max width to prevent fields from getting pushed down */
.profile form input {
	max-width: calc(100% - 60px); /* Leave enough space for the icon and margin */
}


.newsletter-div{
	/*lor: white;*/
	
	background-color: var(--link-hover-color);
}


/* Mobile Responsive */
@media (max-width: 576px) {
	.profile .form-group {
		display: flex;
		flex-direction: row; /* Keep label and input on the same line */
		width: 100%; /* Ensure form takes full width */
	}

	.profile input[type="text"], 
	.profile input[type="email"], 
	.profile input[type="password"] {
		width: calc(100% - 60px); /* Ensure input width leaves space for icon */
	}

	.profile input[type="submit"] {
		width: 100%; /* Full width for the submit button */
	}
}


/*
    @media (max-width: 768px) {
        .tilt.pic {
            display: inline-block;
            margin: 0 10px;
        }
    }
*/

/* Media Query for small screens */
@media (max-width: 576px) {
	:root {
		--font-size-base: 90%; /* Adjust base font size for small screens */
	}

	h1 {
		font-size: 1.75rem; /* Reduced from 2rem */
	}
	h2 {
		font-size: 1.5rem; /* Reduced from 1.75rem */
	}
	h3 {
		font-size: 1.4rem; /* Reduced for small screens */
	}
}

/* Narrower scrollbar for smaller screens */
@media (max-width: 576px) {
	.scrollbar::-webkit-scrollbar {
		width: 8px; /* Narrower scrollbar */
		visibility: hidden; /* Hide scrollbar by default */
	}

	.scrollbar:hover::-webkit-scrollbar {
		visibility: visible; /* Show scrollbar on hover */
	}
}