/*--------------------------------------------------------------
# Root Variables
--------------------------------------------------------------*/
:root {
  --default-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Manrope", sans-serif; /* Or keep Ubuntu if you like its distinctiveness */
  --nav-font: "Manrope", sans-serif; /* Also use Manrope for nav if you want consistency */
  /* ... rest of your variables ... */
  /* Global Colors */
  --background-color: #1f1f1f; /* Background color for the entire website */
  --default-color: #ffffff; /* Default text color */
  --heading-color: #ffffff; /* Color for headings */
  --accent-color: #a6a6a6; /* Accent color for brand elements */
  --surface-color: #232323; /* Background for boxed elements */
  --contrast-color: #ffffff; /* Contrast color for text on accent/heading/default backgrounds */
  --goldaccent-color: #9b805a;

  /* Default Sizes & Weights (based on our previous discussion) */
  --body-main-size: 18px;
  --body-main-weight: 400; /* Normal */

  --nav-font-size: 16px;
  --nav-font-weight: 500; /* Medium, for slight prominence */

  --hero-subheading-size: 24px;
  --hero-subheading-weight: 400; /* Normal, supporting role */

  --sect-heading2-size: 32px;
  --sect-heading2-weight: 600; /* Semi-Bold, clear sub-heading */

  --sect-heading-size: 48px;
  --sect-heading-weight: 700; /* Bold, primary section heading */

  --hero-heading-size: 64px;
  --hero-heading-weight: 800; /* Extra Bold, maximum impact for hero */

  --logo_txt_size: 77px;
  --logo_txt_weight: 700; /* Example: could be 700, 800, or 900 based on logo design */
}

/*--------------------------------------------------------------
# Base Body Styles
--------------------------------------------------------------*/
body {
  font-family: var(--default-font); /* Using Roboto as the default font */
  background-color: var(--background-color); /* Apply site background color */
  color: var(--default-color); /* Apply default text color */
  font-size: var(--body-main-size);
  font-weight: var(--body-main-weight);
}

/*--------------------------------------------------------------
# Form Specific Styles ('.access' context)
--------------------------------------------------------------*/

/* Main Page Heading (H1) - like "Access My Private Profile" */
.access h1 {
  font-family: var(--heading-font);
  font-size: var(--hero-heading-size); /* Using variable */
  font-weight: var(--hero-heading-weight); /* Using variable */
  line-height: 1.1;
  margin-bottom: 15px;
  color: var(--heading-color);
  text-align: left; /* Keep left alignment as per original, 'text-align: left' implies not centered. If you want centered, change this to 'center' */
}

.access h1 .accent-text {
  color: var(--accent-color);
  position: relative;
}

.access h1 .accent-text::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color), transparent 50%)
  );
}

/* General Subheading (H2) - Use for secondary headings on a page, larger than form titles */
.access h2 {
  font-family: var(--heading-font);
  font-size: var(--sect-heading-size); /* Using variable */
  font-weight: var(--sect-heading-weight); /* Using variable */
  color: var(--heading-color);
  margin-bottom: 20px;
  text-align: left;
}
.access h2 .accent-text {
  color: var(--accent-color);
  position: relative;
}

.access h2 .accent-text::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color), transparent 50%)
  );
}

/* Form Title (H2 inside max-w-md) - Used for titles like "Enter Passcode" or "Don't have a passcode?" */
.access .max-w-md h2 {
  /* Targeting the h2 inside the main form wrapper, applying an H3-like style from our scale */
  font-family: var(--heading-font);
  font-size: var(
    --hero-subheading-size
  ); /* Using variable for clear title for each form section */
  font-weight: var(
    --nav-font-weight
  ); /* Using nav weight as it's typically 'medium' for slight prominence */
  line-height: 1.1;
  margin-bottom: 15px;
  color: var(--heading-color);
  text-align: left;
}

/* Form Section Heading (H3) - Use if you have sub-sections within a larger form */
.access h3 {
  font-family: var(--heading-font);
  font-size: var(
    --sect-heading2-size
  ); /* Using variable, smaller than form title, but distinct */
  font-weight: var(--sect-heading2-weight);
  color: var(--heading-color);
  margin-bottom: 15px;
}

/* Form Sub Heading (H4) - Used for introductory text under a form title, like "Request access to my private profile." */
.access p.text-gray-600.text-sm.mb-4.text-center {
  font-family: var(--default-font);
  font-size: var(
    --body-main-size
  ); /* Using variable: Easily readable descriptive text */
  font-weight: var(--body-main-weight); /* Using variable */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 20px;
  text-align: center;
}

/* Form Field Name (H6) - Applied to Labels */
.access label {
  font-family: var(--default-font);
  font-size: var(
    --nav-font-size
  ); /* Using variable: Clear and concise for field names */
  font-weight: var(--nav-font-weight); /* Using variable: Bold to stand out */
  color: var(--default-color); /* Default text color for labels */
  display: block; /* Ensures label takes full width for alignment */
  margin-bottom: 8px; /* Spacing below label */
}

/* Form Textbox Description (Custom Class) - Small instructional text below an input */
.access .form-field-description {
  font-family: var(--default-font);
  font-size: var(--nav-font-size); /* Using variable */
  font-weight: var(--nav-font-weight); /* Using variable */
  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 50%
  ); /* Lighter color */
  margin-top: 5px; /* Small spacing above */
  display: block; /* Ensures it's on its own line */
}

/* Form Container Boxes */
.access .border.border-gray-200 {
  border: 2px solid var(--accent-color) !important; /* Accent color border */
  border-radius: 0.75rem !important; /* Rounded corners */
  padding: 2.5rem; /* Slightly more padding for visual comfort */
  background-color: var(
    --surface-color
  ); /* Use surface color for card background */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Form Text Inputs and Textareas Alignment & Styling */
.access input[type="text"],
.access input[type="password"],
.access input[type="email"],
.access textarea {
  background-color: color-mix(
    in srgb,
    var(--surface-color),
    transparent 20%
  ); /* Lighter background than form box */
  color: var(--default-color); /* Text color inside input */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%); /* Subtle border */
  border-radius: 0.375rem; /* Match other rounded elements */
  padding: 12px 15px; /* Consistent padding */
  width: 100%; /* Full width for alignment */
  line-height: 1.5; /* Good line height for text */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.access input[type="text"]:focus,
.access input[type="password"]:focus,
.access input[type="email"]:focus,
.access textarea:focus {
  outline: none; /* Remove default outline */
  border-color: var(--accent-color); /* Accent color on focus */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 70%); /* Accent glow on focus */
}

.access input::placeholder,
.access textarea::placeholder {
  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 50%
  ); /* Lighter placeholder text */
}

/* Form Buttons */
.access button[type="submit"] {
  font-family: var(--default-font);
  font-size: var(--nav-font-size); /* Using variable */
  font-weight: var(--nav-font-weight); /* Using variable */
  padding: 12px 25px; /* Consistent padding */
  border-radius: 0.5rem; /* Rounded corners for buttons */
  width: 100%; /* Full width as per your current HTML */
  transition: all 0.3s ease;
  cursor: pointer;
  border: none; /* Remove default button border */

  /* Applying accent color and hover effect */
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.access button[type="submit"]:hover {
  background-color: color-mix(
    in srgb,
    var(--accent-color),
    black 15%
  ); /* Slightly darker on hover */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--accent-color), transparent 60%); /* Subtle shadow */
}

/* Style for the copy button (specific to generate_passcode.php if applied there) */
.copy-button {
  background-color: var(--accent-color); /* Green */
  color: var(--contrast-color);
  padding: 8px 12px;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: var(--nav-font-size); /* Using variable for consistency */
  font-weight: var(--nav-font-weight); /* Using variable for consistency */
  line-height: 1.25rem; /* This can stay, or be adjusted if needed */
  transition: background-color 0.3s ease;
}
.copy-button:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
}
.copy-message {
  margin-left: 10px;
  font-size: var(--nav-font-size); /* Using variable for consistency */
  color: var(--accent-color); /* Green-600 */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.copy-message.show {
  opacity: 1;
}

/* Styling for success/error/info messages */
.form-status-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: 500;
  border: 1px solid transparent; /* default border */
}

/* Specific styles for success messages */
.form-status-message.bg-green-100 {
  background-color: #d1fae5; /* Tailwind green-100 */
  color: #065f46; /* Tailwind green-700 */
  border-color: #10b981; /* Tailwind green-500 */
}

/* Specific styles for error messages */
.form-status-message.bg-red-100 {
  background-color: #fee2e2; /* Tailwind red-100 */
  color: #991b1b; /* Tailwind red-700 */
  border-color: #ef4444; /* Tailwind red-500 */
}

/* Specific styles for info messages (if applicable from process_access_request) */
.form-status-message.bg-blue-100 {
  background-color: #dbeafe; /* Tailwind blue-100 */
  color: #1e40af; /* Tailwind blue-700 */
  border-color: #3b82f6; /* Tailwind blue-500 */
}

/*--------------------------------------------------------------
# Media Queries for Responsiveness
--------------------------------------------------------------*/
@media (max-width: 992px) {
  .access h1 {
    font-size: calc(
      var(--hero-heading-size) * 0.8
    ); /* Scale down hero heading */
  }
  .access h2 {
    font-size: calc(var(--sect-heading-size) * 0.8); /* Scale down general H2 */
  }
  .access .max-w-md h2 {
    font-size: calc(
      var(--hero-subheading-size) * 0.9
    ); /* Scale down form title (H2 inside max-w-md) */
  }
  /* Removed .access h5 as it's not defined in your variables or a standard heading level */
}

@media (max-width: 768px) {
  .access h1 {
    font-size: calc(
      var(--hero-heading-size) * 0.65
    ); /* Further scale down hero heading */
  }
  .access h2 {
    font-size: calc(
      var(--sect-heading-size) * 0.7
    ); /* Further scale down general H2 */
  }
  .access .max-w-md h2 {
    font-size: var(
      --body-main-size
    ); /* Form title can become body size on smallest screens */
  }
  /* Removed .access h5 again */
  .access .border.border-gray-200 {
    padding: 1.5rem; /* Adjust padding for smaller screens */
  }
}

/*--------------------------------------------------------------
# Specific Text Elements (outside main headings/forms)
--------------------------------------------------------------*/
.access .access-text .lead {
  font-size: var(--hero-subheading-size); /* Using variable for lead text */
  margin-bottom: 20px;
  color: var(--default-color);
}

.access .access-text .lead span {
  color: var(--accent-color);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 2px;
}
.access .access-text .superscript {
  font-size: calc(
    var(--body-main-size) * 1.2
  ); /* Make it relative to body text for consistency */
  vertical-align: super; /* Aligns text as superscript */
  font-weight: bold; /* Makes "AI" bold */
  color: var(--goldaccent-color); /* Customise colour for "AI" if needed */
  position: relative; /* Allows precise positioning */
  top: -15px; /* Adjusts vertical position to raise the superscript */
}
/* Custom styles for the logo */
.logo-container {
  text-align: left;
  margin-bottom: 20px; /* Space between logo and text */
}
.logo-container img {
  max-width: 150px; /* Adjust as needed */
  height: auto;
  border-radius: 8px; /* Slightly rounded corners for the logo */
}
/* Your existing styles (from style.css) would also apply if linked */