/*
Theme Name: AmbeInfo Pro
Theme URI: https://ambeinfotech.com/
Author: ChatGPT
Description: A modern and professional WordPress theme tailored for Ambe Infotech.  It features a clean layout, responsive navigation, and a refined colour palette that conveys trust, professionalism and innovation.  Built with accessibility and readability in mind, the design leverages high‑contrast colours and flexible sections to showcase services, case studies, testimonials and blog posts.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ambeinfopro
*/

/* CSS variables for easy theme customisation. These colours are chosen based on colour psychology that associates bold blues and greys with professionalism and trust【466714339217741†L80-L90】.  The teal accent evokes innovation and energy while a warm gold draws attention to calls‑to‑action. */
:root {
  --primary-color: #143D59; /* dark navy: trust and professionalism */
  --secondary-color: #00A2A2; /* teal: innovation and AI */
  --accent-color: #FFB400; /* warm gold: highlights & calls to action */
  --background-color: #F8FAFC; /* light grey background */
  --text-color: #141414; /* near black for high readability */
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Inter', sans-serif;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  line-height: 1.2;
  margin-bottom: 0.5em;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* Container utility */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Header and navigation */
header.site-header {
  background-color: var(--background-color);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

header .site-logo img {
  height: 60px;
}

/* When no custom logo is set, the site title is shown instead. Style it similarly to a logo for alignment. */
header .site-logo .site-title {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  display: block;
  line-height: 1;
}

nav.primary-menu {
  position: relative;
}

nav.primary-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

nav.primary-menu ul li {
  position: relative;
}

/*
 * Drop‑down menu styling
 *
 * Hide nested lists by default, then reveal them on hover.  This ensures the primary
 * navigation remains uncluttered while providing access to child pages.  Use a simple
 * white background with a border and subtle shadow for the drop‑down.
 */
nav.primary-menu ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.5rem 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  z-index: 1000;
}
nav.primary-menu ul li:hover > ul {
  display: block;
}
nav.primary-menu ul li ul li {
  width: 100%;
  padding: 0;
}
nav.primary-menu ul li ul li a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-color);
}
nav.primary-menu ul li ul li a:hover {
  background-color: var(--primary-color);
  color: #fff;
}

nav.primary-menu ul li a {
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.2s;
}

nav.primary-menu ul li.current-menu-item a {
  color: var(--secondary-color);
}

/* Mobile navigation toggle */
#nav-toggle {
  display: none;
}

label.nav-toggle-label {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  nav.primary-menu ul {
    flex-direction: column;
    background-color: var(--background-color);
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    border: 1px solid #eee;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    padding: 1rem;
    display: none;
  }
  /* Show menu when checkbox checked */
  #nav-toggle:checked + nav.primary-menu ul {
    display: flex;
  }
  label.nav-toggle-label {
    display: block;
    color: var(--primary-color);
  }
}

/* Hero section */
.hero {
  background: linear-gradient(120deg, var(--primary-color) 30%, var(--secondary-color) 100%);
  color: #fff;
  padding: 6rem 0 4rem 0;
  text-align: center;
}

.hero h1 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  color: #f0f0f0;
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.hero .cta-button {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s;
}
/* Use a slightly darker accent colour on hover since CSS doesn't support the SCSS darken() function natively. */
.hero .cta-button:hover {
  background-color: #e6a200;
}

/* Services section */
.services {
  padding: 4rem 0;
  background-color: #fff;
}
.services .section-title {
  text-align: center;
  margin-bottom: 3rem;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.service-card {
  background-color: var(--background-color);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.service-card svg {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  stroke: var(--secondary-color);
  fill: none;
  stroke-width: 2;
}
.service-card h3 {
  margin-bottom: 0.5rem;
}
.service-card p {
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  color: #4a4a4a;
}
.service-card a {
  font-weight: 500;
  color: var(--accent-color);
  display: inline-block;
  margin-top: 0.5rem;
}

/* Case studies section */
.cases {
  padding: 4rem 0;
  background-color: var(--background-color);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.case {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.case:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.case img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.case-content {
  padding: 1.5rem;
}
.case-content h3 {
  margin-bottom: 0.5rem;
}
.case-content p {
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  color: #4a4a4a;
}
.case-content a {
  font-weight: 500;
  color: var(--accent-color);
}

/* Testimonials */
.testimonials {
  padding: 4rem 0;
  background-color: #fff;
}
.testimonial-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.testimonial {
  min-width: 300px;
  flex: 0 0 auto;
  background-color: var(--background-color);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  scroll-snap-align: start;
}
.testimonial .stars {
  color: #FFC107;
  margin-bottom: 0.5rem;
}
.testimonial p {
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  color: #4a4a4a;
}
.testimonial small {
  color: #6b7280;
}

/* Blog section */
.blog {
  padding: 4rem 0;
  background-color: var(--background-color);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.blog-post {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.blog-post:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.blog-post img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.blog-post .blog-content {
  padding: 1.5rem;
}
.blog-post .blog-content h3 {
  margin-bottom: 0.5rem;
}
.blog-post .blog-content .meta {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}
.blog-post .blog-content p {
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  color: #4a4a4a;
}
.blog-post .blog-content a {
  font-weight: 500;
  color: var(--accent-color);
}

/* Contact section */
.contact-section {
  padding: 4rem 0;
  background-color: #fff;
}
.contact-section .contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.contact-info {
  flex: 1 1 300px;
}
.contact-form {
  flex: 1 1 300px;
}
.contact-info h3 {
  margin-bottom: 1rem;
  color: var(--primary-color);
}
.contact-info p,
.contact-info a {
  font-size: 0.9375rem;
  color: #4a4a4a;
  margin-bottom: 0.5rem;
}

.contact-info a.cta {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-top: 1rem;
  transition: background-color 0.2s;
}
.contact-info a.cta:hover {
  background-color: var(--primary-color);
}

/* Footer */
footer.site-footer {
  background-color: var(--primary-color);
  color: #f0f0f0;
  padding: 2rem 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.footer-inner .footer-widget {
  flex: 1 1 200px;
}
.footer-inner h4 {
  color: #fff;
  margin-bottom: 1rem;
}
.footer-inner ul {
  list-style: none;
}
.footer-inner ul li {
  margin-bottom: 0.5rem;
}
.footer-inner ul li a {
  color: #f0f0f0;
  font-size: 0.875rem;
}
.footer-inner ul li a:hover {
  color: var(--secondary-color);
}
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.8125rem;
}

/* Utility classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}