/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

/* Variables (properties) */
:root{
  /* Headings use MonteCarlo; body and smaller text use Roboto Serif */
  --heading-font: 'MonteCarlo', cursive;
  --main-font: 'Roboto Serif', serif;
  --h2-text-size: 3rem;
  --h3-text-size: 1.5rem;
  --main-text-size: 1.25rem;
  --mobile-h1-size: 2.5rem;
  --mobile-h2-size: 2rem;
  --mobile-main-size: 1.1rem;
  --my-text-colour: #ffffff;
}

html, body {
  font-family: var(--main-font);
}

/* Mobile-first responsive typography */
h1 {
  font-family: var(--heading-font);
  font-size: var(--mobile-h1-size);
  line-height: 1.3;
}

h2 {
  font-family: var(--heading-font);
  font-size: var(--mobile-h2-size);
  line-height: 1.3;
}

h3 {
  font-family: var(--main-font);
  font-size: var(--h3-text-size);
}

h4 {
  font-family: var(--main-font);
  font-size: var(--mobile-main-size);
}

h5 {
  font-family: var(--main-font);
  font-size: var(--mobile-main-size);
}

p {
  font-family: var(--main-font);
  font-size: var(--mobile-main-size);
  line-height: 1.6;
}

/* Responsive typography for larger screens */
@media only screen and (min-width: 601px) {
  h1 {
    font-size: 3.5rem;
  }
  
  h2 {
    font-size: var(--h2-text-size);
  }
  
  h4, h5, p {
    font-size: var(--main-text-size);
  }
  
  p {
    line-height: 2rem;
  }
}

/* List styling for proper alignment */
ol, ul {
  padding-left: 0;
  margin-left: 1.5rem; /* Space for numbering */
}

ol {
  list-style-type: decimal;
  list-style-position: outside; /* Numbers outside content area */
}

ul {
  list-style-type: disc;
  list-style-position: outside;
}

li {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem; /* Small indent for text after number */
  font-family: var(--main-font);
  font-size: var(--mobile-main-size);
  line-height: 1.6;
}

/* Responsive list spacing */
@media only screen and (min-width: 601px) {
  li {
    font-size: var(--main-text-size);
    margin-bottom: 0.75rem;
  }
  
  ol, ul {
    margin-left: 2rem; /* More space for numbering on larger screens */
  }
}

nav ul a,
nav .brand-logo {
  color: #0d47a1; /* dark blue for nav links */
}

/* Global link colour: use a dark blue that contrasts with the cyan background */
a,
a:visited {
  color: #0d47a1;
}

/* Hover / focus states for accessibility — only for anchors with an href so non-link <a> elements (e.g. logo placeholders) aren't underlined */
a[href]:hover,
a[href]:focus {
  color: #092f6b;
  text-decoration: underline;
}

/* Sidenav links (mobile) */
.sidenav a {
  color: #0d47a1;
}

/* Enhanced mobile sidenav styling - consolidated below */

.sidenav li > a {
  color: #ffffff !important; /* White text */
  font-size: 1.75rem !important; /* Increased from var(--h3-text-size) which is 1.5rem */
  font-family: var(--heading-font);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important; /* Light border for separation */
  transition: background-color 0.3s ease;
  position: relative !important;
  z-index: 10001 !important; /* Even higher than sidenav */
  pointer-events: auto !important;
  display: block !important;
  white-space: nowrap !important; /* Prevent text wrapping */
  overflow: visible !important; /* Allow text to use full width */
  width: 100% !important; /* Use full width of sidenav */
  box-sizing: border-box !important; /* Include padding in width calculation */
}

.sidenav li > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important; /* Light white overlay on hover */
  color: #ffffff !important; /* Keep white text on hover */
}

.sidenav .sidenav-close {
  color: #666;
  margin: 10px;
}

/* Ensure sidenav overlay appears above content but WAY below sidenav */
.sidenav-overlay {
  z-index: 500 !important; /* Much lower than sidenav */
  pointer-events: auto !important;
}

/* Ensure hamburger menu button is always clickable and visible */
.sidenav-trigger {
  z-index: 10002 !important; /* Highest of all */
  position: relative !important;
  display: block !important;
}

/* Force sidenav to appear above all content INCLUDING overlay */
.sidenav {
  z-index: 10000 !important; /* Much higher z-index */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 280px !important;
  background: linear-gradient(135deg, #00bcd4, #0097a7) !important; /* gradient-cyan background */
  box-shadow: 2px 0 10px rgba(0,0,0,0.2) !important;
  pointer-events: auto !important;
}

/* Ensure sidenav is visible when open */
.sidenav.show-on-large {
  transform: translateX(0%) !important;
}

/* Override any transforms that might hide the sidenav */
.sidenav[style*="transform: translateX(0%)"] {
  display: block !important;
  visibility: visible !important;
}

/* Debug: Make sure sidenav is always above other elements */
body.sidenav-open .sidenav {
  transform: translateX(0%) !important;
  z-index: 10000 !important;
}

/* Ensure overlay is visible when sidenav opens but WAY below sidenav */
.sidenav-overlay.show {
  display: block !important;
  z-index: 500 !important; /* Much lower than sidenav */
}

/* Ensure hamburger menu icon is visible and properly colored */
.sidenav-trigger i {
  color: white !important;
  font-size: 2rem !important;
  line-height: 1 !important;
}

/* Hamburger menu positioning - ONLY on mobile devices */
@media only screen and (max-width: 992px) {
  nav .sidenav-trigger {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 15px !important;
  }
}

/* Hide hamburger menu on larger screens where horizontal nav is visible */
@media only screen and (min-width: 993px) {
  .sidenav-trigger {
    display: none !important;
  }
}

/* Debug and fix sidenav clickability issues */
.sidenav * {
  pointer-events: auto !important;
}

.sidenav li {
  position: relative !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
  width: 100% !important; /* Use full width */
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure sidenav is always interactive when open */
.sidenav.show, 
.sidenav[style*="transform: translateX(0"]  {
  pointer-events: auto !important;
  z-index: 1002 !important;
}

/* Mobile sidenav adjustments for smaller screens */
@media only screen and (max-width: 480px) {
  .sidenav {
    width: 250px !important;
  }
  
  .sidenav li > a {
    font-size: 1.5rem !important; /* Increased from 0.95rem */
    padding: 14px 20px !important;
    /* Maintain full width usage on mobile too */
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Global text overlap prevention */
* {
  box-sizing: border-box;
}

/* Prevent text overflow in containers */
.container {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Responsive text sizing to prevent overlap */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Ensure buttons don't overlap */
.btn, .btn-large, .btn-small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile text size adjustments to prevent overlap */
@media only screen and (max-width: 480px) {
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }
  
  h3 {
    font-size: 1.5rem !important;
  }
  
  h4, h5 {
    font-size: 1.2rem !important;
  }
  
  p {
    font-size: 1rem !important;
    line-height: 1.4;
  }
  
  /* Prevent button text overflow */
  .btn-large {
    font-size: 0.95rem !important;
    padding: 10px 20px !important;
  }
}

/* Small tablet adjustments */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  h1 {
    font-size: 2.3rem !important;
  }
  
  h2 {
    font-size: 1.9rem !important;
  }
}

p {
  line-height: 2rem;
}

.sidenav-trigger {
  color: #26a69a;
}

/* Enhanced responsive navigation to prevent text overlap */
/* Navigation overflow prevention for all screen sizes */
nav {
  overflow: hidden;
  position: relative;
}

nav .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  min-height: 64px;
}

/* Brand logo with proper container sizing */
nav .brand-logo {
  flex: 0 1 auto;
  max-width: 45%; /* Reduced to give more space for navigation */
  white-space: nowrap;
  overflow: visible; /* Allow full text to show */
  font-size: 1.6rem !important; /* Slightly smaller to fit better */
  line-height: 1.2;
  margin-right: 20px; /* Add space between logo and navigation */
}

/* Desktop navigation links with better spacing */
nav ul {
  display: flex;
  margin: 0;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 1; /* Take remaining space */
  margin-left: auto; /* Push navigation to the right */
}

nav ul li {
  margin: 0;
  white-space: nowrap;
}

nav ul a {
  padding: 0 10px; /* Reduced padding for tighter spacing */
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px; /* Reduced max width */
  display: block;
  transition: max-width 0.3s ease;
}

/* Hover effect to show full text */
nav ul a:hover {
  max-width: none;
  overflow: visible;
  z-index: 1000;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  border-radius: 4px;
  color: #0d47a1;
}

/* Mobile-first approach: hide desktop nav on small screens */
@media only screen and (max-width: 992px) {
  nav ul {
    display: none; /* Hide desktop navigation */
  }
  
  nav .brand-logo {
    max-width: 70%;
    font-size: 1.6rem !important;
  }
  
  .sidenav-trigger {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    cursor: pointer;
  }
}

/* Tablet adjustments */
@media only screen and (min-width: 601px) and (max-width: 992px) {
  nav .brand-logo {
    max-width: 65%;
    font-size: 1.7rem !important;
  }
}

/* Small mobile adjustments */
@media only screen and (max-width: 480px) {
  nav .brand-logo {
    max-width: 65%;
    font-size: 1.4rem !important;
  }
  
  nav .nav-wrapper {
    padding: 0 10px;
    min-height: 56px;
  }
  
  .sidenav-trigger {
    right: 10px;
    font-size: 1.3rem;
  }
}

/* Desktop navigation visible */
@media only screen and (min-width: 993px) {
  nav ul {
    display: flex !important;
  }
  
  .sidenav-trigger {
    display: none;
  }
  
  nav .brand-logo {
    max-width: 40%; /* More space for navigation on desktop */
    font-size: 2rem !important;
  }
  
  nav ul a {
    max-width: 200px;
    font-size: 1.1rem;
  }
}

/* Narrow desktop: shorten logo text to prevent overlap with navigation */
@media only screen and (min-width: 993px) and (max-width: 1150px) {
  /* Hide original text content and replace with abbreviated version */
  nav .brand-logo {
    max-width: 25%; /* Smaller container for abbreviated text */
    font-size: 1.8rem !important; /* Size for abbreviated text */
    text-indent: -9999px; /* Hide original text */
    position: relative;
    overflow: hidden;
  }
  
  /* Use pseudo-element to display abbreviated logo */
  nav .brand-logo::before {
    content: "J&J";
    text-indent: 0;
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
    font-family: var(--heading-font);
    font-size: 1.8rem;
    line-height: inherit;
    white-space: nowrap;
  }
  
  /* Ensure navigation has more space with abbreviated logo */
  nav ul a {
    max-width: 180px;
    font-size: 1rem;
    padding: 0 8px;
  }
}

/* Large desktop optimizations */
@media only screen and (min-width: 1200px) {
  nav .brand-logo {
    max-width: 35%; /* Even more space for navigation on large screens */
    font-size: 2.2rem !important;
  }
  
  nav ul a {
    max-width: none; /* Full text visible on large screens */
    padding: 0 15px;
    font-size: 1.15rem;
  }
}

.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
  display: flex;
  align-items: flex-end; /* Position content towards bottom */
}
  .parallax-container .section {
    width: 100%;
    padding-bottom: 60px; /* Add bottom padding to keep text from touching edge */
  }

@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    bottom: 60px; /* Position near bottom instead of middle */
    top: auto; /* Remove top positioning */
    left: 0;
    right: 0;
  }
  #index-banner .section {
    bottom: 80px; /* Slightly higher for main banner */
  }
}

@media only screen and (max-width : 600px) {
  .parallax-container {
    min-height: 300px;
    align-items: flex-end; /* Maintain bottom alignment on mobile */
  }
  
  .parallax-container .section {
    position: absolute;
    bottom: 40px; /* Closer to bottom on mobile */
    top: auto;
    left: 0;
    right: 0;
    padding-bottom: 20px;
  }
  
  #index-banner .section {
    bottom: 60px; /* Keep main banner slightly higher on mobile */
  }
  
  /* Improved mobile behavior for simple banner pages */
  .simple-banner-page .parallax-container {
    min-height: 100vh !important;
    align-items: center !important;
    display: flex !important;
  }
  
  .simple-banner-page .parallax-container .section {
    position: relative !important;
    bottom: auto !important;
    padding: 40px 0 !important;
    margin: auto 0;
  }
  
  .simple-banner-page #index-banner .section {
    padding: 60px 0 40px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 80px);
  }
}

/* Extra small screens - ensure content is always visible for simple banner pages only */
@media only screen and (max-width : 480px), (max-height: 600px) {
  /* Only apply fixes to simple banner pages (main index and location-select) */
  .simple-banner-page .parallax-container {
    min-height: 100vh !important;
    align-items: center !important;
    display: flex !important;
  }
  
  .simple-banner-page .parallax-container .section {
    position: relative !important; /* Override absolute positioning */
    bottom: auto !important; /* Remove bottom constraint */
    width: 100%;
    padding: 40px 0;
    margin: auto 0;
  }
  
  .simple-banner-page #index-banner .section {
    padding: 60px 0 40px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 80px);
  }
  
  /* Reduce text size on very small screens for all pages */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  h5 {
    font-size: 1.1rem;
  }
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}

footer.page-footer {
  margin: 0;
}



/* Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */
@font-face {
  font-family: 'MonteCarlo';
  src: url(../fonts/MonteCarlo/MonteCarlo-Regular.woff2) format('woff2'),
       url(../fonts/MonteCarlo/MonteCarlo-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Roboto Serif local variable font (used for body and smaller text) */
@font-face {
  font-family: 'Roboto Serif';
  src: url(../fonts/Roboto_Serif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.woff2) format('woff2'),
       url(../fonts/Roboto_Serif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf) format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Font face definitions moved after typography rules */

a {
  font-family: var(--main-font);
  font-size: var(--mobile-main-size);
}

@media only screen and (min-width: 601px) {
  a {
    font-size: var(--main-text-size);
  }
}

strong{
  font-family: var(--main-font);
  font-size: 1.5em;
  font-weight: 600;
}

@media only screen and (min-width: 601px) {
  strong {
    font-size: 1.75em;
  }
}

ul li, ol li{
  font-family: var(--main-font);
  font-size: var(--mobile-main-size);
}

@media only screen and (min-width: 601px) {
  ul li, ol li {
    font-size: var(--main-text-size);
  }
}

/* ...existing code... */

/* Center text and placeholder text inside the FormBold RSVP form only */
.formbold-form-wrapper input[type="text"],
.formbold-form-wrapper input[type="email"],
.formbold-form-wrapper input[type="tel"],
.formbold-form-wrapper input[type="search"],
.formbold-form-wrapper textarea,
.formbold-form-wrapper select,
.formbold-form-wrapper .formbold-form-input {
  text-align: center;
}

/* Placeholder centering for various browsers */
.formbold-form-wrapper ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  text-align: center;
}
.formbold-form-wrapper ::-moz-placeholder { /* Firefox 19+ */
  text-align: center;
}
.formbold-form-wrapper :-ms-input-placeholder { /* IE 10+ */
  text-align: center;
}
.formbold-form-wrapper ::-ms-input-placeholder { /* Edge */
  text-align: center;
}
.formbold-form-wrapper ::placeholder { /* Modern browsers */
  text-align: center;
}

/* Make RSVP form use full window width */
#RSVP .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

#RSVP .flanked .flank-content {
  width: 100% !important;
  max-width: none !important;
}

#RSVP .col.s12 {
  width: 100% !important;
  padding: 0 !important;
}

.formbold-main-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.formbold-form-wrapper {
  width: 100% !important;
  max-width: 1200px !important; /* Reasonable max width for very large screens */
  margin: 0 auto !important;
  padding: 20px !important;
}

/* Make form inputs use more width effectively */
.formbold-form-wrapper .formbold-form-input,
.formbold-form-wrapper input,
.formbold-form-wrapper textarea {
  width: 100% !important;
  min-width: 300px !important;
}

/* Make form sections use full width */
.formbold-mb-5 {
  width: 100% !important;
}

/* Song request table should use full width */
.formbold-form-wrapper table {
  width: 100% !important;
  min-width: 800px !important;
}

/* Person fields should have better spacing on wide screens */
.person-fields {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto 20px auto !important;
  padding: 15px !important; /* Ensure padding to fit within background */
  box-sizing: border-box !important;
}

/* Ensure all form elements fit within their backgrounds */
.formbold-mb-5,
.formbold-form-input,
.formbold-form-label {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Ensure dynamically generated person fields have proper background containment */
.person-fields .formbold-form-input,
.person-fields .formbold-mb-5,
.person-fields .formbold-form-label,
.person-fields .age-radio-group {
  background: rgba(173, 216, 230, 0.35) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}

/* Ensure age radio group labels don't override the background */
.person-fields .age-radio-group .formbold-form-label {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
}

/* Fix radio button groups for mobile - vertical stacking */
.radio-group {
  display: flex !important;
  flex-direction: row !important; /* Default: horizontal */
  gap: 16px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

/* Responsive adjustments for mobile devices */
@media only screen and (max-width: 768px) {
  #RSVP .container {
    padding: 0 10px !important;
  }
  
  .formbold-form-wrapper {
    padding: 15px !important;
  }
  
  .formbold-form-wrapper table {
    min-width: 600px !important; /* Smaller min-width for mobile */
    overflow-x: auto !important;
  }
  
  .person-fields {
    max-width: 100% !important;
    padding: 12px !important;
  }
  
  /* Stack radio buttons vertically on mobile */
  .radio-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .radio-group label {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  
  /* Make wedding song table stack vertically with proper labeling */
  .formbold-form-wrapper table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    min-width: unset !important;
  }
  
  .formbold-form-wrapper table thead {
    display: none !important; /* Hide the original headers */
  }
  
  .formbold-form-wrapper table tbody {
    display: block !important;
    width: 100% !important;
  }
  
  .formbold-form-wrapper table tr {
    display: block !important;
    width: 100% !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    border-radius: 8px !important;
    background: rgba(173, 216, 230, 0.35) !important;
  }
  
  .formbold-form-wrapper table td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 0 !important;
    border: none !important;
    position: relative !important;
  }
  
  /* Add labels above each input field */
  .formbold-form-wrapper table td:nth-child(1)::before {
    content: 'Bride:' !important;
    display: block !important;
    font-weight: bold !important;
    color: white !important;
    margin-bottom: 5px !important;
  }
  
  .formbold-form-wrapper table td:nth-child(2)::before {
    content: 'Groom:' !important;
    display: block !important;
    font-weight: bold !important;
    color: white !important;
    margin-bottom: 5px !important;
  }
  
  .formbold-form-wrapper table td:nth-child(3)::before {
    content: 'Song:' !important;
    display: block !important;
    font-weight: bold !important;
    color: white !important;
    margin-bottom: 5px !important;
  }
  
  .formbold-form-wrapper table td:nth-child(4) {
    text-align: center !important;
    padding-top: 10px !important;
  }
  
  .formbold-form-wrapper table td:nth-child(4)::before {
    display: none !important; /* No label for remove button */
  }
}

@media only screen and (max-width: 480px) {
  .formbold-form-wrapper .formbold-form-input,
  .formbold-form-wrapper input,
  .formbold-form-wrapper textarea {
    min-width: 250px !important; /* Smaller min-width for small mobile */
  }
  
  .formbold-form-wrapper table {
    min-width: 400px !important;
  }
  
  /* Further optimize radio buttons for very small screens */
  .radio-group {
    gap: 8px !important;
  }
  
  .radio-group label {
    font-size: 0.9rem !important;
  }
  
  /* Ensure form fields fit in very narrow displays */
  .person-fields {
    padding: 10px !important;
    margin: 0 0 15px 0 !important;
  }
}

/* Set typed input text to white and placeholders to the previous input colour (#1565c0) */
.formbold-form-wrapper .formbold-form-input,
.formbold-form-wrapper input[type="text"],
.formbold-form-wrapper input[type="email"],
.formbold-form-wrapper input[type="tel"],
.formbold-form-wrapper input[type="search"],
.formbold-form-wrapper textarea,
.formbold-form-wrapper select {
  color: #ffffff; /* typed text becomes white */
}

.formbold-form-wrapper ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #55606d;
}
.formbold-form-wrapper ::-moz-placeholder { /* Firefox 19+ */
  color: #55606d;
}
.formbold-form-wrapper :-ms-input-placeholder { /* IE 10+ */
  color: #55606d;
}
.formbold-form-wrapper ::-ms-input-placeholder { /* Edge */
  color: #55606d;
}
.formbold-form-wrapper ::placeholder { /* Modern browsers */
  color: #55606d;
}

/* Fixed navbar: use Materialize pattern and ensure content isn't hidden underneath.
   We keep parallax behavior by only fixing the nav and adding top padding to the body. */
.navbar-fixed nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Flanking image containers for non-parallax content
   Usage: wrap your content inside a .flanked container and optionally include
   .flank-left, .flank-right and/or .flank-bottom elements containing an <img>.
   The script will detect which flanks are present and apply layout classes.
*/
.flanked {
  position: relative;
  width: 100%;
}
.flanked {
  /* CSS vars set per container by JS: --flank-left-w and --flank-right-w
     allow per-container control. --flank-gap is the space between the flank
     and the content. Default values are responsive to screen size. */
  --flank-left-w: min(20vw, 300px);
  --flank-right-w: min(20vw, 300px);
  --flank-gap: min(2vw, 40px);
}
.flanked .flank-left,
  .flanked .flank-left,
  .flanked .flank-right {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontally center the image inside the flank */
    /* individual flank element may specify its width inline or via CSS; the
      JS measures the rendered width and writes that value back into the
      container as --flank-left-w / --flank-right-w so .flank-content can
      shift dynamically. We keep a responsive fallback width here. */
    width: min(20vw, 300px); /* responsive flank width */
    padding: min(1vw, 12px); /* responsive padding so images don't touch edges */
  }
  .flanked .flank-left img,
  .flanked .flank-right img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%; /* don't overflow the flank container vertically */
    object-fit: contain; /* preserve aspect ratio and center inside the flexbox */
    border-radius: 6px;
  }
.flanked .flank-right {
  position: absolute;
  top: 0;
  /* individual flank element may specify its width inline or via CSS; the
     JS measures the rendered width and writes that value back into the
     container as --flank-left-w / --flank-right-w so .flank-content can
     shift dynamically. We keep a responsive fallback width here. */
  width: min(20vw, 300px); /* responsive flank width */
}
.flanked .flank-left { left: 0; }
.flanked .flank-right { right: 0; }
.flanked .flank-left img,
.flanked .flank-right img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.flanked .flank-content {
  max-width: 1000px;
  margin: 0 auto; /* center by default */
  padding: 0 12px; /* small breathing room */
}
/* shift content away when a single flank exists using measured flank widths
   plus a configurable gap (--flank-gap). The JS writes --flank-left-w and
   --flank-right-w per .flanked container so you can control each flank in
   the HTML (inline width, class, or data-attribute) and the content will
   update automatically. */
.flanked.single-flank-left .flank-content {
  margin-left: calc(var(--flank-left-w, 300px) + var(--flank-gap, 40px));
  margin-right: auto;
}
.flanked.single-flank-right .flank-content {
  margin-right: calc(var(--flank-right-w, 300px) + var(--flank-gap, 40px));
  margin-left: auto;
}
.flanked.double-flank .flank-content {
  /* When both flanks are present, shift the content inwards by the measured
     flank widths plus the configured gap so the content sits between the
     side images instead of stretching under them. The JS writes
     --flank-left-w and --flank-right-w on each container. */
  margin-left: calc(var(--flank-left-w, 300px) + var(--flank-gap, 40px));
  margin-right: calc(var(--flank-right-w, 300px) + var(--flank-gap, 40px));
}
.flanked .flank-bottom {
  /* Center the bottom flank relative to the content area.
    Use the measured flank widths so when side flanks are present the
    bottom content aligns with the text column instead of the full container. */
  box-sizing: border-box;
  margin-top: 12px;
  /* Compute available content width by subtracting side flanks and gaps from 100% */
  width: calc(100% - var(--flank-left-w, 0px) - var(--flank-right-w, 0px) - (var(--flank-gap, 40px) * 2));
  /* Constrain to the same max width used by .flank-content for visual consistency */
  max-width: 1000px;
  /* Offset from the left by the left flank width + gap so it lines up with .flank-content */
  margin-left: calc(var(--flank-left-w, 0px) + var(--flank-gap, 40px));
  /* Use flexbox to always center children horizontally even if their intrinsic
    width changes; this prevents left-alignment when an image doesn't fill the box. */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive adjustments: reorder flanks on mobile AND vertical displays - left above, content middle, right below */
@media only screen and (max-width: 800px), 
       only screen and (min-width: 801px) and (orientation: portrait) {
  /* Convert flanked container to flexbox for vertical ordering */
  .flanked {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Reset flank positioning for vertical stacking */
  .flanked .flank-left, .flanked .flank-right {
    position: static;
    width: 100%;
    margin-bottom: 16px;
    order: 0; /* Default order, will be overridden below */
  }
  
  /* Vertical ordering: flank-left displays above content */
  .flanked .flank-left {
    order: 1; /* First in display order */
    margin: 0 auto 20px auto; /* Center horizontally with bottom margin */
    display: flex;
    justify-content: center; /* Center the content within flank-left */
    align-items: center;
  }
  
  /* Vertical ordering: flank-content displays in middle */
  .flanked .flank-content {
    order: 2; /* Second in display order */
    margin: 0 auto 20px auto; /* Center horizontally with bottom margin */
    width: 100%;
    max-width: 1000px; /* Maintain consistent max-width */
  }
  
  /* Vertical ordering: flank-right displays below content */
  .flanked .flank-right {
    order: 3; /* Third in display order */
    margin: 0 auto; /* Center horizontally */
    display: flex;
    justify-content: center; /* Center the content within flank-right */
    align-items: center;
  }
  
  /* Vertical ordering: flank-bottom stays at the bottom */
  .flanked .flank-bottom {
    order: 4; /* Last in display order */
    margin-top: 20px;
  }
  
  /* On vertical displays, flanks stack vertically — force measured vars to 0 */
  .flanked { --flank-left-w: 0px; --flank-right-w: 0px; --flank-gap: 0px; }
  
  /* Better responsive sizing for stacked flank images */
  .flanked .flank-left img,
  .flanked .flank-right img {
    width: min(80vw, 400px);
    max-width: 100%;
  }
}

/* Specific adjustments for mobile screens only */
@media only screen and (max-width: 800px) {
  .flanked .flank-left img,
  .flanked .flank-right img {
    width: min(80vw, 400px);
    max-width: 100%;
  }
}

/* Specific adjustments for vertical desktop displays */  
@media only screen and (min-width: 801px) and (orientation: portrait) {
  .flanked .flank-left img,
  .flanked .flank-right img {
    width: min(60vw, 500px);
    max-width: 100%;
  }
}

/* Medium screens: adjust flank container responsive scaling */
@media only screen and (min-width: 801px) and (max-width: 1200px) {
  .flanked {
    --flank-left-w: min(18vw, 280px);
    --flank-right-w: min(18vw, 280px);
    --flank-gap: min(1.8vw, 35px);
  }
  
  .flanked .flank-left,
  .flanked .flank-right {
    width: min(18vw, 280px);
    padding: min(0.8vw, 10px);
  }
}

/* Large screens: optimal flank sizing */
@media only screen and (min-width: 1201px) {
  .flanked {
    --flank-left-w: min(22vw, 350px);
    --flank-right-w: min(22vw, 350px);
    --flank-gap: min(2.2vw, 45px);
  }
  
  .flanked .flank-left,
  .flanked .flank-right {
    width: min(22vw, 350px);
    padding: min(1.2vw, 15px);
  }
}

/* Ensure bottom flank images resize to max width */
.flanked .flank-bottom img {
  display: block;
  /* Allow the image to keep its intrinsic width while constraining it to
     the container; do not force width:100% which stretches small images. */
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* fallback centering */
}

/* Reserve space for the fixed navbar so it doesn't cover page content (adjust if needed). */
body {
  /* padding-top: 64px; /* desktop default; Materialize sets .navbar-fixed height to 64px on wider screens */
  padding-top: 0px;
}

/* Comprehensive responsive image scaling system
   Images scale proportionally based on screen width, optimized for 1920px baseline */
img {
  max-width: 100%; /* Prevent images from overflowing containers */
  height: auto; /* Maintain aspect ratio */
}

/* Responsive scaling for images with fixed inline width styles
   These rules override inline styles to make images scale proportionally */

/* Base responsive image sizing (scales from 1920px baseline) */
img[style*="width:300px"],
img[style*="width: 300px"] {
  width: 15.625vw !important; /* 300px at 1920px = 15.625% */
  min-width: 200px; /* Minimum size for small screens */
  max-width: 400px; /* Maximum size for very large screens */
}

img[style*="width:400px"],
img[style*="width: 400px"] {
  width: 20.83vw !important; /* 400px at 1920px = 20.83% */
  min-width: 250px; /* Minimum size for small screens */
  max-width: 500px; /* Maximum size for very large screens */
}

img[style*="width:500px"],
img[style*="width: 500px"] {
  width: 26.04vw !important; /* 500px at 1920px = 26.04% */
  min-width: 300px; /* Minimum size for small screens */
  max-width: 650px; /* Maximum size for very large screens */
}

/* Responsive breakpoint adjustments */
@media only screen and (max-width: 480px) {
  /* Mobile: smaller images to fit screen */
  img[style*="width:300px"],
  img[style*="width: 300px"] {
    width: 80vw !important;
    min-width: 200px;
    max-width: 280px;
  }
  
  img[style*="width:400px"],
  img[style*="width: 400px"] {
    width: 85vw !important;
    min-width: 220px;
    max-width: 320px;
  }
  
  img[style*="width:500px"],
  img[style*="width: 500px"] {
    width: 90vw !important;
    min-width: 250px;
    max-width: 350px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  /* Tablet: medium scaling */
  img[style*="width:300px"],
  img[style*="width: 300px"] {
    width: 25vw !important;
    min-width: 200px;
    max-width: 350px;
  }
  
  img[style*="width:400px"],
  img[style*="width: 400px"] {
    width: 30vw !important;
    min-width: 250px;
    max-width: 420px;
  }
  
  img[style*="width:500px"],
  img[style*="width: 500px"] {
    width: 35vw !important;
    min-width: 300px;
    max-width: 480px;
  }
}

@media only screen and (min-width: 2560px) {
  /* Very large screens: cap the maximum size */
  img[style*="width:300px"],
  img[style*="width: 300px"] {
    max-width: 450px;
  }
  
  img[style*="width:400px"],
  img[style*="width: 400px"] {
    max-width: 600px;
  }
  
  img[style*="width:500px"],
  img[style*="width: 500px"] {
    max-width: 750px;
  }
}

/* Responsive scaling for flank containers with inline width styles
   These override inline styles to make flank containers scale proportionally */

/* Flank container responsive sizing (scales from 1920px baseline) */
.flank-left[style*="width:300px"],
.flank-left[style*="width: 300px"],
.flank-right[style*="width:300px"],
.flank-right[style*="width: 300px"] {
  width: min(15.625vw, 300px) !important; /* 300px at 1920px = 15.625% */
}

.flank-left[style*="width:400px"],
.flank-left[style*="width: 400px"],
.flank-right[style*="width:400px"],
.flank-right[style*="width: 400px"] {
  width: min(20.83vw, 400px) !important; /* 400px at 1920px = 20.83% */
}

.flank-left[style*="width:500px"],
.flank-left[style*="width: 500px"],
.flank-right[style*="width:500px"],
.flank-right[style*="width: 500px"] {
  width: min(26.04vw, 500px) !important; /* 500px at 1920px = 26.04% */
}

/* Mobile: stack all flanks full width */
@media only screen and (max-width: 800px) {
  .flank-left[style*="width"],
  .flank-right[style*="width"] {
    width: 100% !important;
  }
}

/* Medium screens: reduce flank scaling */
@media only screen and (min-width: 801px) and (max-width: 1200px) {
  .flank-left[style*="width:300px"],
  .flank-left[style*="width: 300px"],
  .flank-right[style*="width:300px"],
  .flank-right[style*="width: 300px"] {
    width: min(18vw, 280px) !important;
  }
  
  .flank-left[style*="width:400px"],
  .flank-left[style*="width: 400px"],
  .flank-right[style*="width:400px"],
  .flank-right[style*="width: 400px"] {
    width: min(22vw, 350px) !important;
  }
  
  .flank-left[style*="width:500px"],
  .flank-left[style*="width: 500px"],
  .flank-right[style*="width:500px"],
  .flank-right[style*="width: 500px"] {
    width: min(26vw, 400px) !important;
  }
}

@media only screen and (max-width: 600px) {
  body {
    /* padding-top: 56px; /* mobile navbar height */
    padding-top: 0px;
  }
}

/* Mobile button improvements */
.full-width-mobile {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 16px;
  text-align: center;
  box-sizing: border-box;
}

@media only screen and (min-width: 601px) {
  .full-width-mobile {
    display: inline-block;
    width: auto;
    margin: 0 4px;
  }
}

/* Button group centered - buttons right next to each other */
.button-group-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.btn-adjacent {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 54px;
  margin: 0;
  padding: 12px 24px;
  line-height: 1.3;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Mobile: stack buttons vertically with small gap */
@media only screen and (max-width: 600px) {
  .button-group-centered {
    flex-direction: column;
    gap: 8px;
  }
  
  .btn-adjacent {
    width: 100%;
    min-width: auto;
  }
}

/* Desktop/Tablet: buttons side by side, touching */
@media only screen and (min-width: 601px) {
  .button-group-centered {
    flex-direction: row;
    gap: 0;
  }
  
  .btn-adjacent {
    min-width: 160px;
    border-radius: 0;
  }
  
  .btn-adjacent:first-child {
    border-radius: 4px 0 0 4px;
  }
  
  .btn-adjacent:last-child {
    border-radius: 0 4px 4px 0;
  }
}

/* Closer button positioning for desktop/tablet */
@media only screen and (min-width: 601px) {
  .btn-large {
    margin: 0 4px;
    width: auto;
    min-width: 140px;
  }
}

/* Improved mobile spacing */
@media only screen and (max-width: 600px) {
  .container {
    padding: 0 20px;
  }
  
  /* Removed conflicting padding rule for #index-banner .section since it's handled above */
  
  .btn-large {
    padding: 12px 24px;
    font-size: 1rem;
    width: 100%;
    margin: 8px 0;
  }
  
  /* Better mobile navigation */
  .brand-logo {
    font-size: 1.8rem !important;
  }
  
  .sidenav li > a {
    padding: 16px 32px;
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 601px) {
  .btn-large {
    margin: 0 4px;
    width: auto;
    min-width: 140px;
  }
}

/* Our Wedding Story page navigation - Logo and Home side by side - SIMPLE APPROACH */
body.our-wedding-story nav .brand-logo,
body.our-wedding-story nav #logo-container,
.our-wedding-story nav .brand-logo,
.our-wedding-story nav #logo-container {
  max-width: 60% !important;
  font-size: 1.2rem !important;
  display: inline-block !important;
  float: left !important;
}

body.our-wedding-story nav ul.right,
.our-wedding-story nav ul.right {
  display: block !important;
  float: right !important;
  margin: 0 !important;
  position: static !important;
}

body.our-wedding-story nav ul.right li,
.our-wedding-story nav ul.right li {
  display: inline-block !important;
  float: none !important;
}

body.our-wedding-story nav ul.right li a,
.our-wedding-story nav ul.right li a {
  font-size: 1rem !important;
  font-family: var(--heading-font) !important;
  color: white !important;
  padding: 0 10px !important;
  display: inline-block !important;
}

@media only screen and (max-width: 480px) {
  body.our-wedding-story nav .brand-logo,
  body.our-wedding-story nav #logo-container,
  .our-wedding-story nav .brand-logo,
  .our-wedding-story nav #logo-container {
    max-width: 50% !important;
    font-size: 1.1rem !important;
  }
  
  body.our-wedding-story nav ul.right li a,
  .our-wedding-story nav ul.right li a {
    font-size: 0.9rem !important;
    padding: 0 8px !important;
  }
}

@media only screen and (max-width: 360px) {
  body.our-wedding-story nav .brand-logo,
  body.our-wedding-story nav #logo-container,
  .our-wedding-story nav .brand-logo,
  .our-wedding-story nav #logo-container {
    max-width: 45% !important;
    font-size: 1rem !important;
  }
  
  body.our-wedding-story nav ul.right li a,
  .our-wedding-story nav ul.right li a {
    font-size: 0.8rem !important;
    padding: 0 6px !important;
  }
}

@media only screen and (max-width: 360px) {
  .our-wedding-story nav ul.right li a {
    font-size: 1.2rem !important;
    padding: 0 10px !important;
  }
}

/* Our Wedding Story page brand-logo styling to match main page logo size */
.our-wedding-story nav .brand-logo {
  font-size: 2.2rem !important; /* Default large size */
  max-width: 100% !important; /* Allow full width since no other nav items */
  margin-right: 0 !important; /* Remove margin since no other nav items */
}

@media only screen and (max-width: 992px) {
  .our-wedding-story nav .brand-logo {
    font-size: 2rem !important;
  }
}

@media only screen and (max-width: 600px) {
  .our-wedding-story nav .brand-logo {
    font-size: 1.8rem !important;
  }
}

@media only screen and (max-width: 480px) {
  .our-wedding-story nav .brand-logo {
    font-size: 1.6rem !important;
  }
}