/* Mobile-only overrides for the shared sc-header component (2026-09-13).
   sc-components.css/js are the platform-wide library used by every
   sitectrl site, so we never edit them directly -- this file is linked
   on every page of THIS site, so any future mobile-header tweak
   (color, size, spacing) belongs here, scoped to the same
   max-width:767px breakpoint the component itself uses. Desktop rules
   for .sc-header live outside this query and are untouched. */
@media (max-width: 767px) {
  .sc-header__links a { color: #000; font-size: 14px; letter-spacing: 0.5px; }
  .sc-header__carat   { color: #000; font-size: 23px; line-height: 16px; }
  /* Both arrows are now the SAME glyph in the markup (down-caret,
     "⌄") -- the up button is just that glyph flipped vertically via
     CSS, so up/down are guaranteed to be pixel-identical mirror
     images instead of two different Unicode characters (⌃ vs ⌄)
     that render with different weight/width in some fonts (user
     report, 2026-09-13: "the top and bottom arrows look different"). */
  .sc-header__carat--up { display: inline-block; transform: scaleY(-1); }
  /* Logo sizing (2026-09-13, second pass): user shared the original
     mobile site's screenshot showing very little white space between
     the nav box and the logo -- bigger than our 66/34 + 90% version.
     Widening the brand column and the image fill (no transform:scale
     this time, which is what made the earlier 28/72 attempt too big
     and blurry) closes that gap without over-enlarging. */
  .sc-header__nav { flex: 0 0 28%; }
  .sc-header__brand { flex: 0 0 72%; }
  .sc-header__brand img { width: 98%; height: auto; max-height: none; margin: 0 auto; display: block; }
  /* Top-align the brand column (Login link + logo), not centered as a
     group -- centering pushes the logo down below the nav's top edge
     once the Login link sits above it and adds height to the group.
     Top-aligning keeps the logo lined up with the top of the left-hand
     menu the way it did before the Login link was added (user report,
     2026-09-14: "logo looks pushed down"). */
  .sc-header__brand { justify-content: flex-start; }
  .sc-header { gap: .5rem; }
  /* Left/top align the block instead of the component's default
     vertical-centering, and pin the arrows to the top/bottom edges
     with the link box between them -- matches the original site's
     stacked layout (arrow / 3-line box / arrow), not a centered group. */
  .sc-header__nav { align-items: flex-start; justify-content: space-between; }
  .sc-header__links { align-items: flex-start; }
  .sc-header__links a { justify-content: flex-start; }
  /* Less vertical space in the reel: the component default (2.6em
     per row) let a sliver of the 4th link peek in under the 3-row
     max-height on first load (user report, 2026-09-13). Shrinking
     the row height (not just capping max-height at 3x it) removes
     that sliver instead of just clipping it off mid-line. Also force
     the member-login <li> (which carries its own inline
     display:inline-block from markup.py) back to block so it takes
     up exactly one row like every other link, instead of sizing to
     its own content and throwing off the 3-row math. */
  .sc-header__nav { --sc-row: 2.3em; }
  .sc-header__links li { display: block; }
  .sc-header__links a { height: var(--sc-row); }
}

/* AWC Korea — shared page chrome: content width + page background.
   One rule for every page instead of a dozen slightly different
   inline values. Change the width, centering, or background color
   here and it applies site-wide automatically. */
body {
  background: rgb(85,123,184); /* same blue as the header strip + footer */
}

.sc-card {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  /* Phones ignore the desktop width entirely and use the full
     viewport -- unchanged behavior from before this file existed. */
  .sc-card { margin-left: 0; max-width: 100%; }
}

/* Carousel dot: same blue as the page background/header/footer,
   instead of the component library's default accent green. */
.sc-gallery__dot.is-active {
  background: rgb(85,123,184);
  border-color: rgb(85,123,184);
}

/* Sponsor tier scroller dots (Gala page): same site blue as the
   gallery dots, header/footer bands, and page background -- instead
   of the component library's default accent green. */
.sc-scroller__dot.is-active {
  background: rgb(85,123,184);
}

/* Variant: show the WHOLE image, letterboxed on white, instead of
   filling/cropping the frame. The default carousel crops to fill,
   which is right for real photos (Home) but wrong for a designed
   banner graphic with text/logos near the edges (Gala) -- cropping
   cuts the design instead of showing all of it. Opt-in via this
   class so Home's photo carousel is unaffected. */
.sc-gallery--contain .sc-gallery__frame { background: #fff; }
.sc-gallery--contain .sc-gallery__slide { object-fit: contain; }

/* True full-bleed: stretches to the actual edges of the browser
   window, not just the edges of the white content card. Use for a
   banner that should cover the blue side margins entirely, rather
   than the default .sc-bleed (which only escapes the card's own
   padding and still stops at the card's edge). */
.sc-bleed-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Event tiles, rebuilt from the original AWC site's markup (2026-09-13).
   The shared sc-event component didn't match their original design
   closely enough (different image/content ratio, no capped image
   height, different title treatment) so these tiles use the club's own
   original classes instead, same pattern as the footer above. */
.awc-event-list { max-width: 1100px; margin: 0 auto; }
.awc-event-item { margin-bottom: 36px; }
.awc-event-title { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif;
                    font-size: 30px; line-height: 1.2; color: #173b6c; }
.awc-event-card { display: grid; grid-template-columns: 40% 60%;
                   background: #fff; border: 1px solid #e3e8ef; border-radius: 14px;
                   overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,.08);
                   transition: transform .2s ease, box-shadow .2s ease; }
.awc-event-card:hover { transform: translateY(-3px); box-shadow: 0 9px 24px rgba(0,0,0,.12); }
.awc-event-image-wrapper { width: 100%; height: 100%; display: flex; align-items: center;
                             justify-content: center; padding: 18px; background: #f7f7f7;
                             box-sizing: border-box; }
.awc-event-image { display: block; width: auto; height: auto; max-width: 100%;
                     max-height: 320px; object-fit: contain; }
.awc-event-content { padding: 28px 32px; display: flex; flex-direction: column;
                       justify-content: center; text-align: left; }
.awc-event-details { margin: 0 0 18px; padding: 0; }
.awc-event-detail { margin: 0 0 7px; padding: 0; font-size: 16px; line-height: 1.5;
                      color: #444; text-align: left; }
.awc-event-detail strong { color: #173b6c; font-weight: 600; }
.awc-event-description { margin: 0 0 22px; padding: 0; color: #444; font-size: 16px;
                            line-height: 1.65; text-align: left; }
.awc-rsvp-button { display: inline-block; align-self: flex-start; background: #173b6c;
                     color: #fff !important; padding: 12px 26px; border-radius: 7px;
                     text-decoration: none !important; font-size: 15px; font-weight: 600;
                     transition: background .2s ease, transform .2s ease; }
.awc-rsvp-button:hover { background: #b7332c; transform: translateY(-1px); }
@media (max-width: 750px) {
  .awc-event-item { margin-bottom: 32px; }
  .awc-event-title { margin: 0 0 10px; font-size: 25px; }
  .awc-event-card { grid-template-columns: 1fr; }
  .awc-event-image-wrapper { padding: 14px; min-height: 0; }
  .awc-event-image { max-height: 220px; }
  .awc-event-content { padding: 22px; }
  .awc-event-detail, .awc-event-description { font-size: 15px; }
}

/* Footer, rebuilt from the original AWC site's markup (2026-09-13).
   Blue band, centred desktop text links / mobile icon row, logo in
   the middle, quick links on the right, legal block underneath. */
.awc-footer { background: rgb(85,123,184); color: #ffffff !important; padding: 20px 24px 16px;
              font-size: 14px; position: relative; z-index: 5; touch-action: manipulation; }
.awc-footer a { color: #ffffff; text-decoration: none; position: relative; z-index: 10; }
.awc-footer a:hover { text-decoration: underline; }
.awc-footer-top { display: flex; justify-content: space-between; align-items: flex-start;
                   gap: 0px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.awc-footer-column { flex: 1 1 0; min-width: 180px; }
.awc-footer-logo img { max-width: 105px; height: auto; display: block; margin: 0 auto; }
.footer-center-text { text-align: center; }
.awc-footer-bottom { max-width: 1100px; margin: 16px auto 0; font-size: 13px;
                      line-height: 1.4; text-align: center; }
.desktop-only { display: block; }
.mobile-only { display: none; }
@media (max-width: 650px) {
  /* Icons, JOIN/RENEW, EVENTS stacked vertically ABOVE the logo, each
     equidistant from the next (2026-09-13, corrected per user: an
     earlier pass put these three on one horizontal row, which was wrong
     -- they want them stacked, just with EQUAL gaps between each one,
     ending with the logo underneath). display:contents on the two
     wrapper divs removes their own box so their visible children (the
     icon pair, and the two link paragraphs) become direct flex items of
     .awc-footer-top's column -- that lets the single `gap` value on the
     container space every item equally, instead of the icon-block/
     links-block gap (16px, from the old two-block layout) differing
     from the JOIN/RENEW-to-EVENTS gap (whatever paragraph margin gave).
     Desktop is untouched -- this whole block only applies under 650px. */
  .awc-footer-top { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .awc-footer-contact, .awc-footer-links { display: contents; }
  .awc-footer-logo { order: 3; }
  .awc-footer-logo img { margin: 0 auto; }
  .awc-footer-links p { margin: 0; order: 2; }
  .desktop-only { display: none; }
  .mobile-only { display: flex; justify-content: center; gap: 12px; align-items: center;
                   text-align: center; order: 1; }
  .mobile-only a img { width: 24px; height: 24px; display: block; }
}