/*
  Stylesheet for Lashik Solutions website
  This CSS defines the overall look and feel of the site, using the
  colours from the company logo (navy, teal and orange) and a clean,
  modern layout. The design is mobile‑friendly and includes a sticky
  navigation bar, responsive grids for service sections and simple
  details elements for FAQs. Feel free to adjust spacing and break
  points to suit additional content.
*/

/* CSS Reset and global variables */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary: #24324a;        /* dark navy from logo */
  --color-secondary: #00706e;      /* teal from logo */
  --color-secondary-dark: #005255; /* darker teal for hover states */
  --color-accent: #e66a30;         /* orange accent */
  --color-accent-dark: #c75522;    /* darker orange for hover */
  --color-light: #f9f9f9;          /* light background */
  --color-muted: #fafafa;          /* subtle grey for cards */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --max-width: 1200px;
}

body {
  font-family: var(--font-body);
  color: var(--color-primary);
  background-color: white;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

/* Header and navigation */
header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 1000;
  display: flex;
  align-items: center;
  /* Allow items in the header to wrap onto a second line on very narrow
     screens.  Without flex‑wrap the long navigation plus call/WhatsApp
     icons can overflow the viewport and create a horizontal scroll bar.
     Using wrap ensures that elements will flow onto a new row when
     space runs out, preserving responsiveness. */
  flex-wrap: wrap;
  /* Space elements evenly but allow the call/WhatsApp icons to sit on the far right.
     We’ll add an extra container for the header call icons that flexes to the end. */
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

/* Add breathing room between the logo and the navigation on larger
   screens.  Without a margin the first menu item sits flush
   against the company name. */
header nav {
  margin-left: 2rem;
  /* Add a small amount of internal padding so the first menu item
     doesn’t sit flush against the logo.  Margin can sometimes
     collapse in flex containers; padding is more reliable here. */
  padding-left: 1rem;
}

/* Header call/WhatsApp icons
   These icons remain visible on all pages to encourage immediate contact. */
.header-cta-icons {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.header-cta-icons a {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
}
.header-cta-icons a:first-child i {
  color: var(--color-secondary);
}
.header-cta-icons a:last-child i {
  color: var(--color-accent);
}
.header-cta-icons a i {
  margin-right: 0.35rem;
}
.header-cta-icons a:hover {
  text-decoration: underline;
}

/*
  Adjust responsive breakpoints for the header call/WhatsApp icons and
  mobile navigation.  The original breakpoint (900px) hid the
  persistent call icons only at very narrow widths.  On some phones
  (e.g. 360 px wide) the icons were still visible and overlapped the
  hamburger menu.  Increasing the breakpoint to 1000 px ensures the
  icons disappear on most smartphone sizes and the mobile sticky bar
  takes over.  The navigation panel continues to slide in from the
  right as before.
*/
@media (max-width: 1000px) {
  /* Reset the margin on small screens so the off‑canvas menu aligns
     flush with the viewport edge. */
  header nav {
    margin-left: 0;
  }
}

header .logo {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  /* Add right margin so the first navigation link isn’t flush against
     the company name.  This margin only applies on larger screens,
     the media queries below reset it on mobile. */
  margin-right: 2rem;
}

header .logo img {
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
}

nav {
  position: relative;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  /* Use a gap instead of margins to space out navigation items evenly. */
  gap: 1.5rem;
}

nav li {
  /* Margins are handled via the gap on the parent <ul>, so remove any
     default margins on list items. */
  margin-left: 0;
}

nav a {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--color-accent);
}

/* Indicate the currently active page in the navigation bar.  Each
   link on its corresponding page has the class "active" set in the
   markup.  Highlight it with the accent colour and an underline to
   improve orientation for users. */
nav a.active {
  color: var(--color-accent);
  position: relative;
}
nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 2px;
  background-color: var(--color-accent);
}

/* Call‑to‑action band
   A bold section near the end of each page encouraging users to
   schedule a free consultation or chat on WhatsApp. The band uses
   our secondary and accent colours for contrast and includes buttons
   for phone and WhatsApp contact. */
.cta-band {
  background-color: var(--color-secondary);
  color: white;
  padding: 3rem 1rem;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.cta-band p {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.cta-buttons a {
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: white;
  transition: background-color 0.3s ease;
}
.cta-buttons a i {
  margin-right: 0.5rem;
}
.cta-buttons a.call-btn {
  background-color: var(--color-secondary-dark);
}
.cta-buttons a.call-btn:hover {
  background-color: var(--color-secondary);
}
.cta-buttons a.chat-btn {
  background-color: var(--color-accent);
}
.cta-buttons a.chat-btn:hover {
  background-color: var(--color-accent-dark);
}

/* Mobile sticky contact bar
   On mobile devices (<=900px) we hide the header call/WhatsApp icons and
   provide a fixed bar at the bottom of the screen with large tap targets
   for calling or chatting. This prevents overlap issues in the header
   and ensures the calls to action are always accessible. */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-secondary);
  display: none;
  justify-content: space-around;
  align-items: center;
  padding: 0.75rem 1rem;
  z-index: 1000;
}
.mobile-sticky-bar a {
  color: white;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.mobile-sticky-bar a i {
  margin-right: 0.5rem;
}
@media (max-width: 900px) {
  .mobile-sticky-bar {
    display: flex;
  }
  .header-cta-icons {
    display: none;
  }
}

/* About teaser on homepage */
.about-teaser {
  background-color: var(--color-muted);
  padding: 2rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: left;
}
.about-teaser i {
  font-size: 3rem;
  color: var(--color-secondary);
}
.about-teaser .teaser-text {
  max-width: 600px;
}
.about-teaser .teaser-text h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.about-teaser .teaser-text p {
  margin-bottom: 1rem;
}
.about-teaser .teaser-text a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.about-teaser .teaser-text a:hover {
  text-decoration: underline;
}

/* EB‑5 spotlight section on homepage */
.eb5-spotlight {
  background-color: var(--color-light);
  padding: 2rem 1rem;
  text-align: center;
}
.eb5-spotlight h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.eb5-spotlight p {
  max-width: 700px;
  margin: 0 auto 1rem;
  font-size: 1rem;
}
.eb5-spotlight a {
  display: inline-block;
  background-color: var(--color-secondary-dark);
  color: white;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.eb5-spotlight a:hover {
  background-color: var(--color-secondary);
}

/* Trust logos and credentials */
.trust-logos {
  background-color: var(--color-muted);
  padding: 2rem 1rem;
  text-align: center;
}
.trust-logos h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.trust-logos .logo-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.trust-logos .logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 180px;
}
.trust-logos .logo-item i {
  font-size: 2.5rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}
.trust-logos .logo-item span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Mobile navigation toggle button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-primary);
  cursor: pointer;
}

/* Hero section */
.hero {
  position: relative;
  background-image: url('images/hero-bg.png');
  background-size: cover;
  background-position: center;
  color: white;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn i {
  margin-right: 0.5rem;
}

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

.btn-primary:hover {
  background-color: var(--color-secondary-dark);
}

.btn-secondary {
  background-color: var(--color-accent);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--color-accent-dark);
}

/* Generic section styling */
section {
  padding: 3rem 1rem;
}

.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Services overview */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.service-item {
  background-color: var(--color-light);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Ensure entire card (now an anchor) looks like a block with no default
     link styles */
  display: block;
  color: var(--color-primary);
  text-decoration: none;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.service-item i {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.service-item h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.service-item p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #555;
}

/* Remove nested link styling now that the entire card is the link */

/* Trust/partners section */
.trust-section {
  background-color: var(--color-muted);
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 2rem 1rem;
  text-align: center;
}

.trust-section p {
  font-size: 1rem;
  max-width: 900px;
  margin: 0 auto;
  color: #444;
}

/* Testimonials */
.testimonials {
  background-color: var(--color-light);
  padding: 3rem 1rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.testimonial-item {
  background-color: white;
  border: 1px solid #e6e6e6;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  color: #444;
}

.testimonial-item span {
  display: block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Resource cards */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.resource-item {
  background-color: var(--color-light);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-item h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.resource-item p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #555;
}

.resource-item a {
  align-self: flex-start;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.resource-item a:hover {
  text-decoration: underline;
}

/* Generic page content styles */
.page-hero {
  background-color: var(--color-primary);
  color: white;
  padding: 3rem 1rem;
  text-align: center;
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.page-hero p {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0.5rem auto 0;
}

/* Content layout */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.content h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.content h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.content p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #444;
}

.content ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.content ul li {
  margin-bottom: 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

th, td {
  border: 1px solid #e6e6e6;
  padding: 0.75rem;
  text-align: left;
}

th {
  background-color: var(--color-muted);
  font-weight: 600;
}

details {
  margin-bottom: 1rem;
  background-color: var(--color-light);
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}

details[open] {
  background-color: #fff;
}

/* Footer */
footer {
  background-color: var(--color-primary);
  color: white;
  padding: 2rem 1rem;
  margin-top: 3rem;
}

footer .footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

footer .footer-col {
  flex: 1 1 220px;
  min-width: 200px;
}

footer h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: white;
}

footer p, footer a {
  font-size: 0.95rem;
  color: #ddd;
  text-decoration: none;
}

footer a:hover {
  color: var(--color-accent);
}

footer .footnotes {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #ccc;
}

footer .footnotes a {
  color: #ccc;
  text-decoration: underline;
  margin-right: 0.5rem;
}

/* Responsive styles */
@media (max-width: 900px) {
  /* Make the navigation transform into a slide‑in panel.  At smaller
     widths the horizontal menu doesn’t fit, so we hide it off‑screen
     until the user taps the hamburger icon.  The panel slides in from
     the right and takes up 70 % of the viewport width.  A higher
     z‑index ensures the menu appears above other content. */
  nav {
    position: fixed;
    top: 0;
    right: -70%;
    width: 70%;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1500;
  }
  nav.open {
    right: 0;
  }
  nav ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 4rem 1.5rem;
  }
  nav li {
    margin: 0.75rem 0;
  }
  /* Show the hamburger on small screens */
  .nav-toggle {
    display: block;
  }
  /* Keep the header above the slide‑in menu */
  header {
    position: sticky;
    top: 0;
    z-index: 2000;
  }

  /* Remove the extra margin on the logo so the menu aligns neatly
     when the off‑canvas navigation is triggered. */
  header .logo {
    margin-right: 0;
  }
}

/* Additional component styles */

/* Button links used in resources page */
.btn-link {
  display: inline-block;
  color: var(--color-secondary);
  font-weight: 600;
  margin-top: 0.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-secondary);
}

.btn-link:hover {
  color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

/*
  Blog listing and article styles
  These classes define the appearance of the blog landing page and
  individual blog posts.  The blog listing uses a simple grid of cards
  that summarise each article with a title, publication date and
  excerpt.  Blog posts themselves have generous margins and clear
  headings for easy reading on both desktop and mobile devices.
*/
.blog-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.blog-card {
  background-color: var(--color-muted);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blog-card h3 {
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--color-primary);
}
.blog-card .meta {
  font-size: 0.85rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}
.blog-card p {
  margin-bottom: 1rem;
}
.blog-card a {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}
.blog-card a:hover {
  text-decoration: underline;
}

/* Blog post layout */
.blog-post {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
}
.blog-post h1 {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.blog-post .meta {
  font-size: 0.9rem;
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}
.blog-post h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}
.blog-post p {
  margin-bottom: 1rem;
}

/* Contact page layout */
.contact-page {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.contact-info {
  flex: 1 1 280px;
}

.contact-form-container {
  flex: 1 1 300px;
  background-color: var(--color-light);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.contact-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--color-primary);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-body);
}

.contact-form button {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  font-weight: 600;
  background-color: var(--color-secondary);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: var(--color-secondary-dark);
}

@media (max-width: 700px) {
  .contact-page {
    flex-direction: column;
  }
}