/* Change the font size of the post titles on the index page */
.gh-card-title {
  font-size: 4rem !important; /* Adjust this number up or down */
  line-height: 1.5 !important; /* Adjust this number up or down */
}

/* Change the font size of the short excerpt under the title */
.gh-card-excerpt {
  font-size: 1.4rem !important; /* Adjust this number up or down */
}

/* Change the font size of post titles on the individual post page */
.gh-article-title {
  font-size: 6rem !important; /* Adjust this number up or down */
  line-height: 1.3 !important; /* Adjust this number up or down */
}

/* Change the color of in-text links inside posts and pages */
.gh-content p a,
.gh-content li a,
.gh-content blockquote a {
  color: #a6abdd !important; /* Replace this hex code with brand color */
  text-decoration: underline; /* Optional: keeps a line under the text for accessibility */
}

/* Change the link color when a user hovers their mouse over it */
.gh-content p a:hover,
.gh-content li a:hover,
.gh-content blockquote a:hover {
  color: #6b6fa1 !important; /* Usually a slightly darker/lighter version of the main color */
  text-decoration: none; /* Optional: removes the underline on hover for a cleaner look */
}

p code {
  background-color: #f5f5f5;
  color: #2b2d42;
}

/* Make the dropdown sit cleanly next to the main menu */
.custom-nav-dropdown {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-dropdown-item {
  position: relative;
  display: inline-block;
}

/* The actual hidden menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2b2d42; /* Change this for dark mode theme */
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px 0;
  z-index: 9999;
  list-style: none;
  margin: 0;
  text-align: left;
}

/* Style the links inside the dropdown */
.dropdown-menu li {
  margin: 0;
  padding: 0;
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: #ffffff; /* Text color */
  text-decoration: none;
  font-size: 1.4rem; /* 14px */
  transition: background-color 0.2s ease;
}

/* Hover effect for the dropdown items */
.dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Slight grey highlight */
  opacity: 1;
}

/* The Magic: Show the menu when hovering over the parent */
.nav-dropdown-item:hover .dropdown-menu {
  display: block;
}

/* Custom Comment CTA Box */
.custom-comment-cta {
  padding: 30px;
  text-align: center;
  margin-top: 20px;
}

.custom-comment-cta h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 2.2rem;
}

.custom-comment-cta p {
  color: #666666;
  margin-bottom: 20px;
}

/* Modal Overlay Background */
.custom-modal-overlay {
  display: flex; /* The box is always centered */
  opacity: 0; /* Make it completely invisible */
  visibility: hidden; /* Prevents it from blocking clicks on the website when closed */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Start fully transparent */
  z-index: 999999; /* Ensures it sits on top of the entire website */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0px); /* Start with no blur */
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    background-color 0.4s ease,
    backdrop-filter 0.4s ease;
}

/* When JavaScript adds the 'is-open' class, the modal appears */
.custom-modal-overlay.is-open {
  opacity: 1; /* Fade in */
  visibility: visible; /* Make it clickable */
  background-color: rgba(0, 0, 0, 0.4); /* Fade to dark */
  backdrop-filter: blur(5px); /* Fade to blurred */
}

/* The Modal Box itself */
.custom-modal-content {
  background: var(--background-color, #ffffff);
  padding: 40px;
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* The "X" Close Button */
.custom-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  line-height: 1;
}
.custom-modal-close:hover {
  color: #333;
}

/* Hide messages by default */
.custom-subscribe-form .message-success,
.custom-subscribe-form .message-error {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 6px;
}

/* Show the success message ONLY when Ghost triggers a success */
.custom-subscribe-form.success .message-success {
  display: block;
  background-color: #e8f5e9;
  color: #2e7d32;
}

/* Hide the input box and button after they successfully subscribe */
.custom-subscribe-form.success .form-inputs {
  display: none;
}

/* Show the error message ONLY if the email is invalid/duplicate */
.custom-subscribe-form.error .message-error {
  display: block;
  background-color: #ffebee;
  color: #c62828;
}

/* The Container (Acts as the fake input field) */
.custom-pill-container {
  display: flex;
  align-items: center;
  background-color: #ffffff; /* The white background of the whole pill */
  border-radius: 50px; /* Makes the extreme rounded corners */
  padding: 4px 4px 4px 15px; /* Top, Right (small to hug button), Bottom, Left (larger for text) */
  border: 1px solid #e5e5e5; /* A subtle border to define the edge */
  width: 100%;
  margin-bottom: 15px;
}

/* The Actual Input Text Box */
.custom-pill-input {
  flex-grow: 1; /* Tells the input to take up all available space to the left of the button */
  border: none; /* Removes the default box */
  background: transparent;
  padding: 10px 0;
  font-size: 1.5rem; /* Matches typical Ghost body text */
  color: #333333;
  outline: none; /* CRUCIAL: Removes the blue highlight ring when a user clicks it */
}

/* The Subscribe Button */
.custom-pill-button {
  background-color: #000000; /* Black button */
  color: #ffffff;
  border: none;
  border-radius: 50px; /* Matches the outer container's curve */
  padding: 10px 24px;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap; /* Prevents the word "Subscribe" from wrapping to a second line */
}

/* Subtle hover effect for the button */
.custom-pill-button:hover {
  opacity: 0.8;
}

/* The Pop-up Title (h3) */
.custom-modal-content h3 {
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 12px; /* Controls the space between the title and the paragraph */
  font-size: 2.6rem; /* Optional: Adjust the size of the heading */
}

/* The Pop-up Paragraph (p) */
.custom-modal-content p {
  line-height: 1.6; /* 1.5 or 1.6 is the sweet spot for readable paragraph text */
  margin-bottom: 25px; /* Space between the text and the email input box */

  max-width: 85%; /* Forces the text to wrap earlier */
  margin-left: auto; /* This centers the paragraph block inside the modal */
  margin-right: auto;

  color: #8a8a8a; /* Optional: Makes the subtitle a slightly softer grey than the title */
}

/* Full Screen Parallax Header */
.gh-about {
  height: 100vh !important; /* Forces the header to be exactly 100% of the screen height */
  position: relative !important;
  top: 0;
}

/* 2. Scroll-Triggered Cards Setup */
.gh-card {
  opacity: 0; /* Hidden by default */
  transform: translateY(60px); /* Pushed down 60 pixels */
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change:
    opacity, transform; /* Hardware acceleration for buttery smoothness */
}

/* The class JavaScript will add when the card enters the screen */
.gh-card.is-visible {
  opacity: 1;
  transform: translateY(0); /* Snaps back to its original position */
}
.has-background-about .gh-about:before {
  background-color: #141414;
}

.custom-back-to-top {
  position: fixed;
  bottom: 30px; /* Claiming the bottom right corner */
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #2b2d42;
  color: #ffffff;
  border: 1px solid #2b2d42;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99997;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Animation properties */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s,
    background-color 0.2s ease;
}

.custom-back-to-top:hover {
  background-color: #4c4e67;
  border: 1px solid #4c4e67;
  transform: translateY(-3px) !important; /* Slight float up on hover */
}

/* The class JavaScript will add to make it visible */
.custom-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
  .custom-back-to-top {
    bottom: 20px; /* Standard mobile spacing */
    right: 20px;
    width: 40px;
    height: 40px;
  }
  .custom-back-to-top svg {
    width: 18px; /* Slightly smaller icon for mobile */
    height: 18px;
  }
}

/* MEDIA QUERIES */

@media (max-width: 767px) {
  /* Change the font size of post titles on the individual post page */
  .gh-article-title {
    font-size: 4rem !important; /* Adjust this number up or down */
    line-height: 1.3 !important; /* Adjust this number up or down */
  }

  /* Fix the default Ghost cover subscribe form */
  .gh-subscribe-input {
    font-size: 1.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }

  /* 1. Typography & Spacing Fixes */
  .gh-card-title {
    font-size: 2.2rem !important; /* Shrink post titles */
  }

  /* 2. Modal (Pop-up) Fixes */
  .custom-modal-content {
    padding: 25px 20px; /* drastically reduce the inner padding */
    width: 95%; /* Let the box take up most of the phone screen */
  }

  .custom-modal-content h3 {
    font-size: 2rem; /* Shrink modal title */
  }

  .custom-modal-content p {
    max-width: 100%; /* Stop restricting the width, let text fill the box */
    margin-bottom: 20px;
  }

  /* 3. The Subscribe "Pill" Input Fixes */
  .custom-pill-container {
    /* Phones are narrow, so we stack the input and button vertically */
    flex-direction: column;
    border-radius: 12px; /* Change from rounded pill to a standard box */
    padding: 10px;
    background-color: transparent;
    border: none;
  }

  .custom-pill-input {
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 10px; /* Space between input and button */
  }

  .custom-pill-button {
    width: 100%; /* Make the button stretch all the way across */
    border-radius: 8px;
    padding: 14px;
  }

  /* Fixes for Mobile Hamburger Menu */
  .gh-head-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: flex-start !important; /* CHANGED: Pushes everything to the left edge */
    text-align: left !important; /* Forces the text to align left */
    padding-left: 25px !important; /* Optional: gives the whole menu some breathing room from the phone bezel */
  }

  /* Ensures the main category titles behave */
  .nav-dropdown-item,
  .nav-link {
    text-align: left !important;
    width: 100% !important;
  }

  .dropdown-menu {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    min-width: 100% !important;
    background-color: transparent !important;

    /* CHANGED: The 15px on the left creates a nice visual indent for the sub-tags */
    padding: 5px 0 10px 15px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .dropdown-menu li a {
    font-size: 2rem !important;
    width: 100% !important;
    text-align: left !important; /* Forces tag text to the left */
    display: block !important;
    padding: 8px 0 !important; /* Adds a bit of vertical spacing for easier tapping */
  }
}
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gh-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .custom-modal-overlay {
    transition: none !important; /* Makes modal pop open instantly instead of fading */
  }
}

.fade-in-text {
  /* Your original styling */
  color: #5f606e;
  font-size: 3rem;
  font-weight: bold;
  display: inline-block; /* Helps transformations apply cleanly */

  /* The Fade Animation */
  opacity: 0; /* Start invisible */
  animation: textFadeIn 1.2s ease-out forwards;
}

/* The Animation Rules */
@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px); /* Optional: Adds a slight upward slide */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1. Adaptive Text Styling */
.anime-text-reveal {
  color: #5f606e;
  font-weight: bold;
  font-size: 3rem;
  display: inline-block;
  line-height: 1.5;
}

/* 2. Animation Properties for each word */
.anime-word {
  opacity: 0; /* Hidden initially */
  transform: translateY(15px); /* Pushed down slightly */
  display: inline-block;
  animation: animeFadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  margin-right: 0.25em; /* Preserves natural spacing between words */
}

/* 3. The Cinematic Keyframe */
@keyframes animeFadeUp {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
       BRAND LOGO & TITLE (SIDE-BY-SIDE)
       ========================================================================== */

/* 1. Flexbox Container */
.custom-brand-group {
  display: flex;
  align-items: center; /* Vertically centers the logo and text */
  gap: 15px; /* Adds clean, predictable space between the image and text */
  text-decoration: none;
}

/* 2. Logo Sizing */
.custom-brand-logo {
  height: 45px; /* Base height for desktop */
  width: auto !important; /* Overrides any default SVG 100% width issues */
  object-fit: contain;
}

/* 3. Title Typography */
.custom-brand-title {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em; /* Slightly tightens the text for a modern look */
  color: inherit; /* Inherits the standard link color of your nav bar */
  white-space: nowrap; /* Forces the title to stay on one line */
}

/* Flips a black logo to pure white on dark backgrounds */
html.has-light-text .custom-brand-logo {
  filter: invert(1) brightness(100);
}

/* 1. When the background is DARK (Text is light)
       Makes the nav button white with black text to match the homepage style */
html.has-light-text .gh-head-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

/* Hover effect for the white button */
html.has-light-text .gh-head-btn:hover {
  opacity: 0.85;
}

/* 2. When the background is LIGHT (Text is dark)
       Makes the nav button black with white text */
html.has-dark-text .gh-head-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}

/* Hover effect for the black button */
html.has-dark-text .gh-head-btn:hover {
  opacity: 0.85;
}

/* Subtle footer border to separate it from the content */
.gh-foot-inner {
  position: relative;
}
.gh-foot-inner::before {
  content: "";
  display: block;
  width: 100%;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 4rem;
}

/* =============================================*/
/* INITIAL COMMISSION FORM */
/* ============================================ */
.custom-commission-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
}

.custom-commission-form {
  background: var(--background-color);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e5e5e5);
}

.custom-commission-form h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-group label {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

/* Dropdown Colors */
html.has-dark-text .form-group select {
  color-scheme: light;
}
html.has-light-text .form-group select {
  color-scheme: dark;
}

.form-group select {
  background-color: var(--background-color);
  color: inherit;
}

.form-group select option {
  background-color: var(--background-color);
  color: inherit;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group input[type="file"] {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.5rem;
  width: 100%;
  background-color: transparent;
  color: inherit;
}

.form-group input[type="file"] {
  padding: 8px;
  cursor: pointer;
}

.form-hint {
  font-size: 1.2rem;
  opacity: 0.7;
  margin-top: 5px;
}

.file-preview-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05); /* Subtle dark mode highlight */
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #333);
  font-size: 1.3rem;
}

.remove-file-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0 5px;
  transition: opacity 0.2s;
}

.remove-file-btn:hover {
  opacity: 0.7;
}

/* ============================ */
/* CUSTOM FILE UPLOAD BUTTON UI */
/* ============================ */

/* Hide the native browser input */
.hidden-file-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/* Style the original label title so it still looks like a heading */
.form-label-title {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: block;
}

/* Style the new label to look like a sleek, dashed button */
.custom-file-upload-btn {
  display: inline-block;
  padding: 12px 20px;
  background-color: transparent;
  color: inherit;
  border: 1px dashed var(--border-color, #ccc);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.4rem;
  text-align: center;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.custom-file-upload-btn:hover {
  background-color: rgba(255, 255, 255, 0.05); /* Slight highlight on hover */
  border-color: #ffffff; /* Brighter border on hover */
}

/* =========== */
/* CHECKBOX UI */
/* =========== */
.custom-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 400; /* Overrides the bold label default */
  line-height: 1.4;
}

.custom-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0; /* Overrides default browser margins */
  margin-top: 3px; /* Slightly adjusted to align with line-height */
  cursor: pointer;
  flex-shrink: 0; /* THIS PREVENTS THE SQUISHING */
}

/* Mobile Adaptations */
@media (max-width: 767px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .half-width {
    width: 100%;
  }
  .custom-commission-form {
    padding: 20px 15px;
  }
}