/*
 * Basic styling for the law and technology website.
 * The palette uses deep blues and neutral grays to convey
 * professionalism without feeling stuffy. Responsive rules ensure
 * the site is easy to read on desktops and mobile devices alike.
 */

/* Prevent horizontal overflow caused by 100% width + padding */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #ffffff;
}

header {
  /* Light gray header to reduce visual weight; uses flexbox to center logo and navigation */
  background: #F3F5F9;
  color: #1F4E79;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  min-height: auto;
}

/* Position navigation centered below the logo */
header nav {
  margin-left: 0;
  margin-top: 1rem;
  width: 100%;
  max-width: 960px;
}

/* Header logo on interior pages: use the horizontal logo for branding */
.header-logo {
  display: block;
  height: 100px; /* Reduced for better proportion */
  width: auto;
  max-width: 400px; /* Reduced maximum width */
  object-fit: contain;
  margin-left: 0;
  margin-right: 0;
}

/* Site brand in the header (icon plus text) */
.site-brand {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

/* Icon in the site brand */
.brand-icon {
  height: 70px;
  width: 70px;
  object-fit: contain;
  margin-right: 0.75rem;
}

/* Text in the site brand */
.brand-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: #173f6e;
  line-height: 1;
}

/* Large logo displayed in the hero section */
.hero-logo {
  display: block;
  width: clamp(90px, 10vw, 140px);
  height: auto;
}

/* Container for the hero logo to provide a white background for contrast */
.logo-box {
  background: #ffffff;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

nav ul li a {
  color: #173f6e;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

nav ul li a:hover {
  text-decoration: underline;
}

/* Hero section on the home page */
.hero {
  background: #0d2d5d;
  color: #ffffff;
  padding: 5rem 0; /* Remove horizontal padding */
}

/* Band across the hero section used on the home page */
.hero-band {
  /* White band spanning the full width of the hero for the logo and headline */
  background: #ffffff;
  color: #173f6e;
  display: flex;
  align-items: stretch; /* Changed to stretch for full height alignment */
  padding: 2rem 1rem; /* Increased vertical padding */
  border-radius: 0; /* Remove border radius for full width */
  margin: 0; /* Remove margin to extend to edges */
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  min-height: 150px; /* Set minimum height for vertical centering */
}

/* Logo inside the hero band */
.hero-band .band-logo {
  flex: 0 0 25%;
  max-width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 1rem;
}

.hero-band .band-logo img {
  width: 100%;
  height: auto;
}

/* Title container inside the hero band */
.hero-band .band-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center horizontally */
  position: relative;
}

/* Headline lines within the hero band */
.hero-band .band-title h1 {
  margin: 0;
  padding: 0;
  color: #173f6e;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
}

/* Specific styling for the two title lines */
.title-line-1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem); /* Responsive font size */
  margin-bottom: 1.5rem !important; /* Space below first line */
}

.title-line-2 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem); /* Slightly smaller and responsive */
  margin-top: 1.5rem !important; /* Space above second line */
}

/* Responsive adjustments for the hero band */
@media (max-width: 600px) {
  .hero-band {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .hero-band .band-logo {
    flex: 0 0 auto;
    max-width: 100%;
    margin-bottom: 1rem;
    padding-right: 0;
  }
  .title-line-1, .title-line-2 {
    white-space: normal; /* Allow wrapping on mobile */
    font-size: 1.5rem !important;
    margin: 0.5rem 0 !important;
  }
}

/* Highlighted name within hero description - made 25% bigger */
.highlight-name {
  font-weight: bold;
  font-size: 1.625rem; /* Increased from 1.3rem (25% bigger) */
}

/* Global heading size within the hero */
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* Paragraph styling within the hero */
.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  background: #007ACC;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease;
}

.btn:hover {
  background: #005d99;
}

/* Center the call-to-action button in the hero description */
.hero-desc .btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: 3rem 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1F4E79;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.card {
  flex: 1 1 300px;
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h3 {
  margin-top: 0;
  color: #1F4E79;
}

/* Resource list spacing */
.resources-list li {
  margin-bottom: 1.25rem;
}

/* Headings within sections (e.g., tech-services subsections) */
.section h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #1F4E79;
}

.footer {
  background: #1F4E79;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* Home page specific styles */

/* Hide the header logo on the home page since the large logo appears in the hero */
.home header .header-logo {
  display: none;
}

/* Hero container on the home page */
/* --- Home page hero layout update (logo block extends down alongside description) --- */
/* When the home hero uses a two-column layout, keep the left "logo block" spanning the full hero content height. */

/* Place the existing hero band elements into the grid */

/* Allow the description to sit in the second column when using the grid layout */

/* Make the left logo area feel like a dark-blue "square/column" and extend it down through the description */


/* Keep the logo readable against the dark background */

/* Mobile: stack the layout so the logo block does not create awkward horizontal scrolling */
@media (max-width: 600px) {
    
  }


.hero-content {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* On the home page, allow the hero content to span the full width so the band runs across the page */
.home .hero-content {
  max-width: none;
  width: 100%;
}

/* Description below the logo and title */
.hero-desc {
  margin-top: 1.5rem;
  width: 100%;
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

/* Card titles as links */
.card h3 a {
  color: #1F4E79;
  text-decoration: none;
}
.card h3 a:hover {
  text-decoration: underline;
}

/* Specific styles for headshot on the about page */
.headshot {
  float: left;
  margin-right: 1rem;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
}

/* Contact form styling */
form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  font-weight: bold;
  color: #1F4E79;
}

input, textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button[type="submit"] {
  align-self: flex-start;
}

/* Privacy notice styling */
.privacy-notice {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1F4E79;
}

.privacy-notice h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #1F4E79;
  font-size: 1.1rem;
}

.privacy-notice p {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .header-logo {
    height: 65px; /* Intermediate size for tablets */
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  nav ul {
    justify-content: center;
    gap: 0.5rem;
  }
  nav ul li a {
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .cards {
    flex-direction: column;
  }
  .headshot {
    float: none;
    margin: 0 auto 1rem auto;
    display: block;
  }
  .header-logo {
    height: 55px; /* Smaller on mobile */
    max-width: 250px;
  }
  header {
    padding: 0.75rem 1rem; /* Reduced padding on mobile */
  }
  header nav {
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  nav ul li a {
    font-size: 0.85rem;
    padding: 0.25rem;
  }
  .header-logo {
    height: 50px;
    max-width: 200px;
  }
}
/* Home page: centered help link + CTA */
.help-link .help-heading {
  text-align: center;
  margin-bottom: 1rem;
}
.help-link .help-heading a {
  color: inherit;
  text-decoration: none;
}
.help-link .help-heading a:hover {
  text-decoration: underline;
}
.help-link .help-cta {
  display: flex;
  justify-content: center;
}

/* Home hero mobile layout */
@media (max-width: 768px) {
    
  .hero-logo {
    width: 120px;
    margin: 0 auto;
  }
}


/* --- Home hero layout (restored classic: blue strip, white band, blue description) --- */
body.home .hero{
  background: #0B2D5B;
  padding: 3.25rem 0 0;
}

body.home .hero-content{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 2.25rem;
}

body.home .hero-band{
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 3rem 2.5rem;
}

body.home .hero-logo{
  width: 240px;
  height: auto;
  display: block;
}

/* Let the logo overlap the blue above/below like the original design */
body.home .hero-band .band-logo{
  flex: 0 0 auto;
  margin-top: -70px;
  margin-bottom: -70px;
}

body.home .hero-band .band-title{
  flex: 1;
  text-align: center;
}

body.home .hero-band .band-title h1{
  margin: 0;
  color: #1F4E79;
}

body.home .hero-desc{
  background: #0B2D5B;
  color: #ffffff;
  text-align: center;
  padding: 2rem 2.5rem;
}

body.home .hero-desc p{
  margin: 0.75rem 0;
}

body.home .hero-desc .highlight-name{
  color: #ffffff;
  font-weight: 700;
}

/* Center the 'How Aligned Discovery Can Help' link heading and the button */
.help-heading{
  text-align: center;
}

.help-heading a{
  color: inherit;
  text-decoration: none;
}

.help-heading a:hover{
  text-decoration: underline;
}

.help-cta{
  text-align: center;
  margin-top: 1.25rem;
}

/* Mobile adjustments */
@media (max-width: 768px){
  body.home .hero{
    padding-top: 2rem;
  }
  body.home .hero-band{
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1.25rem;
  }
  body.home .hero-band .band-logo{
    margin-top: -40px;
    margin-bottom: 0;
  }
  body.home .hero-logo{
    width: 160px;
  }
  body.home .hero-desc{
    padding: 1.5rem 1.25rem;
  }
}


/* Main navigation spacing */
nav ul,
.main-nav {
  display: flex;
  justify-content: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  nav ul,
  .main-nav {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}