/* src/assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap'); /* Added Zen Antique */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* Updated to Source Sans 3 */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Libre:wght@400;600;700&display=swap');

/* =================================== */
/* === Language Specific Styles === */
/* =================================== */

/* --- Japanese Styles --- */
html[lang="ja"] body {
  /* Override the default body font for Japanese pages */
  font-family: 'Zen Antique', serif;
  /* You might need slightly different default word spacing or kerning */
  word-spacing: normal; /* Reset if other rules affect it */
}

/* Apply to main content area too, and adjust line-height */
html[lang="ja"] .content-f {
  font-family: 'Zen Antique', serif; /* Ensure it applies here too */
  line-height: 1.8; /* Increase line height for Japanese readability */
}

/* Optional: Adjust Japanese quote style if needed */
html[lang="ja"] .content-f blockquote {
    /* font-style: normal; */ /* Maybe remove italic for Japanese quote? */
    /* line-height: 1.6; */ /* Adjust quote line height */
}

/* Optional: Adjust other elements like headings if needed */
/* html[lang="ja"] h2, html[lang="ja"] h3 { ... } */




/* Reset basic styles and set base font */
body {
  font-family: 'Source Sans 3', sans-serif; /* Default fallback */
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Better box model */
  background-color: #2f2f2f; /* Example background */
  color: #333; /* Default text color */
  /* Optional: Set base font size and line height here */
  /* font-size: 16px; */
  /* line-height: 1.6; */
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* === Site Header === */
.site-header {
  /* Needed for absolute positioning of logo later */
  position: relative;
}

/* Container for centering content within bars if needed */
.header-section-a,
.header-section-b,
.header-section-c {
  max-width: 1200px; /* Or your chosen max-width */
  margin: 0 auto; /* Center the content */
  padding: 0 20px; /* Add some padding on the sides */
}

/* Add/Confirm these specific Flexbox rules for section A and B */
.header-section-a,
.header-section-b {
  display: flex;              /* Crucial: Enables Flexbox layout */
  justify-content: space-between; /* Crucial: Pushes children to opposite ends */
  align-items: center;         /* Vertically aligns children in the middle */
}

/* Top Bar (A) */
.header-top-bar {
  background-color: #2f2f2f;
  min-height: 45px; /* Example height, adjust */
  color: #ffffff; /* Default text color for this bar */
  padding-top: 10px;    /* Add padding top */
  padding-bottom: 10px; /* Add padding bottom */
}

/* Main Bar (B) */
.header-main-bar {
  /* min-height: 80px; */ /* Let content dictate height or set specific */
  /* Keep position: relative */
  position: relative;
  background-color: #ffffff;
  color: #2f2f2f;
  padding-top: 10px; /* Add padding if needed */
  padding-bottom: 10px; /* Add padding if needed */
}

/* Bottom Bar (C) */
.header-bottom-bar {
  background-color: #2f2f2f;
  min-height: 25px; /* Shorter height as requested, adjust */
}

/* --- Header Navigation & Links --- */

/* Reset list styles */
.lang-switcher ul,
.sns-links ul,
.footer-lang-switcher ul, /* Added footer lists here too */
.footer-sns-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px; /* Default smaller gap (adjust if needed) */
}

/* Specific styling for Main Nav lists in Bar B */
.main-nav ul {
  list-style: none; /* Rep Gete if needed, or rely on inheritance */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6vw; /* Relative gap: 3% of viewport width (adjust as needed) */
}


/* General Link Styling in Header */
.header-top-bar a,
.header-main-bar a {
  font-family: 'Bodoni Libre', serif; /* Apply the font */
  text-transform: uppercase; /* Full caps */
  font-weight: 600; /* Bold */
  text-decoration: none; /* Remove underline */
  transition: color 0.2s ease; /* Smooth color transition on hover */
}

/* Link colors based on bar background */
.header-top-bar a {
  color: #ffffff; /* White links on dark bar */
}
.header-main-bar .main-nav a { /* More specific selector for main nav */
  color: #2f2f2f; /* Dark links on white bar */
}

/* Hover Effect */
.header-top-bar a:hover,
.header-main-bar a:hover {
  color: #888888; /* Grey color on hover */
}

.main-nav-left {
  flex-basis: 30%; /* Example: Allocate space */
  justify-content: flex-end; /* Align items to the right (towards logo) */
  display: flex; /* Needed for justify-content */
}
.main-nav-right {
   flex-basis: 30%; /* Example: Allocate space */
   justify-content: flex-start; /* Align items to the left (towards logo) */
   display: flex; /* Needed for justify-content */
}

/* --- Logo Positioning --- */
.logo-container {
  /* Absolute positioning for overlap */
  position: absolute;
  /* Center horizontally */
  left: 50%;
  transform: translateX(-50%);
  /* Vertical Positioning - Adjust 'top' value as needed */
  top: -50px; /* Example: Push down 15px from top of main-bar. Adjust this! */
  z-index: 10; /* Ensure logo is above other header elements */
  width: 180px; /* Give the container the logo's width */
  text-align: center; /* Keep content centered if needed */
  flex-basis: 180px; /* Give it basis matching width, though position:absolute overrides flow */
}

.logo-container img {
  display: block;
  width: 100%; /* Make image fill its container */
  max-width: 180px; /* Example max size, adjust */
  height: auto;
  /* Optional: Add slight bottom margin if logo itself needs space below */
  /* margin-bottom: -10px; */ /* May not be needed if 'top' positioning is right */
}

/* Optional: Add padding to individual nav links */
.main-nav a {
   padding: 5px 0; /* Add some vertical padding */
}


/* === Specific Link Styling === */
.pavilion-profile-link {
  font-style: italic;         /* Keep it italic */
  text-decoration: underline;  /* Keep it underlined */
  color: #4a4a4a;             /* A darker grey - adjust to your preference */
  transition: color 0.2s ease; /* Smooth color transition on hover */
}

.pavilion-profile-link:hover,
.pavilion-profile-link:focus {
  color: #888888;             /* Lighter grey on hover (same as other link hovers) */
  /* text-decoration: none; */  /* Optional: remove underline on hover */
  outline: none;               /* Remove focus outline if using color change */
}



/* === Main Content Area Layout === */

.main-wrapper {
  display: grid;
  /* Define 3 columns: Left G | Content F | Right G */
  /* Using fixed width for columns here - adjust 150px as needed */
  grid-template-columns: 150px 1fr 150px;
  max-width: 1200px; /* Example overall max width for the grid */
  margin: 0px auto; /* Center the grid, add some vertical space */
  gap: 0; /* No space between columns */
  align-items: stretch; /* Ensure columns stretch full height */
}

.content-f {
  /* Center content area */
  background-color: #d8d7d7; /* Example: White background for content */
  padding: 40px 60px; /* Add generous padding inside */
  /* Optional: If content text shouldn't be too wide */
  /* max-width: 800px; */
  /* margin: 0 auto; */ /* Center if max-width is used */
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
}

/* === Content Images === */
.content-f img:not(.image-float-left):not(.image-float-right) {
  display: block;       /* Treat image like a block for margin auto */
  max-width: 100%;      /* Crucial: Prevents image exceeding container width */
  height: auto;         /* Crucial: Maintains aspect ratio when width changes */
  margin-left: auto;    /* Center the image horizontally */
  margin-right: auto;   /* Center the image horizontally */
  border-radius: 8px; /* Add this line for rounded corners */
}

/* === Content Video Styling === */
.content-video { /* Or target .video-container video */
    display: block;     /* Helps with centering */
    max-width: 100%;    /* Make it responsive */
    height: auto;       /* Maintain aspect ratio */
    margin: 30px auto; /* Add vertical margin and center horizontally */
    border-radius: 8px; /* Add this line for rounded corners */

}

/* === Blockquote Styling === */
.content-f blockquote {
  font-family: 'Bodoni Libre', serif; /* Use the desired font */
  font-size: 1.8em;          /* Make it significantly larger (adjust value as needed) */
  font-style: italic;          /* Common style for quotes */
  font-weight: 400;            /* Or 600 if you want it bolder */
  text-align: center;          /* Center the quote text */
  margin-top: 40px;            /* Space above the quote */
  margin-bottom: 40px;         /* Space below the quote */
  margin-left: auto;           /* Center block element */
  margin-right: auto;          /* Center block element */
  max-width: 80%;              /* Prevent quote being too wide */
  padding: 0;                  /* Remove default padding if any */
  border: none;                /* Remove default border if any */
  color: #555;                /* Slightly different color? (Optional) */
}

/* Add vertical margin ONLY to images directly inside paragraphs in .content-f */
/* This prevents affecting gallery images which are inside <a> tags */
.content-f > p > img {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Target the paragraph inside the blockquote if needed */
/* Remove default margins from paragraphs inside blockquotes if Markdown adds them */
.content-f blockquote p {
    margin-bottom: 0;
}


/* --- Column Styling (G) --- */
.column-g {
  display: flex;
  flex-direction: column; /* Stack G1, G2, G3 vertically */
  /* Optional: background color if images don't fully cover */
  /* background-color: #e0e0e0; */
}

.g1-capital {
  height: 409px; /* IMPORTANT: Use the actual height of your G1 image */
  background-repeat: no-repeat;
  /* Align image to bottom edge of this div */
  background-position: center bottom;
  /* Adjust size as needed: cover, contain, or specific width/height */
  background-size: cover;
}

.g2-shaft {
  flex-grow: 1;
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto; /* Or your chosen size */
  /* Add these lines: */
  background-origin: border-box;
  background-clip: border-box;
}

.g3-base {
  height: 231px; /* Make sure this is 1x height */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain; /* Or your chosen size */
  /* Add these lines: */
  background-origin: border-box;
  background-clip: border-box;
}

/* --- Apply Specific Background Images --- */
/* IMPORTANT: Replace with your actual image paths and filenames! */
/* Place your images inside 'src/assets/images/' */

.g1-capital-left { background-image: url('/assets/images/g1-capital-left.webp'); }
.g1-capital-right { background-image: url('/assets/images/g1-capital-right.webp'); }

/* Assuming one tile works for both sides unless your texture needs mirroring */
.g2-shaft-left { background-image: url('/assets/images/g2-shaft-tile-left.webp'); }
.g2-shaft-right { background-image: url('/assets/images/g2-shaft-tile-right.webp'); }

.g3-base-left { background-image: url('/assets/images/g3-base-left.webp'); }
.g3-base-right { background-image: url('/assets/images/g3-base-right.webp'); }

/* === Site Footer === */

.site-footer {
  background-color: #2f2f2f; /* Dark grey background */
  color: #ffffff;           /* White text color */
  padding: 15px 0;         /* Vertical padding - adjust '15px' to make it thinner/thicker */
  font-size: 0.9em;         /* Slightly smaller font size for footer */
}

.footer-content {
  /* Align content with the rest of the site */
  max-width: 1200px; /* Use the same max-width as header sections */
  margin: 0 auto;   /* Center the content */
  padding: 0 20px; /* Horizontal padding like header sections */

  /* Use Flexbox to arrange items */
  display: flex;
  justify-content: space-between; /* Pushes Lang(L)/SNS(R) to ends, Copyright stays centered */
  align-items: center;           /* Vertically center items */
  flex-wrap: wrap; /* Allow wrapping on very small screens if needed */
  gap: 15px; /* Add some gap for wrapping case */
}

/* --- Footer Links (Lang & SNS) --- */
/* Ensure lists are horizontal (already handled by previous combined rule, but good to be explicit if needed) */
/* .footer-lang-switcher ul, .footer-sns-links ul { ... } */

/* Style footer links */
.site-footer a {
  color: #ffffff; /* White links */
  font-family: 'Bodoni Libre', serif; /* Match header font */
  text-transform: uppercase; /* Match header style */
  font-weight: 600; /* Match header weight */
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #888888; /* Grey hover effect */
}

/* --- Footer Copyright --- */
.footer-copyright {
  margin: 0; /* Remove default paragraph margin */
  text-align: center; /* Ensure centered text */
  /* Flexbox 'space-between' usually centers the middle item well, */
  /* but text-align ensures it if wrapping occurs */
}

/* --- Footer SNS Links Specific (if needed) --- */
.footer-sns-links {
  /* Add specific styles if needed */
}

/* --- Footer Lang Switcher Specific (if needed) --- */
.footer-lang-switcher {
   /* Add specific styles if needed */
}



/* === Gallery Grid === */
.gallery-grid {
  display: grid;
  /* Responsive columns: aim for ~250px width, fill available space */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* Adjust spacing between thumbnails */
  padding: 20px 0; /* Space above/below the grid */
}

.gallery-item {
  display: block; /* Make link behave like a block */
  position: relative;
  overflow: hidden; /* Helps with hover effects if needed */
  border-radius: 4px; /* Slightly rounded corners */
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Hover transition */
}

/* Hover Effect */
.gallery-item:hover img {
  transform: scale(1.03); /* Slight zoom */
  opacity: 0.8;
}

/* Ensure gallery is centered within content F if needed */
.content-f .gallery-grid {
   /* Add styles here if grid needs specific alignment within content-f */
}




/* === Recent Press Section (Homepage) === */
.recent-press {
  padding-top: 0em;     /* Space above section */
  margin-top: 0em;        /* Ensure separation */
  border-top: 1px solid #ccc; /* Separator line */
  margin-bottom: 4em;     /* Space below section */
}

.press-heading { /* Targets the H3 */
  text-align: center;
  font-family: 'Bodoni Libre', serif;
  font-size: 1.6em; /* Adjust */
  font-weight: 600;
  margin-bottom: 1.5em;
  color: #444;
}

.press-item {
  max-width: 700px; /* Max width of this block */
  margin: 0 auto;   /* Center block */
  text-align: center;
}

.press-title { /* Targets the paragraph with the article title */
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 0.3em; /* Less space before source */
}

.press-source { /* Targets the paragraph with ANSA - Date */
  font-style: italic;
  font-size: 0.9em;
  color: #555;
  margin-bottom: 1.5em; /* Space before link */
}

.press-link { /* Targets the paragraph holding the link */
  margin-top: 1em;
}

/* Style the link itself */
a.button-link {
  display: inline-block; /* Allow padding/background */
  padding: 10px 25px; /* Button padding */
  background-color: #555; /* Darker grey, less prominent than main buttons */
  color: #ffffff;
  font-family: 'Source Sans 3', sans-serif; /* Body font */
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

a.button-link:hover,
a.button-link:focus {
  background-color: #333; /* Darken on hover/focus */
  color: #ffffff;
  outline: none;
}




/* === Expo Feature Heading === */
.expo-heading {
  text-align: center; /* Center align the whole block */
  margin-top: 1em;    /* Adjust space above heading */
  margin-bottom: 1.5em; /* Adjust space below heading */
  font-family: 'Bodoni Libre', serif; /* Use the display font */
  font-weight: 400;       /* Base weight (applies to subtitle) */
  line-height: 1.3;       /* Control spacing between the two lines */
}

.artwork-title {
  font-size: 1.6em; /* Make title larger (e.g., 1.6 times the h2's base size) */
  font-weight: 600;   /* Make title bolder */
  display: inline-block; /* Allows margin */
  margin-bottom: 0.2em;  /* Small space below title before subtitle */
}
/* Ensure italics are applied if <i> tag is used, or set here */
.artwork-title i {
    font-style: italic;
}

.artwork-subtitle {
  font-size: 1em;  /* Set subtitle size (e.g., same as h2's base size) */
  font-weight: 400; /* Ensure normal weight */
  display: inline-block;
  color: #555;     /* Optional: Make subtitle slightly less prominent */
}




/* === Floated Images === */
.image-float-left {
  float: left;
  margin-right: 25px; /* This should now apply */
  margin-bottom: 15px;
  max-width: 45%;     /* This should now apply */
  height: auto;         /* Make sure height: auto is here */
  border-radius: 4px;   /* Apply desired radius for floated images */
}

.image-float-right {
  float: right;
  margin-left: 25px;  /* This should now apply */
  margin-bottom: 15px;
  max-width: 45%;     /* This should now apply */
  height: auto;         /* Make sure height: auto is here */
  border-radius: 4px;   /* Apply desired radius for floated images */
}

/* Clearfix utility: Prevents container from collapsing around floats */
/* Apply class="clearfix" to the div wrapping float + text */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}




/* === Highlights List Styling === */
.highlights-list {
  list-style: none;     /* Remove default bullets */
  padding-left: 0;      /* Remove default browser padding */
  margin-top: 1.8em;    /* Space above the highlights list */
  margin-bottom: 2.5em; /* Space below list (before horizontal rule) */
}

.highlights-list li {
  font-size: 1.05em; /* Make text slightly larger than body text */
  font-weight: 600;    /* Make text semi-bold */
  line-height: 1.6;    /* Adjust line spacing for readability */
  margin-bottom: 1.2em;/* Space between each highlight item */
  padding-left: 20px;  /* Indent the text from the border */
  border-left: 4px solid #555; /* Add a distinct dark grey left border (adjust color/width) */
  position: relative; /* Needed if you ever want pseudo-elements like custom bullets */
}



/* === Figure and Figcaption Styling === */
.content-figure {
  margin: 30px auto; /* Center figure block, add vertical space */
  padding: 0; /* Remove default figure margin/padding if any */
  max-width: 100%; /* Allow figure to be centered based on image width */
  width: fit-content; /* Prevent figure taking full width unnecessarily */
}

/* Apply general responsive/rounding styles to images within figures */
/* These might be inherited from .content-f img, but being explicit is safe */
.content-figure img {
   display: block;
   max-width: 100%;
   height: auto;
   border-radius: 8px; /* Use same rounding as other images */
   margin: 0; /* Reset margins if inheriting from .content-f img */
}

.content-figure figcaption {
  font-size: 0.85em;    /* Caption text slightly smaller */
  font-style: italic;   /* Italicize caption */
  color: #555;         /* Muted text color */
  text-align: center;   /* Center caption text */
  margin-top: 8px;      /* Space between image and caption */
  margin-bottom: 12px;
  padding: 0 5px;       /* Small horizontal padding */
  max-width: 100%; /* Ensure caption doesn't overflow image */
}

.content-f h3 {
  /* Adjust vertical spacing */
  margin-top: 1.3em;    /* Space ABOVE the year heading (adjust as needed) */
  margin-bottom: 0.6em; /* REDUCED space BELOW the year heading (adjust as needed) */

  /* Optional: Add other H3 styles? */
  /* font-family: 'Bodoni Libre', serif; */ /* Use display font? */
  /* font-size: 1.4em; */ /* Example size */
  /* font-weight: 600; */
  /* color: #444; */
}

/* Reduce space ABOVE lists that immediately follow H3s */
.content-f h3 + ul,
.content-f h3 + ol {
    margin-top: 0em; /* Significantly reduce default top margin (adjust as needed) */
}



/* =================================== */
/* === Contact Form Styling === */
/* =================================== */

.contact-form {
  margin-top: 2.5em; /* Add some space above the form */
  /* You could add a max-width here if you don't want the form */
  /* to span the full width of the content area F */
  /* max-width: 650px; */
}

.form-group {
  margin-bottom: 1.75em; /* Creates space between each label/input group */
}

.contact-form label {
  display: block;       /* Place label above the input field */
  margin-bottom: 0.6em; /* Space between label and input */
  font-weight: 600;     /* Make label text slightly bolder */
  font-size: 0.95em;    /* Slightly smaller label text */
  color: #4a4a4a;       /* Adjust label color if desired */
}

/* Styling for text inputs and the textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;          /* Ensure they take up full line */
  width: 100%;             /* Make fields fill their container width */
  padding: 12px 15px;      /* Padding inside the fields */
  font-family: inherit;    /* Use the main body font (Source Sans 3) */
  font-size: 1em;          /* Match body font size (or e.g., 16px/18px) */
  line-height: inherit;    /* Match body line height */
  color: #333;              /* Text color inside input */
  background-color: #ffffff; /* White background for fields */
  border: 1px solid #ccc;     /* Subtle grey border */
  border-radius: 4px;       /* Match other subtle rounding */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle inset shadow */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Smooth focus effect */
}

/* Specific styling for the textarea */
.contact-form textarea {
  resize: vertical; /* Allow users to resize vertically only */
}

/* Style for when a field is focused (clicked into) */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  outline: none;                /* Remove default browser outline */
  border-color: #555;           /* Darker border on focus */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(85, 85, 85, 0.3); /* Subtle glow */
}

/* Styling for the submit button */
.contact-form button[type="submit"] {
  display: inline-block;      /* Behaves like a button */
  padding: 12px 35px;         /* Generous padding */
  background-color: #2f2f2f;  /* Dark background (match header/footer) */
  color: #ffffff;            /* White text */
  font-family: 'Bodoni Libre', serif; /* Use display font */
  font-size: 1.1em;          /* Slightly larger text */
  font-weight: 600;            /* Bold */
  text-transform: uppercase;   /* Uppercase text */
  letter-spacing: 0.5px;     /* Add slight letter spacing */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin-top: 10px;          /* Add some space above the button */
}

/* Hover/Focus styles for the button */
.contact-form button[type="submit"]:hover,
.contact-form button[type="submit"]:focus {
  background-color: #4a4a4a; /* Slightly lighter grey */
  outline: none;
}

/* Subtle press effect for the button */
.contact-form button[type="submit"]:active {
   transform: scale(0.98);
}




/* =================================== */
/* === Mobile Navigation Styling === */
/* =================================== */

.mobile-menu-toggle {
  display: none; /* Hidden by default on desktop */
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 100; /* Ensure it's clickable */
}

/* Simple hamburger icon styles */
.hamburger-icon {
  display: block;
  width: 24px;
  height: 20px;
  position: relative;
}
.hamburger-icon span {
  display: block;
  position: absolute;
  height: 3px; /* Thickness of bars */
  width: 100%;
  background: #2f2f2f; /* Color of bars */
  border-radius: 3px;
  left: 0;
  opacity: 1;
  transition: all 0.25s ease-in-out;
}
.hamburger-icon span:nth-child(1) { top: 0px; }
.hamburger-icon span:nth-child(2) { top: 8px; } /* Adjust spacing */
.hamburger-icon span:nth-child(3) { top: 16px; } /* Adjust spacing */

/* Mobile Nav Panel (Hidden by default) */
.mobile-nav-panel {
  display: none; /* Hidden by default */
  position: fixed; /* Or absolute, depending on desired effect */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(47, 47, 47, 0.95); /* Dark semi-transparent background */
  z-index: 90; /* Below toggle, above content */
  padding-top: 80px; /* Space for header */
  text-align: center;
}

.mobile-nav-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-panel ul li {
  margin-bottom: 20px;
}

.mobile-nav-panel ul li a {
  font-family: 'Bodoni Libre', serif;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.5em; /* Larger font for mobile menu */
  display: block;
  padding: 10px;
}
.mobile-nav-panel ul li a:hover {
  color: #888888;
}





/* CSS for when the mobile menu is open */
.mobile-nav-panel.is-open {
  display: block; /* Or flex, grid depending on desired inner layout */
}

/* Optional: Prevent body scroll when menu is open */
body.no-scroll {
  overflow: hidden;
}

/* Optional: Style for the hamburger icon when menu is open (transforms bars into an X) */
.mobile-menu-toggle.is-active .hamburger-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg); /* Adjust translateY based on bar spacing */
}
.mobile-menu-toggle.is-active .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.is-active .hamburger-icon span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg); /* Adjust translateY based on bar spacing */
}



/* =================================== */
/* ========== Media Queries ========== */
/* =================================== */

/* --- Medium devices (Tablets, landscape phones, etc. < 992px) --- */
@media (max-width: 991.98px) {
  /* Adjustments for screens smaller than 992px */

  .header-section-a,
  .header-section-b,
  .header-section-c,
  .footer-content {
     max-width: 720px; /* Example: Reduce max-width */
     padding: 0 15px; /* Reduce side padding */
  }

  .main-wrapper {
     max-width: 720px; /* Example: Reduce max-width */
     /* Example: Make side columns narrower */
     grid-template-columns: 100px 1fr 100px;
     margin: 0px auto;
  }

  .content-f {
     padding: 30px 40px; /* Reduce padding */
  }

  .main-nav ul {
      gap: 4vw; /* Reduce nav gap */
  }

  .logo-container {
     /* You might need to adjust logo size/position slightly here */
     /* width: 160px; */
     /* top: 12px; */
  }
   .logo-container img {
     /* max-width: 160px; */
   }

  .g1-capital {
    height: 273px; /* IMPORTANT: Use the actual height of your G1 image */
    background-size: contain;

  }
  .g3-base {
    height: 154px; /* Make sure this is 1x height */

  }

}


/* --- Small devices (Portrait tablets, large phones < 768px) --- */
@media (max-width: 767.98px) {
   /* Adjustments for screens smaller than 768px */
   .header-main-bar {
     /* Reduce vertical padding */
     padding-top: 5px;    /* Adjust as needed (was 10px?) */
     padding-bottom: 5px; /* Adjust as needed (was 10px?) */
     min-height: 60px; /* Add min-height (adjust value as needed) */
     position: relative; /* Ensure this is still relative */
   }

   /* Example: Hide side columns completely */
   .main-wrapper {
     grid-template-columns: 1fr; /* Single column for content */
     max-width: 100%; /* Allow full width */
     margin: 0px 0; /* Remove side margin */
     padding: 0 15px; /* Add padding directly to wrapper */
   }
   .column-g {
     display: none; /* Hide the side columns */
   }
   .content-f {
      padding: 5px; /* Adjust padding */
   }

   /* Start collapsing header navigation */
   .main-nav {
     display: none; /* Hide the main desktop navigation */
   }
   .header-section-b {
      justify-content: center; /* Center the logo now nav is gone */
   }
   .logo-container {
     position: absolute; /* Revert to absolute */
     left: 50%;
     transform: translateX(-50%);
     /* Adjust TOP value for mobile overlap - EXPERIMENT with this value! */
     top: -35px; /* Start guess - less than desktop's -50px? */
     z-index: 10;
     width: 150px; /* Keep mobile width */
     text-align: center;
     /* Remove margin and flex-basis added for static */
     /* margin: 5px 0; */
     /* flex-basis: auto; */
    }
    .logo-container img {
      max-width: 150px;
      /* REMOVE margin-bottom: -80px; */
      display: block; /* Keep this */
      height: auto; /* Keep this */
      width: 100%; /* Keep this */
    }

   /* Adjust top bar? Maybe stack items? */
   .header-section-a {
      gap: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      justify-content: space-between;
      align-items: center;
   }


  .mobile-menu-toggle {
      display: block; /* Show hamburger button */
      /* Position it - e.g., top right relative to header B */
      position: absolute;
      top: 50%;
      right: 15px; /* Adjust as needed */
      transform: translateY(-50%);
    }

    .header-section-b {
      /* Make space for the button if needed */
      /* justify-content: center; */ /* Keep logo centered */
    }

    /* We already hid .main-nav in this query */

    /* Style for when menu IS open (added by JS later) */
    /* .mobile-nav-panel.is-open {
        display: block;
    } */
  }
}


/* --- Extra small devices (Phones < 576px) --- */
@media (max-width: 575.98px) {
   /* Adjustments for screens smaller than 576px */
   body {
     font-size: 14px; /* Example: Smaller base font */
   }

   .header-section-a,
   .header-section-b,
   .header-section-c,
   .footer-content {
     padding: 0 10px; /* Less side padding */
   }

   .main-wrapper {
      margin: 0;
      padding: 0 10px; /* Less side padding */
   }
    .content-f {
      padding: 20px; /* Less padding */
   }

   .logo-container {
      width: 130px; /* Example: Smaller logo */
   }
    .logo-container img {
      max-width: 130px;
   }

   /* Further reduce gaps in footer/header lists */
    .lang-switcher ul,
    .sns-links ul,
    .footer-lang-switcher ul,
    .footer-sns-links ul {
       gap: 15px;
    }
    .image-float-left,
    .image-float-right {
      float: none;           /* Turn off float on small screens */
      display: block;        /* Make image block for centering */
      max-width: 100%;       /* Allow image full width */
      margin-left: auto;     /* Center the image */
      margin-right: auto;
      margin-bottom: 25px;   /* Adjust space below */
      /* Remove side margins needed for float */
      margin-left: auto !important; /* Override float margin */
      margin-right: auto !important; /* Override float margin */
}