/* assets/main.css */

/* Google Fonts (Inter) - Initialisation */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Custom Scrollbar for Webkit Browsers */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1F2937; /* gray-800 */
}

::-webkit-scrollbar-thumb {
    background: #34D399; /* green-500 */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #10B981; /* green-600 */
}

/* Smooth Scroll for Anchor Links */
html {
    scroll-behavior: smooth;
}

/* Remove text-decoration from buttons */
button {
    text-decoration: none !important;
}

/* General body background and text color */
body {
    background-color: #111827; /* Tailwind gray-900 */
    color: #F9FAFB; /* Tailwind gray-100 */
}

/* Custom styles for form inputs focus state */
input:focus,
textarea:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.5); /* green-500 with opacity */
}

/* Carousel specific styles */
#carousel-slides {
    display: flex;
    width: 100%;
}

#carousel-slides > div {
    flex: 0 0 100%; /* Each slide takes full width */
}

/* Cookie banner specific styles */
#cookie-banner.show {
    transform: translateY(0);
    opacity: 1;
}

/* Cookie modal specific styles */
#cookie-modal.show {
    opacity: 1;
}

/* Form Toast specific styles */
#form-toast.show {
    opacity: 1;
}
/* New styles for content within .dataClauseFrame */

.dataClauseFrame {
    /* Padding for the content frame */
    padding-top: 4rem; /* 64px top padding */
    padding-bottom: 4rem; /* 64px bottom padding */
    padding-left: 1.5rem; /* 24px left padding */
    padding-right: 1.5rem; /* 24px right padding */
    /* Max width to prevent content from stretching too wide and center it */
    max-width: 72rem; /* 1152px max width */
    margin-left: auto;
    margin-right: auto;
}

.dataClauseFrame h1 {
    /* Heading 1 styles */
    font-size: 2.5rem; /* 40px */
    font-weight: 700; /* Bold */
    margin-top: 2.5rem; /* Top margin */
    margin-bottom: 1.5rem; /* Bottom margin */
    line-height: 1.2; /* Line height for better readability */
    color: #E5E7EB; /* Tailwind gray-200 for headings */
}

.dataClauseFrame h2 {
    /* Heading 2 styles */
    font-size: 2rem; /* 32px */
    font-weight: 700; /* Bold */
    margin-top: 2rem; /* Top margin */
    margin-bottom: 1.25rem; /* Bottom margin */
    line-height: 1.25; /* Line height */
    color: #E5E7EB; /* Tailwind gray-200 */
}

.dataClauseFrame h3 {
    /* Heading 3 styles */
    font-size: 1.75rem; /* 28px */
    font-weight: 600; /* Semi-bold */
    margin-top: 1.75rem; /* Top margin */
    margin-bottom: 1rem; /* Bottom margin */
    line-height: 1.3; /* Line height */
    color: #E5E7EB; /* Tailwind gray-200 */
}

.dataClauseFrame h4 {
    /* Heading 4 styles */
    font-size: 1.5rem; /* 24px */
    font-weight: 600; /* Semi-bold */
    margin-top: 1.5rem; /* Top margin */
    margin-bottom: 0.75rem; /* Bottom margin */
    line-height: 1.35; /* Line height */
    color: #E5E7EB; /* Tailwind gray-200 */
}

.dataClauseFrame h5 {
    /* Heading 5 styles */
    font-size: 1.25rem; /* 20px */
    font-weight: 500; /* Medium */
    margin-top: 1.25rem; /* Top margin */
    margin-bottom: 0.5rem; /* Bottom margin */
    line-height: 1.4; /* Line height */
    color: #E5E7EB; /* Tailwind gray-200 */
}

.dataClauseFrame p {
    /* Paragraph styles */
    font-size: 1.125rem; /* 18px */
    margin-top: 1rem; /* Top margin */
    margin-bottom: 1rem; /* Bottom margin */
    line-height: 1.7; /* Line height for readability */
    color: #D1D5DB; /* Tailwind gray-300 for paragraph text */
}

.dataClauseFrame ul {
    /* Unordered list styles */
    margin-top: 1rem; /* Top margin */
    margin-bottom: 1rem; /* Bottom margin */
    padding-left: 1.5rem; /* Indent for list items */
    list-style-type: disc; /* Default disc bullet */
    color: #D1D5DB; /* Tailwind gray-300 */
}

.dataClauseFrame li {
    /* List item styles */
    margin-bottom: 0.5rem; /* Spacing between list items */
    line-height: 1.6; /* Line height for list items */
}

/* Specific styling for the last paragraph/list item to prevent excessive bottom margin */
.dataClauseFrame p:last-child,
.dataClauseFrame ul:last-child {
    margin-bottom: 0;
}