/* =====================================================
   ALTHEA HR CONSULTANCY - STYLESHEET
   ===================================================== */

/* ===================================
   FONT SIZE VARIABLES
   =================================== */
:root {
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
}

/* ===================================
   COLOR VARIABLES
   =================================== */
:root {
  --primary-red: #cc0000;
  --text-dark: #333333;
  --text-gray: #666666;
  --text-light: #999999;
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-gray: #f0f0f0;

  /* Link Colors - Light Backgrounds */
  --link-primary: #B22222; /* Fire Brick Red */
  --link-hover: #8B1A1A; /* Darker Fire Brick */
  --link-visited: #A0522D; /* Sienna Brown */

  /* Link Colors - Dark Backgrounds */
  --link-primary-dark: #fff;
  --link-hover-dark: #E9967A; /* Dark Salmon */
  --link-visited-dark: #DEB887; /* Burlywood */
}

/* ===================================
   RESET & BASE STYLES
   =================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Tahoma, Arial, sans-serif;
  background-color: var(--bg-white);
  color: var(--text-gray);
  font-size: var(--font-size-sm); /* 14px base */
  line-height: var(--line-height-normal);
}

/* Make images scale within their containers so large photos
   and graphics (e.g. on Services page) don't overflow on
   smaller screens. */
img {
  max-width: 100%;
  height: auto;
}

/* ===================================
   LAYOUT COMPONENTS
   =================================== */
#page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

#content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Header Layout */
#header-container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

#site-header {
  margin-bottom: 10px;
  position: relative;
  z-index: 5;
  height: 200px;
}

.topheaderbg {
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.topheaderbg::after {
  content: '';
  position: absolute;
  top: 95px;
  left: 50px;
  right: 0;
  height: 2.8em;
  width: 100%;
  background: linear-gradient(to bottom, #c0c0c0, #404040, #c0c0c0);
}

#logo {
  position: absolute;
  left: 0;
  width: 259px;
  height: 203px;
  background-image: url(tie_logo2.png);
  background-repeat: no-repeat;
  z-index: 10;
}

#topheader {
  float: right;
  width: 526px;
  height: 97px;
  position: relative;
}

#toplinks {
  position: absolute;
  right: 10px;
  top: 10px;
}

#main-nav {
  float: right;
  width: 526px;
  /* background-image: url(bg_menu.gif); */
  /* background-repeat: repeat-x; */
  clear: both;
  margin-top: 54px;
}

/* Menu navigation links */
#main-nav a {
  color: var(--link-primary-dark) !important;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

#main-nav a:hover {
  color: var(--link-hover-dark) !important;
  text-decoration: underline;
}


#main-nav .current-page {
  font-weight: var(--font-weight-bold) !important;
  color: #ffffff !important;
}

#sub-nav {
  float: right;
  width: 526px;
  height: 32px;
}

/* Submenu navigation links */
#sub-nav a {
  color: var(--link-primary) !important;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

#sub-nav a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
}


/* Content Layout */
#contenttext {
  clear: both;
  width: 100%;
}

.flex-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.main-content {
  flex: 1;
  min-width: 0; /* Allows flex item to shrink below content size */
}

#leftpanel {
  float: left;
  width: 274px;
  flex-shrink: 0;
}

/* Footer Layout */
#footer {
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  clear: both;
}

.whatsapp-contact {
  width: 100%;
  background-color: #f8f9fa;
  padding: 15px;
  text-align: center;
  clear: both;
  border-top: 1px solid #dee2e6;
}

/* ===================================
   TYPOGRAPHY
   =================================== */
/* Title Styles */
.titletext {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  line-height: var(--line-height-tight);
}

.whitetitle {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  line-height: var(--line-height-tight);
}

/* Tagline under logo: * Performance * Knowledge * Alignment * */
.header-tagline-wrapper {
	font: 0.7em Tahoma, Arial, sans-serif;
	color: var(--text-gray);
	text-align: right; /* Align tagline text to the right, including on mobile */
}

.header-tagline-label {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: var(--font-size-xl);
  color: #800000;
  font-weight: var(--font-weight-bold);
}

.header-tagline-text {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: var(--font-size-xl);
  color: #800000;
  font-weight: var(--font-weight-bold);
}

.smalltitle {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  line-height: var(--line-height-relaxed);
}

/* Text Content Styles */
.bodytext {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-base);
  color: #666666;
  line-height: var(--line-height-normal);
  text-align: justify;
}

/* Small Text Styles with Links */
.smallwhitetext,
.smallwhitetext a,
.smallwhitetext a:hover {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  text-decoration: none;
}

.smallwhitetext a:hover {
  text-decoration: underline;
}

.smallgraytext,
.smallgraytext a,
.smallgraytext a:hover {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #999999;
  text-decoration: none;
}

.smallgraytext a:hover {
  text-decoration: underline;
}

.smallredtext,
.smallredtext a,
.smallredtext a:hover {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  text-decoration: none;
}

/* Sidebar heading class - larger than small text */
.sidebar-heading {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  line-height: var(--line-height-normal);
  margin: 15px 0 8px 0;
  display: block;
}

/* Standardized red heading for all sidebar titles */
.sidebar-title {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  line-height: var(--line-height-normal);
  margin: 15px 0 8px 0;
  display: block;
}

.sidebar-title a {
  color: inherit;
  text-decoration: none;
}

/* Alternative heading sizes for hierarchy */
.sidebar-title h4 {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  line-height: var(--line-height-normal);
  margin: 15px 0 8px 0;
  padding: 0;
  background: none;
  border: none;
}

.smallredtext a:hover {
  text-decoration: underline;
}

/* ===================================
   STANDARDIZED LINK CLASSES
   =================================== */
/* Links for light backgrounds */
.link-light {
  color: var(--link-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

.link-light:hover {
  color: var(--link-hover);
  text-decoration: underline;
}


/* Links for dark backgrounds */
.link-dark {
  color: var(--link-primary-dark);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

.link-dark:hover {
  color: var(--link-hover-dark);
  text-decoration: underline;
}


/* Global link defaults */
a {
  color: var(--link-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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


/* Links on dark backgrounds override */
.bg-dark a,
.bg-dark .link-light {
  color: var(--link-primary-dark);
}

.bg-dark a:hover,
.bg-dark .link-light:hover {
  color: var(--link-hover-dark);
}


/* ===================================
   UTILITY FONT CLASSES
   =================================== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* ===================================
   COMPONENTS
   =================================== */
.graypanel {
  border: 1px solid #666666;
  background-color: #f7f7f7;
  padding: 10px;
  margin: 10px;
  border-radius: 4px;
}

/* ===================================
   FOOTER COMPONENTS
   =================================== */
.whatsapp-contact-text {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: #666666;
  margin-top: 10px;
}

.footer-text {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  text-align: center;
  background-color: #1a1a1a;
  padding: 15px;
}

.footer-text a {
  color: #ffffff;
  text-decoration: none;
}

.footer-text a:hover {
  text-decoration: underline;
  color: #cccccc;
}

.footer-copyright {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: #999999;
}

/* ===================================
   HERO & INTRO COMPONENTS
   =================================== */
.hero-intro {
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: #666666;
  line-height: var(--line-height-relaxed);
  text-align: justify;
  padding: 30px;
  background-color: #f8f9fa;
  border-left: 4px solid #cc0000;
  border-radius: 8px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.hero-intro::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 120px;
  font-family: Georgia, serif;
  color: rgba(204, 0, 0, 0.1);
  font-weight: bold;
  z-index: 1;
  line-height: 1;
}

.hero-intro .intro-content {
  position: relative;
  z-index: 2;
}

.hero-intro .intro-highlight {
  color: #cc0000;
  font-weight: var(--font-weight-bold);
}

.hero-intro .intro-quote {
  font-style: italic;
  color: #666666;
  background: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 6px;
  border-left: 3px solid rgba(204, 0, 0, 0.3);
  margin: 15px 0;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hero-intro .big-quote {
  font-family: Georgia, serif;
  font-size: var(--font-size-xl);
  font-style: italic;
  color: #333333;
  text-align: center;
  margin: 20px 0;
  padding: 25px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(204, 0, 0, 0.2);
  position: relative;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hero-intro .big-quote::before,
.hero-intro .big-quote::after {
  content: '"';
  font-size: var(--font-size-2xl);
  color: rgba(204, 0, 0, 0.3);
  position: absolute;
  font-family: Georgia, serif;
}

.hero-intro .big-quote::before {
  top: 5px;
  left: 10px;
}

.hero-intro .big-quote::after {
  bottom: -15px;
  right: 10px;
}

.hero-services {
  margin-top: 25px;
  text-align: center;
}

.hero-services .service-item {
  display: inline-block;
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: #cc0000;
  margin: 6px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid rgba(204, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  transition: all 0.3s ease;
}

.hero-services .service-item:hover {
  background: rgba(204, 0, 0, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.15);
}

/* ===================================
   WHATSAPP FLOATING BUTTON
   =================================== */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  border-radius: 50px;
  padding: 15px;
  font-size: var(--font-size-xl);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  text-decoration: none;
}

/* ===================================
   ALIGNMENT UTILITIES
   =================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ===================================
   BUTTON COMPONENTS
   =================================== */
.btn {
  display: inline-block;
  padding: 10px 20px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 5px;
}

.btn-primary {
  background-color: var(--primary-red);
  color: white;
}

.btn-primary:hover {
  background-color: #990000;
  text-decoration: none;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(204, 0, 0, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(204, 0, 0, 0.3);
}

/* Reposition ALTHEA text inside the logo for mobile so that it
   sits more centrally on the tie shape */
#logo .altheatext {
	margin-top: 70px;
	/* Nudge slightly left so the ALTHEA text aligns with the visual
	   centre of the tie graphic on mobile. */
	margin-left: 60px;
}


/* ===================================
   RESPONSIVE HELPERS
   =================================== */
@media screen and (max-width: 800px) {
  .registered-trademark-section {
    text-align: center;
  }

  #page,
  #content {
    max-width: 100%;
    padding: 0 10px;
  }

  #logo,
  #topheader,
  #main-nav,
  #sub-nav {
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }

	/* Simplify header stacking on small screens so the logo does not
	   sit on top of (and block) the navigation links */
	#site-header {
		height: auto;
	}

	.topheaderbg {
		position: relative;
		height: auto;
	}

	/* On small screens, hide the desktop-positioned gradient bar that sits
	   behind the logo so that it doesn't overlap the tie image. We'll draw
	   the gradient behind the main menu instead (see #main-nav below). */
	.topheaderbg::after {
		display: none;
	}

	#logo {
		position: relative;
		z-index: auto;
		margin: 0 auto 10px auto;
			text-align: center; /* center ALTHEA text within the tie logo on mobile */
	}

	/* Tidy up header and navigation spacing/alignment on small screens */
	#topheader {
		height: auto;
		margin-top: 10px;
	}

	/* Reduce the large gap above the main menu when stacked */
	#main-nav {
			margin-top: 5px;
			/* Draw the horizontal gradient bar between the tagline and the
			   testimonial links on mobile, behind the main navigation links. */
			background: linear-gradient(to bottom, #c0c0c0, #404040, #c0c0c0);
	}

	/* Keep submenu close to the main menu on mobile */
	#sub-nav {
		margin-top: 0;
	}

	/* Make tagline sit neatly with the right-aligned text on mobile */
	.header-tagline-wrapper {
		padding: 4px 10px 0;
	}

	/* Reposition ALTHEA text inside the logo for mobile so that it
	   sits more centrally on the tie shape */
		#logo .altheatext {
		    margin-top: 0;
	        text-align: left;
	        padding-top: 80px;
	        padding-left: 0;
	    }

		/* Stack left sidebar and main content vertically on small screens
		   so the right-side (main) content is visible without horizontal
		   scrolling. */
		.flex-container {
		  flex-direction: column;
		  align-items: stretch;
		}

		#leftpanel,
		#contenttext,
		.main-content {
		  float: none;
		  width: 100%;
		}

		/* About page: make sidebar full-width and center-aligned on mobile,
		   and normalise its font sizes for better readability. */
		#about-sidebar {
		  width: 100% !important;
		  padding-top: 1.5em !important;
		  padding-bottom: 1.5em;
		  text-align: center;
		}

		#about-sidebar .style5,
		#about-sidebar .style6,
		#about-sidebar .style89,
		#about-sidebar .style94,
		#about-sidebar .style27,
		#about-sidebar .style12,
		#about-sidebar .style13,
		#about-sidebar .style14 {
		  font-size: var(--font-size-base);
		  line-height: var(--line-height-normal);
		}

		/* Services page: full-width, centered sidebar on mobile
		   with slightly larger trademark text for readability. */
		.services-layout #leftpanel {
		  width: 100% !important;
		  text-align: center;
		  margin-top: 1.5em;
		}

		.services-layout #leftpanel .trademark-info {
		  font-size: var(--font-size-sm);
		}

			/* Services page: make helper and legacy small-print text
			   more readable on mobile devices. */
			.services-layout .text-xs,
			.services-layout font[size],
			.services-layout span[style*="FONT-SIZE"] {
			  font-size: var(--font-size-sm) !important;
			  line-height: var(--line-height-normal);
			}

	  /* Responsive font sizing: keep same base scale on mobile so
	     text remains comfortably readable and consistent across
	     screen sizes. */
	  :root {
	    --font-size-xs: 0.75rem;    /* 12px */
	    --font-size-sm: 0.875rem;   /* 14px */
	    --font-size-base: 1rem;     /* 16px */
	    --font-size-lg: 1.25rem;    /* 20px */
	    --font-size-xl: 1.5rem;     /* 24px */
	    --font-size-2xl: 2.25rem;   /* 36px */
	  }
}

	@media screen and (max-width: 480px) {
	  :root {
	    --font-size-xs: 0.75rem;    /* 12px */
	    --font-size-sm: 0.875rem;   /* 14px */
	    --font-size-base: 1rem;     /* 16px */
	    --font-size-lg: 1.25rem;    /* 20px */
	    --font-size-xl: 1.5rem;     /* 24px */
	    --font-size-2xl: 2.25rem;   /* 36px */
	  }
	}