/*
 * ===================================================================
 * Creative & Appealing Styles (v2)
 *
 * Fonts: Libre Baskerville & Lato
 * Palette: Red, Gold, & Dark Blue
 * ===================================================================
 */

:root {
  /* --- 1. FONTS (User Requested) --- */
  --font-display: "Libre Baskerville", serif;
  --font-sans: "Lato", sans-serif;

  /* --- 2. COLORS (User Requested Palette) --- */
  /* Primary (Red) */
  --color-primary: #E31E24;
  --color-primary-rgb: 227, 30, 36;
  --color-primary-darker: #c01a1f;

  /* Accent (Gold) */
  --color-accent: #c39738;
  --color-accent-rgb: 195, 151, 56;
 
  /* Backgrounds & Text (Blue & Neutrals) */
  --color-bg-light: #fcfaf8;
  --color-bg-dark: #092232;
  --color-text-light: #092232; /* Dark blue text on light bg */
  --color-text-dark: #f3eee7; /* Warm white text on dark bg */
 
  /* Muted colors */
  --color-text-muted-light: #5a6b79; /* Muted blue-grey */
  --color-text-muted-dark: #a9b4bd; /* Light muted blue-grey */

  /* --- 3. RADII --- */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* --- !! NEW: GLOBAL FOCUS RING !! --- */
  --focus-ring-color: rgba(var(--color-primary-rgb), 0.5);
}


/*
 * ===================================================================
 * 1. Creative Base (Selection, Scrollbar, Animated BG)
 * ===================================================================
 */

/* Branded text selection */
::selection {
  background-color: var(--color-primary);
  color: #ffffff; /* White text on red selection */
}

/* Branded scrollbar (for Webkit browsers) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-light);
}
.dark ::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 20px;
  border: 2px solid var(--color-bg-light);
}
.dark ::-webkit-scrollbar-thumb {
  border-color: var(--color-bg-dark);
}

@keyframes aurora-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
 
  /* Light Mode (default) */
  color: var(--color-text-light);
  background-color: var(--color-bg-light);
 
  /* Animated Aurora Background */
  background: linear-gradient(-45deg, var(--color-bg-light), #fff, var(--color-bg-light), #fdf5e8);
  background-size: 400% 400%;
  animation: aurora-bg 30s ease infinite;
 
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Advanced Typography Features */
  -webkit-font-feature-settings: "pnum" on, "onum" on, "liga" on;
  font-feature-settings: "pnum" on, "onum" on, "liga" on;
}

/* Dark Mode */
.dark body {
  color: var(--color-text-dark);
  background-color: var(--color-bg-dark);
  /* Animated Aurora for Dark Mode */
  background: linear-gradient(-45deg, var(--color-bg-dark), #163346, var(--color-bg-dark), #2c4a5f);
  background-size: 400% 400%;
  animation: aurora-bg 30s ease infinite;
}

/*
 * ===================================================================
 * 2. Creative Typography (Headings, Links, Blockquotes)
 * ===================================================================
 */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  color: var(--color-text-light);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--color-text-dark);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

h1 { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: 2.25rem; font-weight: 600; }
h3 { font-size: 1.75rem; font-weight: 600; }
h4 { font-size: 1.5rem;  font-weight: 500; }
h5 { font-size: 1.25rem; font-weight: 500; }
h6 { font-size: 1.125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

p { margin-bottom: 1.25em; }

a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover, a:focus {
  opacity: 0.8;
  text-decoration: none;
}

/* Creative "Highlighter" Link (for body copy) - Uses ACCENT color */
.content-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(120deg, rgba(var(--color-accent-rgb), 0.2) 0%, rgba(var(--color-accent-rgb), 0.2) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.2em;
  transition: background-size 0.3s ease, color 0.3s ease;
}
.content-link:hover, .content-link:focus {
  background-size: 100% 100%;
  color: var(--color-text-light);
  text-decoration: none;
  opacity: 1;
}
.dark .content-link:hover, .dark .content-link:focus {
  color: var(--color-text-light);
}

/* Enhanced Blockquotes - Uses ACCENT color */
blockquote {
  margin: 2em 0;
  padding: 1.5em;
  border-left: 5px solid var(--color-accent);
  background-color: rgba(var(--color-accent-rgb), 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-text-muted-light);
}
.dark blockquote {
  background-color: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-text-muted-dark);
}

strong, b { font-weight: 700; }

/*
 * ===================================================================
 * 3. Component Styles (Glassmorphism, 3D Tilt, etc.)
 * ===================================================================
 */

.material-symbols-outlined {  
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;  
}

/* == Glassmorphism Header (Enhances your existing backdrop-blur) == */
header.sticky {
    background-color: rgba(252, 250, 248, 0.8); /* Light mode glass (fcfaf8) */
    border-bottom-color: rgba(29, 64, 86, 0.05); /* text-light (092232) */
}
.dark header.sticky {
    background-color: rgba(29, 64, 86, 0.8); /* Dark mode glass (092232) */
    border-bottom-color: rgba(243, 238, 231, 0.05); /* text-dark (f3eee7) */
}

/* == 3D Tilt Effect for Artisan Cards == */
/* Apply .artisan-card-container to the grid cells (the <div>) */
.artisan-card-container {
    perspective: 1000px;
}
/* Apply .artisan-card to the card itself (the <a> or inner <div>) */
.artisan-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.artisan-card-container:hover .artisan-card {
    transform: rotateX(5deg) rotateY(-5deg) scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 0 0 1px rgba(var(--color-primary-rgb), 0.5);
}

/* == Button Shine Effect == */
.shine-button {
    position: relative;
    overflow: hidden;
}
.shine-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20px;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(20deg);
    transition: transform 0s ease;
}
.shine-button:hover::after {
    transform: translateX(250px) rotate(20deg); /* Adjust 250px based on button width */
    transition: transform 0.8s ease;
}

/* == Creative Form Inputs == */
@keyframes breathing-border {
  0% { border-color: var(--color-primary); }
  50% { border-color: var(--color-primary-darker); }
  100% { border-color: var(--color-primary); }
}

/* --- !! NEW GLOBAL FOCUS STYLE !! --- */
/*
  This applies a consistent, branded focus ring to ALL interactive
  elements (links, buttons, inputs) when a user is navigating
  with a keyboard (e.g., using the Tab key).
  It uses `:focus-visible` so it does *not* show up on mouse clicks.
*/
:is(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring-color);
    border-radius: 4px; /* Optional: adds rounded corners to the outline */
}

/* For form inputs, we can remove the animation to prevent conflict */
.form-input:focus, .form-select:focus {
    animation: none; /* Disable breathing animation */
}
/* --- !! END NEW GLOBAL FOCUS STYLE !! --- */


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; margin: 0; 
}
input[type=number] { -moz-appearance: textfield; }

/* == Creative Pagination (Circular + Shine) == */
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 0.875rem;
  margin: 0 0.25rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid #d1d5db;
  color: #4b5563;
  cursor: pointer;
  position: relative;
  overflow: hidden; /* For shine effect */
}
.pagination-link:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.pagination-link-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff; /* White text on primary */
  font-weight: bold;
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(var(--color-primary-rgb), 0.4);
}
/* Add shine effect to active button */
.pagination-link-active::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 10px;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(20deg);
    transition: transform 0s ease;
}
.pagination-link-active:hover::after {
    transform: translateX(100px) rotate(20deg);
    transition: transform 0.8s ease;
}
.dark .pagination-link {
  border-color: #4b5563;
  color: #d1d5db;
}
.dark .pagination-link:hover {
  background-color: #374151;
  border-color: #6b7280;
}
.dark .pagination-link-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
.pagination-trigger .material-symbols-outlined {
    pointer-events: none;
}

/* == Creative Tab Styles == */
.tab-button {
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  padding: 0.5em 0.25em;
  transform: translateY(0);
  color: var(--color-text-muted-light);
}
.dark .tab-button {
  color: var(--color-text-muted-dark);
}
.tab-button:not(.active):hover {
  transform: translateY(-3px);
  color: var(--color-text-light);
}
.dark .tab-button:not(.active):hover {
  color: var(--color-text-dark);
}
.tab-button.active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* == Glassmorphism Flash Messages == */
.flash-message-container {
    position: fixed;   
    bottom: 2rem;
    right: 2rem;   
    z-index: 1000;
    width: 90%;
    max-width: 400px;
}

.flash-message {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: 500;
    margin-bottom: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease-out;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.flash-message.success {
    background-color: rgba(223, 240, 216, 0.8);
    border-color: rgba(214, 233, 198, 0.8);
    color: #3c763d;
}
.flash-message.error {
    background-color: rgba(242, 222, 222, 0.8);
    border-color: rgba(235, 204, 209, 0.8);
    color: #a94442;
}
.dark .flash-message.success {
    background-color: rgba(60, 118, 61, 0.5);
    border-color: rgba(60, 118, 61, 0.8);
    color: #dff0d8;
}
.dark .flash-message.error {
    background-color: rgba(169, 68, 66, 0.5);
    border-color: rgba(169, 68, 66, 0.8);
    color: #f2dede;
}

/* Swiper Controls - Sleeker & Branded */
.swiper-button-next, .swiper-button-prev {
  color: var(--color-primary);
  background-color: rgba(var(--color-text-light, 29, 64, 86), 0.1);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background-color: rgba(var(--color-text-light, 29, 64, 86), 0.2);
  transform: scale(1.1);
}
.dark .swiper-button-next, .dark .swiper-button-prev {
  background-color: rgba(var(--color-text-dark, 243, 238, 231), 0.1);
}
.dark .swiper-button-next:hover, .dark .swiper-button-prev:hover {
  background-color: rgba(var(--color-text-dark, 243, 238, 231), 0.2);
}
.swiper-button-next:after, .swiper-button-prev:after {  
  font-size: 1.5rem;
  font-weight: bold;
}
.swiper-pagination-bullet-active {  
  background-color: var(--color-primary);  
}
.swiper-slide { transition: opacity 0.5s ease-in-out; }
.swiper-horizontal { overflow: hidden; }

/* Back to Top (from your file) */
#back-to-top { transition: opacity 0.3s, transform 0.3s; }
#back-to-top.hidden { opacity: 0; transform: translateY(10px); }

/*
 * ===================================================================
 * 4. Application-Specific Styles (Header, Footer)
 * ===================================================================
 */

/* Footer Links - Uses ACCENT color */
.footer-link {
  color: #9ca3af; 
  position: relative; 
  transition: color 0.3s ease-in; 
  text-decoration: none; 
  padding-bottom: 4px;
}
.footer-link::after { 
  content: ''; 
  position: absolute; 
  width: 0; 
  height: 1px; 
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  background-color: var(--color-accent); /* Updated to gold */
  transition: width 0.3s ease-in; 
}
.footer-link:hover { 
  color: #ffffff; 
}
.footer-link:hover::after { 
  width: 100%; 
}
.footer-link:focus { 
  color: #ffffff; 
  outline: none; 
}
.footer-link:focus::after { 
  width: 100%; 
}

/* Header Mega-Menu Links (Fix) */
.header-link {
  color: var(--color-text-muted-light);
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
  padding-bottom: 4px; /* Adds space for the underline */
}

.dark .header-link {
  color: var(--color-text-muted-dark);
}

.header-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.header-link:hover {
  color: var(--color-primary);
}

.header-link:hover::after {
  width: 100%;
}

/* Fading Banner Slideshow Styles */
.hero-slideshow {
    position: relative;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-slide.active {
    opacity: 1;
}
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(29, 64, 86, 0.4) 0%, rgba(29, 64, 86, 0.7) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: white;
}
/* Navigation Dots */
.hero-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 3;
}
.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
}
.hero-dot.active {
    background: white;
}
/* Fade-in Animation for Content (per slide) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero-content-inner {
    animation: fadeInUp 1.2s ease-out forwards;
    opacity: 0; /* Start hidden for animation */
}

/*
 * ===================================================================
 * 5. Prose Typography Styles
 *
 * For long-form content like blogs, about pages, terms, etc.
 * Wrap your content in a <div class="prose"> to apply.
 * ===================================================================
 */

.prose {
    font-family: var(--font-sans);
    font-size: 1.125rem; /* 18px, slightly larger for reading */
    line-height: 1.7; /* Generous line spacing for readability */
    
    /* Default text colors */
    color: var(--color-text-light);
    max-width: 75ch; /* Optimal line length for readability */
}

.dark .prose {
    color: var(--color-text-dark);
}

/* --- Headings --- */
/* Uses the global h1-h6 styles but adjusts margins for article flow */
.prose > :first-child {
    margin-top: 0; /* Remove top margin from the very first element */
}

.prose > h1,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > h5,
.prose > h6 {
    margin-top: 2.25em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.prose > h2 { margin-top: 2em; }
.prose > h3 { margin-top: 1.8em; }
.prose > h4 { margin-top: 1.8em; }

/* --- Body Text --- */
.prose > p {
    margin: 1.25em 0;
}

/* --- Links --- */
/* Uses the .content-link style you already created */
.prose a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(120deg, rgba(var(--color-accent-rgb), 0.2) 0%, rgba(var(--color-accent-rgb), 0.2) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.2em;
    transition: background-size 0.3s ease, color 0.3s ease;
}

.prose a:hover, 
.prose a:focus {
    background-size: 100% 100%;
    color: var(--color-text-light);
    text-decoration: none;
    opacity: 1; /* Override global link opacity */
}

.dark .prose a:hover, 
.dark .prose a:focus {
    color: var(--color-text-light); /* Keep light text on gold bg */
}

/* Links inside headings should be styled differently */
.prose h1 a,
.prose h2 a,
.prose h3 a {
    color: inherit;
    background-image: none;
    text-decoration: none;
    border-bottom: 2px solid var(--color-accent);
    transition: border-color 0.2s ease;
}
.prose h1 a:hover,
.prose h2 a:hover,
.prose h3 a:hover {
    color: inherit;
    border-bottom-color: var(--color-primary);
}


/* --- Lists (UL/OL) --- */
.prose ul,
.prose ol {
    margin: 1.5em 0;
    padding-left: 1.5em; /* Indentation */
}

.prose li {
    margin-bottom: 0.75em;
    padding-left: 0.5em;
}

.prose ul li {
    list-style-type: disc;
}
.prose ol li {
    list-style-type: decimal;
}

/* Branded list markers */
.prose li::marker {
    color: var(--color-accent);
    font-weight: 600;
}

/* Nested lists */
.prose li > ul,
.prose li > ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/* --- Blockquotes --- */
/* Uses your existing blockquote style, just ensures margins */
.prose blockquote {
    margin: 2em 0;
    /* Styles for bq are already defined globally */
}

.prose blockquote p {
    margin-bottom: 0; /* No extra margin on P tags inside a quote */
}

/* --- Horizontal Rule --- */
.prose hr {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, 
        transparent, 
        var(--color-accent), 
        transparent
    );
    margin: 3em auto;
}

/* --- Code (Inline & Block) --- */
/* Inline code */
.prose :not(pre) > code {
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-text-light);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
}
.dark .prose :not(pre) > code {
    background-color: rgba(var(--color-accent-rgb), 0.2);
    color: var(--color-text-dark);
}

/* Code blocks */
.prose pre {
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    background-color: var(--color-bg-dark); /* Use dark bg for contrast */
    color: var(--color-text-dark);
    padding: 1.5em;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 2em 0;
}

.dark .prose pre {
    background-color: #163346; /* A slightly different dark from your aurora bg */
}

.prose pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* --- Images & Figures --- */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 2em 0;
    border: 1px solid rgba(29, 64, 86, 0.1); /* text-light as rgba */
    box-shadow: 0 4px 12px rgba(29, 64, 86, 0.05);
}
.dark .prose img {
    border-color: rgba(243, 238, 231, 0.1); /* text-dark as rgba */
    box-shadow: 0 4px 12px rgba(0,0,0, 0.1);
}

.prose figure {
    margin: 2.5em 0;
}

.prose figcaption {
    font-size: 0.9em;
    color: var(--color-text-muted-light);
    text-align: center;
    margin-top: 0.75em;
}
.dark .prose figcaption {
    color: var(--color-text-muted-dark);
}

/* --- Tables --- */
.prose table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: 0.95em;
}

.prose th,
.prose td {
    padding: 0.75em 1em;
    border: 1px solid rgba(29, 64, 86, 0.15); /* text-light as rgba */
    text-align: left;
}
.dark .prose th,
.dark .prose td {
    border-color: rgba(243, 238, 231, 0.15); /* text-dark as rgba */
}

.prose th {
    font-family: var(--font-display);
    font-weight: 600;
    background-color: rgba(var(--color-accent-rgb), 0.05);
}
.dark .prose th {
    background-color: rgba(var(--color-accent-rgb), 0.1);
}
.responsive-iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}