/* global.css - Replica of Insight Therapy Website Styles */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');

/* CSS Reset & Basic Setup (adjust if needed, minimal for Astro often sufficient) */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif; /* Updated to use Raleway font */
    line-height: 1.6;
    color: #555; /* [COLOR: Approximate body text color from site] */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Color Palette (As close as possible based on visual inspection - refine with actual hex codes) */
:root {
    --primary-color: #008080;        /* [COLOR: Main Teal/Blue color - Get exact hex] */
    --primary-color-darker: #006666; /* [COLOR: Darker shade for hovers/accents - Adjust darken amount if needed] */
    --secondary-color: #333333;      /* [COLOR: Dark Grey Headings/Strong Text - Get exact hex] */
    --text-color: #555555;           /* [COLOR: Body Text Color - Get exact hex] */
    --background-color: #ffffff;     /* [COLOR: White Background - Get exact hex if slightly off-white] */
    --light-background: #f9f9f9;     /* [COLOR: Light Grey Section Background - Get exact hex] */
    --accent-background: #f0f0f0;    /* [COLOR: Lighter Accent Background - Get exact hex] */
    --border-color: #ddd;            /* [COLOR: Light Border Color - Get exact hex] */
    --footer-background: #f8f8f8;    /* [COLOR: Footer Background - Get exact hex] */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif; /* Updated to use Raleway font */
    color: var(--secondary-color);
    font-weight: bold;
    line-height: 1.3;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

h2 { font-size: 2.2rem; }  /* [SIZE: Adjust if different] */
h3 { font-size: 1.8rem; }  /* [SIZE: Adjust if different] */
/* Add styles for h4, h5, h6 if used */

p {
    margin-bottom: 1.2em;
    font-size: 1rem; /* [SIZE: Adjust body text size if different] */
    line-height: 1.7;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-color-darker); /* Darker primary color on hover */
    text-decoration: underline; /* Consistent underline on hover */
}

/* Layout & Containers */
.container {
    max-width: 1200px; /* [WIDTH: Verify container width from site - could be slightly different] */
    margin: 0 auto;
    padding-left: 30px; /* [PADDING: Check left/right padding on site - might be different on mobile] */
    padding-right: 30px;
}

.section-padding {
    padding-top: 80px;  /* [PADDING: Standard vertical section padding - Verify from site] */
    padding-bottom: 80px; /* [PADDING: Standard vertical section padding - Verify from site] */
}

/* Buttons */
.button {
    display: inline-block;
    padding: 14px 32px; /* [PADDING: Button padding - Verify from site] */
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 5px; /* [RADIUS: Button border radius - Verify from site] */
    font-weight: 500;
    font-size: 1.1rem; /* [SIZE: Button font size - Verify from site] */
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
    background-color: var(--primary-color-darker); /* Darker primary on hover */
    transform: scale(1.03); /* Subtle scale on hover */
    text-decoration: none; /* Ensure no underline on hover */
    color: white; /* Maintain text color */
}

.button-secondary {
    background-color: var(--accent-background); /* Secondary button background */
    color: var(--secondary-color); /* Secondary button text color */
}

.button-secondary:hover {
    background-color: lighten(var(--accent-background), 5%); /* Slightly lighten on hover */
    color: var(--secondary-color); /* Maintain text color */
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header Styles (Generalized - component-specific styles will override) */
header {
    background-color: var(--background-color); /* White header background */
    padding: 15px 0; /* [PADDING: Header vertical padding - Verify from site] */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle header shadow - Verify from site */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* Ensure header is on top */
}

/* Footer Styles (Generalized - component-specific styles will override) */
footer {
    background-color: var(--footer-background); /* Footer background color */
    padding: 50px 0; /* [PADDING: Footer vertical padding - Verify from site] */
    border-top: 1px solid var(--border-color); /* Light top border - Verify border style from site */
    color: #777; /* [COLOR: Footer text color - Verify from site] */
    text-align: center;
    font-size: 0.9rem; /* [SIZE: Footer font size - Verify from site] */
}

/* Media Queries for Responsiveness - Adjust breakpoints and styles based on site inspection */
@media (max-width: 768px) { /* Example breakpoint - adjust as needed */
    .container {
      padding-left: 20px; /* Reduced horizontal padding on smaller screens */
      padding-right: 20px;
    }

    .section-padding {
      padding-top: 60px; /* Reduced vertical padding on smaller screens */
      padding-bottom: 60px;
    }

    h2 { font-size: 2rem; } /* [SIZE: Adjust h2 size on smaller screens if needed] */
    h3 { font-size: 1.6rem; } /* [SIZE: Adjust h3 size on smaller screens if needed] */
    /* Add more responsive font size adjustments or layout changes as needed based on site */
}

/* Add any other global styles you identify from inspecting the Insight Therapy website */