/*
DC.Title       = home.css
DC.Subject     = etelligence.info services
DC.Description = Corporate site's home-page style-sheet
DC.Publisher   = etelligence.info
DC.Creator     = David Neil
DC.Contributor = Eleanor Neil
DC.Date        = 2003-10-06
DC.Identifier  = https://www.etelligence.info/et.css
DC.Language    = en
DC.Relation    = common styles for all ET pages
DC.Coverage    = efforts of DN and EMN
DC.Rights      = https://www.etelligence.info/ETccc.html
                 All rights reserved
                 No license exists to permit others to use this software
Version 2-00-00 Aug 2025: Modernise to grid and cards layout
Version 1-00-01 Oct 2003: use dedicated positioning in CSS
Version 1-00-00 Oct 2003: initial version
Version 0-3: Oct 2003
    Use percentage values to ease browser sharing and screen sizes
Version 0-2: Jul 2003
    Change format to a list of logos
Version 0-1: Jul 2003
    Set up home page
*/

/* CSS Custom Properties */
:root {
    /* Color palette */
    --sidebar-color: white;
    --sidebar-background-color: rgb(5,116,250); /*blue*/
    --header-background-color: rgb(5,116,250); /*blue*/
    --main-color: rgb(5,116,250); /*blue*/
    --main-background-color: rgb(255,255,240); /*ivory*/

    /* Neutral colors */
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-600: #64748b;
    --gray-900: #1e293b;

    /* Layout dimensions */
    --sidebar-width: 190px;
    --logo-height: 198px;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Transitions */
    --transition-base: all 0.3s ease;
}

/* Reset and base styles */
* {
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}


html
{
    height: 100%; width: 100%; overflow: hidden;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Overall layout */
body {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr; /* Two columns */
}

/* Left Sidebar Styles */
nav {
    display: flex;
    flex-direction: column;
    top: 0;
    height: 100vh;
    color: var(--sidebar-color);
    background-color: var(--sidebar-background-color);
    position: sticky;
    overflow-y: auto;
}

nav .logo {
    width: var(--sidebar-width);
    height: var(--logo-height);
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    padding: 0;
    /*padding: var(--spacing-sm);*/
    transition: var(--transition-base);
}

nav .tagline {
    display: flex; /* Use flexbox for better alignment */
    flex-wrap: wrap; /* Allow wrapping of text */
    align-items: center; /* Align items vertically centered */
    padding: 1rem 0.5rem;
}

/* Sidebar Footer */
nav footer {
    margin-top: auto; /* Pushes the footer to the bottom */
    border-top: 1px solid var(--main-background-color);
    padding: 0.25rem 0.5rem;
    font-size: smaller;
    line-height: 1.0;
    opacity: 0.9;
}
nav footer a:visited, nav footer a:link {
    color: var(--sidebar-color);
}


/* Main content */
main {
    width:100%;
    color: var(--main-color);
    background: var(--main-background-color);
}

/* Page heading */
main #top-heading {
  width: 100%;
    margin: 0 auto 1rem; /* Centers the container horizontally */
    padding: 1rem 2rem;
    background: var(--header-background-color);
    text-align: center; /* Centers the image horizontally */
}

/* Ensure the heading's image is centered and doesn't exceed its container */
main  #top-heading img {
  display: block; /* Removes any extra space below the image */
  margin: 0 auto; /* Centers the image horizontally */
  max-width: 100%; /* Ensures the image doesn't overflow the container */
}

main #sub-heading {
    max-width: 900px;
    margin: 0 auto var(--spacing-xl) auto;
    font-size: 1.25rem;
    text-align: center;
}

main #sub-heading h3 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

/* Services Grid */
main section {
    display: grid;
    margin: 0 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

/* Individual card */
main section article {
    display: flex;
    height: 300px;
    max-width: 360px;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: var(--spacing-xs);
    background: white;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    text-align: center;
    object-fit: contain;
    transition: var(--transition-base);
}

main section article a:visited, main section article a:link {
    color: var(--main-color);
    text-decoration: none;
}

main section article:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

main section article img {
    max-width: 100%;
    max-height: 225px;
    margin: 0 auto;
    object-fit: contain;
    transition: var(--transition-base);
    display: block;
}

main section article h4 {
    display: block;
    margin: 0.5rem auto;
    text-align: center;
    object-fit: contain;
}


/* General formatting */
.icon-text{
    display: inline-flex; /* Use inline-flex to keep image and text together */
    align-items: center; /* Center the image vertically with the text */
}

.icon-as-text {
    width: 1em; /* Set width to match text size */
    height: auto; /* Maintain aspect ratio */
    margin-left: 0.2em; /* Add some space between text and image */
    margin-right: 0.2em; /* Optional: space after the image */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    /*Needs more work*/
  body {
    grid-template-columns: 1fr; /* Stack left column and main content */
  }

  main section article {
    flex-direction: column;
  }
}