/**
 * ============================================================
 *  YAOC 青進野外定向會 — User CSS Override
 *  Youth Advance Orienteering Club, Hong Kong (Est. 1990)
 *  Joomla 6 · Cassiopeia Template · user.css
 *  Design: 2026 Modern Sports Club Theme
 *  Primary: Orange #E65100 family | Accent: Teal #006064
 * ============================================================
 */

/* ============================================================
   1. DESIGN TOKENS & CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Primary Orange Palette */
  --yaoc-orange-deep:    #BF360C;   /* headings, strong accent */
  --yaoc-orange-primary: #E65100;   /* primary brand color */
  --yaoc-orange-mid:     #F4511E;   /* hover states */
  --yaoc-orange-bright:  #FF6D00;   /* highlights, badges */
  --yaoc-orange-light:   #FF8A50;   /* lighter accents */
  --yaoc-orange-pale:    #FFCCBC;   /* tinted backgrounds */
  --yaoc-orange-tint:    #FFF3E0;   /* very light tint */

  /* Secondary / Complementary */
  --yaoc-teal:           #006064;   /* teal contrast */
  --yaoc-teal-light:     #00838F;   /* lighter teal */
  --yaoc-green-trail:    #2E7D32;   /* forest green, trail colors */
  --yaoc-amber:          #F57F17;   /* amber for labels */
  --yaoc-red:            #B71C1C;   /* danger, red map markers */
  --yaoc-purple:         #6A1B9A;   /* purple nav item */

  /* Neutrals */
  --yaoc-dark:           #1A1208;   /* near-black, warm */
  --yaoc-charcoal:       #2D2416;   /* dark text */
  --yaoc-stone:          #5D4037;   /* medium warm brown */
  --yaoc-warm-gray:      #78716C;   /* muted text */
  --yaoc-border:         #E0D5CB;   /* card borders */
  --yaoc-cream:          #FFF8F0;   /* page background */
  --yaoc-white:          #FFFFFF;

  /* Surfaces */
  --yaoc-card-bg:        #FFFFFF;
  --yaoc-page-bg:        #FFF8F0;
  --yaoc-header-start:   #BF360C;
  --yaoc-header-end:     #E65100;

  /* Typography */
  --font-display:        'Montserrat', 'Noto Sans TC', sans-serif;
  --font-body:           'Noto Sans TC', 'Montserrat', sans-serif;
  --font-mono:           'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           16px;

  /* Shadows */
  --shadow-card:         0 2px 12px rgba(230, 81, 0, 0.08), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-card-hover:   0 8px 32px rgba(230, 81, 0, 0.18), 0 2px 8px rgba(0,0,0,0.1);
  --shadow-header:       0 4px 24px rgba(0,0,0,0.3);

  /* Transitions */
  --transition-fast:     0.18s ease;
  --transition-mid:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:     0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');


/* ============================================================
   3. GLOBAL BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--yaoc-page-bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--yaoc-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--yaoc-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--yaoc-orange-light);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--yaoc-orange-primary);
}


/* ============================================================
   4. TYPOGRAPHY — HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.page-header h1,
.page-header h2,
.com-content-article h1,
.com-content-article h2,
.com-content-article h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--yaoc-orange-deep);
  letter-spacing: -0.02em;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
}

h1, .page-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--yaoc-orange-deep);
}

h2 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--yaoc-orange-primary);
  position: relative;
  padding-bottom: 0.4em;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, var(--yaoc-orange-primary), transparent);
  border-radius: 2px;
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--yaoc-orange-deep);
}

h4, h5, h6 {
  color: var(--yaoc-charcoal);
}

p {
  margin-bottom: 1em;
  max-width: 75ch;
}

a {
  color: var(--yaoc-orange-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--yaoc-orange-deep);
  text-decoration: underline;
}

strong, b {
  font-weight: 700;
  color: var(--yaoc-charcoal);
}

/* List decorators — compass style */
ul li::marker {
  color: var(--yaoc-orange-primary);
  content: '◎  ';
  font-size: 0.75em;
}

ul {
  padding-left: 1.8em;
}

ol {
  padding-left: 1.8em;
}

ol li::marker {
  color: var(--yaoc-orange-primary);
  font-weight: 700;
  font-family: var(--font-display);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: #FBF0E8;
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  color: var(--yaoc-orange-deep);
}

pre {
  padding: 1rem;
  overflow-x: auto;
  border-left: 3px solid var(--yaoc-orange-primary);
}


/* ============================================================
   5. TOPOGRAPHIC PATTERN — SVG DATA URI
   ============================================================ (reusable mixin via CSS var)
   The SVG renders overlapping contour ellipses at low opacity,
   simulating an orienteering topographic map background.
   ============================================================ */

/*
  TOPO PATTERN:
  - Cream/white stroked ellipses at varying radii
  - Irregular, organic feel (slight rotation per layer)
  - Used in header, module headers, and section dividers
*/


/* ============================================================
   6. HEADER — .container-header
   ============================================================ */
.container-header,
#sp-header,
.header {
  background:
    /* Topographic contour pattern - SVG data URI */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'%3E%3Cdefs%3E%3Cstyle%3Epath%7Bfill:none;stroke:%23fff;stroke-width:1%7D%3C/style%3E%3C/defs%3E%3C!-- Contour layer 1 --%3E%3Cellipse cx='80' cy='100' rx='75' ry='45' opacity='0.07'/%3E%3Cellipse cx='80' cy='100' rx='95' ry='58' opacity='0.055'/%3E%3Cellipse cx='80' cy='100' rx='115' ry='70' opacity='0.04'/%3E%3Cellipse cx='80' cy='100' rx='135' ry='82' opacity='0.03'/%3E%3C!-- Contour layer 2 --%3E%3Cellipse cx='300' cy='80' rx='90' ry='55' opacity='0.065' transform='rotate(-8 300 80)'/%3E%3Cellipse cx='300' cy='80' rx='115' ry='70' opacity='0.05' transform='rotate(-8 300 80)'/%3E%3Cellipse cx='300' cy='80' rx='140' ry='86' opacity='0.035' transform='rotate(-8 300 80)'/%3E%3Cellipse cx='300' cy='80' rx='165' ry='100' opacity='0.025' transform='rotate(-8 300 80)'/%3E%3C!-- Contour layer 3 --%3E%3Cellipse cx='520' cy='115' rx='80' ry='52' opacity='0.07' transform='rotate(5 520 115)'/%3E%3Cellipse cx='520' cy='115' rx='100' ry='65' opacity='0.055' transform='rotate(5 520 115)'/%3E%3Cellipse cx='520' cy='115' rx='120' ry='78' opacity='0.04' transform='rotate(5 520 115)'/%3E%3Cellipse cx='520' cy='115' rx='140' ry='92' opacity='0.03' transform='rotate(5 520 115)'/%3E%3C!-- Index contour (thicker, every 5th line) --%3E%3Cellipse cx='80' cy='100' rx='65' ry='38' opacity='0.12' style='stroke-width:1.8'/%3E%3Cellipse cx='300' cy='80' rx='75' ry='46' opacity='0.1' style='stroke-width:1.8' transform='rotate(-8 300 80)'/%3E%3Cellipse cx='520' cy='115' rx='68' ry='42' opacity='0.12' style='stroke-width:1.8' transform='rotate(5 520 115)'/%3E%3C!-- Form lines (cross-connections) --%3E%3Cpath d='M 155 100 Q 200 70 300 80 Q 400 90 440 115' opacity='0.04' style='stroke-width:0.8'/%3E%3Cpath d='M 175 100 Q 220 62 300 72 Q 380 82 420 108' opacity='0.035' style='stroke-width:0.8'/%3E%3Cpath d='M 135 100 Q 200 82 300 90 Q 400 98 460 120' opacity='0.04' style='stroke-width:0.8'/%3E%3C/svg%3E") center/cover no-repeat,
    /* Main gradient */
    linear-gradient(135deg,
      var(--yaoc-header-start) 0%,
      var(--yaoc-orange-primary) 45%,
      var(--yaoc-orange-bright) 100%
    );
  color: white;
  padding: 0;
  box-shadow: var(--shadow-header);
  position: relative;
  overflow: hidden;
}

/* Diagonal accent stripe — dynamic athletic feel */
.container-header::before,
#sp-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: -80px;
  width: 300px;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
  transform: skewX(-12deg);
  pointer-events: none;
}

.container-header::after,
#sp-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--yaoc-teal) 0%,
    var(--yaoc-teal-light) 30%,
    var(--yaoc-orange-bright) 60%,
    var(--yaoc-orange-deep) 100%
  );
}

/* Site name / logo area */
.site-name,
.site-name a,
#sp-header .site-name,
.container-header .site-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: white !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: -0.01em;
  text-decoration: none !important;
  padding: 1rem 1.5rem;
  display: inline-block;
}

/* Override default site title — inject club full name */
.site-name a span {
  font-size: 0;
  display: block;
}

.site-name a::after {
  content: 'YAOC 青進野外定向會';
  font-size: 1.4rem;
  font-family: var(--font-display);
  font-weight: 900;
  color: white;
  letter-spacing: 0.02em;
  display: block;
}

/* Logo image styling */
.site-logo img,
.container-header img[src*="yaoclogo"] {
  height: 72px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: transform var(--transition-mid), filter var(--transition-mid);
}

.site-logo img:hover,
.container-header img[src*="yaoclogo"]:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

/* Header inner layout */
.container-header .grid-child,
#sp-header .grid-child {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Banner area */
.container-banner,
.container-top-a,
#sp-top-a,
#sp-banner {
  background: linear-gradient(135deg, var(--yaoc-orange-deep) 0%, var(--yaoc-orange-primary) 60%, var(--yaoc-orange-bright) 100%);
  padding: 0.5rem 1.5rem;
}


/* ============================================================
   7. NAVIGATION — .container-nav
   ============================================================ */
.container-nav,
#sp-menu,
nav.navbar {
  background: linear-gradient(180deg, #1A1208 0%, #2D2416 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--yaoc-orange-primary);
}

/* Main menu container */
.mod-menu,
.mod-menu ul,
#sp-menu ul,
.container-nav ul,
nav.navbar ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ---- Base nav items ---- */
.mod-menu li,
.container-nav li,
nav.navbar li {
  position: relative;
}

.mod-menu a,
.container-nav a,
nav.navbar a {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: rgba(255,255,255,0.88) !important;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.container-nav .mod-menu a:hover,
.container-nav a:hover,
nav.navbar a:hover,
.container-nav .mod-menu .current > a,
.container-nav .mod-menu .active > a {
  color: white !important;
  background: rgba(255,255,255,0.08);
}

/* ---- COLORFUL MENU ITEMS — orienteering map legend style ---- */

/* First item: Home — Orange */
.container-nav .mod-menu li:nth-child(1) > a {
  border-bottom-color: var(--yaoc-orange-bright);
  color: #FFA04A !important;
}
.container-nav .mod-menu li:nth-child(1) > a:hover,
.container-nav .mod-menu li:nth-child(1).current > a {
  background: rgba(255, 109, 0, 0.15);
  color: var(--yaoc-orange-bright) !important;
  border-bottom-color: var(--yaoc-orange-bright);
}

/* Second item: Teal */
.container-nav .mod-menu li:nth-child(2) > a {
  border-bottom-color: var(--yaoc-teal-light);
  color: #4DD0E1 !important;
}
.container-nav .mod-menu li:nth-child(2) > a:hover,
.container-nav .mod-menu li:nth-child(2).current > a {
  background: rgba(0, 96, 100, 0.2);
  color: #80DEEA !important;
  border-bottom-color: var(--yaoc-teal-light);
}

/* Third item: Red */
.container-nav .mod-menu li:nth-child(3) > a {
  border-bottom-color: #EF5350;
  color: #EF9A9A !important;
}
.container-nav .mod-menu li:nth-child(3) > a:hover,
.container-nav .mod-menu li:nth-child(3).current > a {
  background: rgba(183, 28, 28, 0.2);
  color: #FFCDD2 !important;
  border-bottom-color: #EF5350;
}

/* Fourth item: Purple */
.container-nav .mod-menu li:nth-child(4) > a {
  border-bottom-color: #CE93D8;
  color: #CE93D8 !important;
}
.container-nav .mod-menu li:nth-child(4) > a:hover,
.container-nav .mod-menu li:nth-child(4).current > a {
  background: rgba(106, 27, 154, 0.2);
  color: #E1BEE7 !important;
  border-bottom-color: #CE93D8;
}

/* Fifth item: Amber */
.container-nav .mod-menu li:nth-child(5) > a {
  border-bottom-color: #FFD54F;
  color: #FFD54F !important;
}
.container-nav .mod-menu li:nth-child(5) > a:hover,
.container-nav .mod-menu li:nth-child(5).current > a {
  background: rgba(245, 127, 23, 0.2);
  color: #FFE082 !important;
  border-bottom-color: #FFD54F;
}

/* Sixth item: Green (trail) */
.container-nav .mod-menu li:nth-child(6) > a {
  border-bottom-color: #81C784;
  color: #A5D6A7 !important;
}
.container-nav .mod-menu li:nth-child(6) > a:hover,
.container-nav .mod-menu li:nth-child(6).current > a {
  background: rgba(46, 125, 50, 0.2);
  color: #C8E6C9 !important;
  border-bottom-color: #81C784;
}

/* Seventh item: Blue */
.container-nav .mod-menu li:nth-child(7) > a {
  border-bottom-color: #64B5F6;
  color: #90CAF9 !important;
}
.container-nav .mod-menu li:nth-child(7) > a:hover,
.container-nav .mod-menu li:nth-child(7).current > a {
  background: rgba(0, 100, 148, 0.2);
  color: #BBDEFB !important;
  border-bottom-color: #64B5F6;
}

/* Eighth item onwards: warm gray */
.container-nav .mod-menu li:nth-child(n+8) > a {
  border-bottom-color: #BCAAA4;
  color: #BCAAA4 !important;
}
.container-nav .mod-menu li:nth-child(n+8) > a:hover,
.container-nav .mod-menu li:nth-child(n+8).current > a {
  background: rgba(255,255,255,0.08);
  color: #D7CCC8 !important;
  border-bottom-color: #BCAAA4;
}

/* Dropdown menu */
.mod-menu .nav-child,
.mod-menu ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #1A1208;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--yaoc-orange-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: none;
  z-index: 100;
  animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mod-menu li:hover > .nav-child,
.mod-menu li:hover > ul ul {
  display: block;
}

.mod-menu .nav-child li,
.mod-menu ul ul li {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mod-menu .nav-child a,
.mod-menu ul ul a {
  padding: 0.65rem 1.2rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8) !important;
  border-bottom: none !important;
  letter-spacing: 0.04em;
}

.mod-menu .nav-child a:hover,
.mod-menu ul ul a:hover {
  background: rgba(230, 81, 0, 0.2) !important;
  color: var(--yaoc-orange-light) !important;
  padding-left: 1.5rem;
}


/* ============================================================
   8. BREADCRUMB — .container-breadcrumb
   ============================================================ */
.container-breadcrumb,
#sp-breadcrumb {
  background: linear-gradient(90deg, #F5E6D8 0%, var(--yaoc-cream) 100%);
  border-bottom: 1px solid var(--yaoc-border);
  padding: 0.5rem 0;
}

.breadcrumb {
  background: transparent;
  padding: 0.5rem 1rem;
  margin: 0;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb-item a {
  color: var(--yaoc-orange-primary);
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.breadcrumb-item.active {
  color: var(--yaoc-stone);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--yaoc-orange-light);
  font-size: 1rem;
  line-height: 1;
}


/* ============================================================
   9. MAIN CONTENT AREA — .container-component
   ============================================================ */
.container-component,
#sp-component,
main {
  background: var(--yaoc-page-bg);
  min-height: 60vh;
  padding: 1.5rem 0;
}

/* Page header */
.page-header {
  background: linear-gradient(135deg, var(--yaoc-orange-tint) 0%, var(--yaoc-cream) 100%);
  border-bottom: 2px solid var(--yaoc-orange-pale);
  border-left: 5px solid var(--yaoc-orange-primary);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
  overflow: hidden;
}

/* Compass decoration in page header */
.page-header::before {
  content: '';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='none' stroke='%23E65100' stroke-width='1.5' opacity='0.12'/%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='%23E65100' stroke-width='1' opacity='0.1'/%3E%3Ccircle cx='32' cy='32' r='18' fill='none' stroke='%23E65100' stroke-width='1' opacity='0.09'/%3E%3Ccircle cx='32' cy='32' r='12' fill='none' stroke='%23E65100' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='32' cy='32' r='6' fill='none' stroke='%23E65100' stroke-width='1' opacity='0.12'/%3E%3Cline x1='32' y1='4' x2='32' y2='60' stroke='%23E65100' stroke-width='0.8' opacity='0.08'/%3E%3Cline x1='4' y1='32' x2='60' y2='32' stroke='%23E65100' stroke-width='0.8' opacity='0.08'/%3E%3Cline x1='12.7' y1='12.7' x2='51.3' y2='51.3' stroke='%23E65100' stroke-width='0.6' opacity='0.06'/%3E%3Cline x1='51.3' y1='12.7' x2='12.7' y2='51.3' stroke='%23E65100' stroke-width='0.6' opacity='0.06'/%3E%3Cpolygon points='32,10 35,30 32,28 29,30' fill='%23BF360C' opacity='0.25'/%3E%3Cpolygon points='32,54 29,34 32,36 35,34' fill='%23006064' opacity='0.2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

.page-header h1,
.page-header .page-title {
  margin: 0;
  color: var(--yaoc-orange-deep);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
}

.page-header h1::after {
  display: none; /* Remove the h2 underline from h1 in page header */
}


/* ============================================================
   10. ARTICLE DISPLAY — .com-content-article
   ============================================================ */

/* Article card */
.com-content-article,
.blog-item,
.article-block {
  background: var(--yaoc-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--yaoc-orange-primary);
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
  transition: box-shadow var(--transition-mid), transform var(--transition-mid);
  animation: fadeInUp 0.45s ease both;
  position: relative;
  overflow: hidden;
}

.com-content-article:hover,
.blog-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Subtle warm corner accent */
.com-content-article::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(230,81,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for list views */
.blog-item:nth-child(1)  { animation-delay: 0.05s; }
.blog-item:nth-child(2)  { animation-delay: 0.10s; }
.blog-item:nth-child(3)  { animation-delay: 0.15s; }
.blog-item:nth-child(4)  { animation-delay: 0.20s; }
.blog-item:nth-child(5)  { animation-delay: 0.25s; }
.blog-item:nth-child(6)  { animation-delay: 0.30s; }

/* Article metadata */
.article-info,
.com-content-article .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: var(--yaoc-warm-gray);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

.article-info dd,
.article-info .published,
.article-info .modified,
.article-info .hits {
  background: var(--yaoc-orange-tint);
  border: 1px solid var(--yaoc-orange-pale);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  color: var(--yaoc-stone);
  font-size: 0.76rem;
  font-weight: 500;
}

/* Article title */
.com-content-article h1.contentTitle,
.com-content-article .page-header h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--yaoc-orange-deep);
  margin-top: 0;
  font-weight: 800;
  border-bottom: 2px solid var(--yaoc-orange-pale);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* Article images */
.com-content-article img,
.blog-item img,
article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  margin: 0.5rem 0 1rem;
}

/* Image captions */
.com-content-article figcaption,
.image-caption {
  font-size: 0.82rem;
  color: var(--yaoc-warm-gray);
  text-align: center;
  font-style: italic;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

/* Read more link */
.readmore a,
.com-content-article .readmore a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--yaoc-orange-primary);
  color: white !important;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
  text-decoration: none !important;
  border: 2px solid var(--yaoc-orange-primary);
}

.readmore a:hover {
  background: var(--yaoc-orange-deep) !important;
  border-color: var(--yaoc-orange-deep) !important;
  transform: translateX(2px);
}

/* Article tags */
.tags .badge,
.com-content-article .tags a {
  background: var(--yaoc-orange-tint);
  color: var(--yaoc-orange-deep);
  border: 1px solid var(--yaoc-orange-pale);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.tags .badge:hover,
.com-content-article .tags a:hover {
  background: var(--yaoc-orange-primary);
  color: white;
}


/* ============================================================
   11. CATEGORY BLOG — .com-content-category .blog
   ============================================================ */
.com-content-category .page-header {
  margin-bottom: 2rem;
}

/* Blog intro / leading items */
.com-content-category .blog .items-leading .item,
.blog-leading {
  animation: fadeInUp 0.5s ease both;
}

/* Blog item separator */
.separator {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--yaoc-orange-pale), transparent);
  margin: 2rem 0;
}

/* Category list: alternating warm strips */
.category-list tr:nth-child(odd) td,
.com-content-category .items-rows .item:nth-child(odd) {
  background: var(--yaoc-orange-tint);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.pagination .page-item .page-link,
.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sm);
  background: white;
  border: 1.5px solid var(--yaoc-border);
  color: var(--yaoc-orange-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.pagination .page-item.active .page-link,
.pagination li.active a,
.pagination li a:hover {
  background: var(--yaoc-orange-primary);
  border-color: var(--yaoc-orange-primary);
  color: white;
}


/* ============================================================
   12. SIDEBAR — .container-sidebar-right
   ============================================================ */
.container-sidebar-right,
#sp-right,
.sidebar {
  padding: 0 0 1.5rem;
}

/* Module containers in sidebar */
.container-sidebar-right .moduletable,
.sidebar .moduletable,
.module-inner {
  background: var(--yaoc-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.5rem;
  overflow: hidden;
  animation: fadeInUp 0.5s 0.1s ease both;
  border: 1px solid var(--yaoc-border);
}

/* Sidebar module headers — orange gradient */
.container-sidebar-right .module-title,
.container-sidebar-right h3.module-title,
.sidebar .module-title,
.sidebar h3.module-title,
.moduletable > h3,
.moduletable > h4 {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='50' viewBox='0 0 300 50'%3E%3Cellipse cx='50' cy='25' rx='45' ry='28' fill='none' stroke='%23fff' stroke-width='1' opacity='0.07'/%3E%3Cellipse cx='50' cy='25' rx='60' ry='38' fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.05'/%3E%3Cellipse cx='200' cy='25' rx='55' ry='32' fill='none' stroke='%23fff' stroke-width='1' opacity='0.06'/%3E%3Cellipse cx='200' cy='25' rx='72' ry='44' fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E") center/cover no-repeat,
    linear-gradient(135deg, var(--yaoc-orange-deep) 0%, var(--yaoc-orange-primary) 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1.1rem;
  margin: 0;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

/* Sidebar module content */
.container-sidebar-right .module-content,
.sidebar .module-content {
  padding: 1rem 1.1rem;
}

/* Sidebar menu items */
.container-sidebar-right .mod-menu a,
.sidebar .mod-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--yaoc-charcoal) !important;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--yaoc-border);
  text-decoration: none !important;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.container-sidebar-right .mod-menu a::before,
.sidebar .mod-menu a::before {
  content: '◎';
  color: var(--yaoc-orange-light);
  font-size: 0.7em;
  flex-shrink: 0;
}

.container-sidebar-right .mod-menu a:hover,
.sidebar .mod-menu a:hover {
  background: var(--yaoc-orange-tint);
  color: var(--yaoc-orange-deep) !important;
  padding-left: 1rem;
  border-bottom-color: var(--yaoc-orange-pale);
}

.container-sidebar-right .mod-menu li:last-child a,
.sidebar .mod-menu li:last-child a {
  border-bottom: none;
}

.container-sidebar-right .mod-menu ul,
.sidebar .mod-menu ul {
  display: block;
  flex-direction: column;
}

.container-sidebar-right .mod-menu li,
.sidebar .mod-menu li {
  display: block;
}


/* ============================================================
   13. LOGIN MODULE — .mod-login
   ============================================================ */
.mod-login {
  /* inherits module container styles */
}

.mod-login form {
  padding: 0;
}

.mod-login .control-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yaoc-stone);
  margin-bottom: 0.25rem;
  display: block;
}

.mod-login input[type="text"],
.mod-login input[type="password"],
.mod-login input[type="email"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--yaoc-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--yaoc-charcoal);
  background: white;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: 0.75rem;
}

.mod-login input[type="text"]:focus,
.mod-login input[type="password"]:focus,
.mod-login input[type="email"]:focus {
  outline: none;
  border-color: var(--yaoc-orange-primary);
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.12);
}

.mod-login .btn,
.mod-login button[type="submit"] {
  width: 100%;
  background: linear-gradient(135deg, var(--yaoc-orange-primary), var(--yaoc-orange-deep));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mod-login .btn:hover,
.mod-login button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--yaoc-orange-deep), #8D1F04);
  box-shadow: 0 4px 12px rgba(230, 81, 0, 0.35);
  transform: translateY(-1px);
}

.mod-login .checkbox label,
.mod-login small a {
  font-size: 0.78rem;
  color: var(--yaoc-warm-gray);
}

.mod-login small a:hover {
  color: var(--yaoc-orange-primary);
}


/* ============================================================
   14. BUTTONS — .btn-primary, general buttons
   ============================================================ */
.btn-primary,
.btn.btn-primary,
input[type="submit"],
button[type="submit"] {
  background: linear-gradient(135deg, var(--yaoc-orange-primary) 0%, var(--yaoc-orange-deep) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(230, 81, 0, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--yaoc-orange-deep) 0%, #8D1F04 100%);
  box-shadow: 0 6px 20px rgba(230, 81, 0, 0.4);
  transform: translateY(-2px);
  color: white !important;
}

.btn-primary:active,
.btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(230, 81, 0, 0.3);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--yaoc-orange-primary);
  color: var(--yaoc-orange-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-secondary:hover {
  background: var(--yaoc-orange-primary);
  color: white !important;
}

/* Search button */
.search-query + .btn,
.btn-search {
  background: var(--yaoc-orange-primary);
  color: white;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-query + .btn:hover,
.btn-search:hover {
  background: var(--yaoc-orange-deep);
}

/* Search input */
.search-query,
input[type="search"],
input.inputbox[type="text"] {
  border: 1.5px solid var(--yaoc-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--yaoc-charcoal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-query:focus,
input[type="search"]:focus,
input.inputbox[type="text"]:focus {
  outline: none;
  border-color: var(--yaoc-orange-primary);
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.1);
}


/* ============================================================
   15. TABLES
   ============================================================ */
table,
.com-content-article table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 1.5rem 0;
  font-size: 0.88rem;
}

table thead,
.com-content-article table thead {
  background: linear-gradient(135deg, var(--yaoc-orange-deep) 0%, var(--yaoc-orange-primary) 100%);
  color: white;
}

table thead th,
.com-content-article table thead th {
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  border: none;
}

table tbody tr:nth-child(odd),
.com-content-article table tbody tr:nth-child(odd) {
  background: var(--yaoc-cream);
}

table tbody tr:nth-child(even),
.com-content-article table tbody tr:nth-child(even) {
  background: #FFF3E8;
}

table tbody tr:hover,
.com-content-article table tbody tr:hover {
  background: var(--yaoc-orange-tint);
}

table tbody td,
.com-content-article table tbody td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--yaoc-border);
  color: var(--yaoc-charcoal);
  line-height: 1.5;
  vertical-align: middle;
}

table tbody tr:last-child td {
  border-bottom: none;
}

/* Result table (competition results) */
table.result-table thead th:first-child {
  background: rgba(0,0,0,0.15);
  width: 2.5rem;
  text-align: center;
}


/* ============================================================
   16. FOOTER — .container-footer
   ============================================================ */
.container-footer,
#sp-footer,
footer {
  background: linear-gradient(180deg, #1A1208 0%, #0D0904 100%);
  color: rgba(255,255,255,0.72);
  padding: 2rem 0 1rem;
  position: relative;
  overflow: hidden;
}

/* Top accent stripe */
.container-footer::before,
#sp-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--yaoc-teal) 0%,
    var(--yaoc-orange-primary) 40%,
    var(--yaoc-orange-bright) 60%,
    var(--yaoc-amber) 100%
  );
}

/* Topo pattern overlay in footer */
.container-footer::after,
#sp-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cellipse cx='100' cy='150' rx='90' ry='55' fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.03'/%3E%3Cellipse cx='100' cy='150' rx='120' ry='75' fill='none' stroke='%23fff' stroke-width='0.7' opacity='0.025'/%3E%3Cellipse cx='300' cy='120' rx='80' ry='50' fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.03'/%3E%3Cellipse cx='300' cy='120' rx='110' ry='70' fill='none' stroke='%23fff' stroke-width='0.7' opacity='0.02'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
}

.container-footer .grid-child,
.container-footer .container {
  position: relative;
  z-index: 1;
}

.container-footer a {
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-fast);
}

.container-footer a:hover {
  color: var(--yaoc-orange-light);
  text-decoration: none;
}

.container-footer .module-title,
.container-footer h3,
.container-footer h4 {
  color: var(--yaoc-orange-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: none !important;
  padding-left: 0 !important;
}

.container-footer p,
.container-footer li {
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.4rem;
}

/* Copyright bar */
.container-footer .copyright,
.container-footer .footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* Footer bottom — YAOC credit */
.container-footer .footer-bottom::before {
  content: '◎ YAOC 青進野外定向會 · ';
  color: var(--yaoc-orange-light);
  opacity: 0.6;
  font-size: 0.75rem;
}


/* ============================================================
   17. SPECIAL SECTIONS
   ============================================================ */

/* ---- 17a. Announcement Bar ---- */
.yaoc-announcement {
  background: linear-gradient(135deg, var(--yaoc-orange-primary) 0%, var(--yaoc-orange-deep) 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(230, 81, 0, 0.3);
  animation: fadeInUp 0.4s ease both;
  position: relative;
  overflow: hidden;
}

.yaoc-announcement::before {
  content: '◎';
  font-size: 1.4rem;
  opacity: 0.8;
  flex-shrink: 0;
  line-height: 1.4;
}

.yaoc-announcement::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 100px;
  height: 100px;
  border: 12px solid rgba(255,255,255,0.06);
  border-radius: 50%;
}

.yaoc-announcement p,
.yaoc-announcement div {
  color: rgba(255,255,255,0.95);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  max-width: 100%;
}

.yaoc-announcement strong {
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
}

.yaoc-announcement a {
  color: #FFE0B2;
  font-weight: 600;
  text-decoration: underline;
}

/* ---- 17b. Photo Gallery ---- */
.yaoc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
  padding: 1rem 0;
  margin: 1.5rem 0;
}

.yaoc-gallery-item {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all var(--transition-mid);
  cursor: pointer;
  animation: fadeInUp 0.45s ease both;
  border: 1px solid var(--yaoc-border);
  position: relative;
}

.yaoc-gallery-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px) scale(1.01);
}

.yaoc-gallery-item:nth-child(2) { animation-delay: 0.05s; }
.yaoc-gallery-item:nth-child(3) { animation-delay: 0.10s; }
.yaoc-gallery-item:nth-child(4) { animation-delay: 0.15s; }
.yaoc-gallery-item:nth-child(5) { animation-delay: 0.20s; }
.yaoc-gallery-item:nth-child(6) { animation-delay: 0.25s; }

.yaoc-gallery-item .gallery-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--yaoc-orange-tint);
}

.yaoc-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
  display: block;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.yaoc-gallery-item:hover img {
  transform: scale(1.07);
}

/* Orange hover overlay — lightbox hint */
.yaoc-gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(191, 54, 12, 0.75) 0%,
    rgba(230, 81, 0, 0.65) 100%
  );
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-mid);
  font-size: 2rem;
  color: white;
}

.yaoc-gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Expand icon in overlay */
.yaoc-gallery-item .gallery-overlay::after {
  content: '◎';
  font-size: 2.5rem;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: -0.05em;
  animation: none;
}

.yaoc-gallery-item:hover .gallery-overlay::after {
  animation: pulseScale 0.6s ease;
}

@keyframes pulseScale {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Caption below image */
.yaoc-gallery-item .gallery-caption {
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--yaoc-stone);
  line-height: 1.4;
  font-family: var(--font-body);
  border-top: 1px solid var(--yaoc-border);
  background: white;
}

.yaoc-gallery-item .gallery-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--yaoc-charcoal);
  margin-bottom: 0.15rem;
}

/* Gallery as a module (when used inside sidebar or content module) */
.yaoc-gallery-module {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.yaoc-gallery-module .yaoc-gallery-item .gallery-thumb {
  aspect-ratio: 1/1;
}

/* ---- 17c. Old Site Screenshot Section ---- */
.yaoc-old-site {
  background: linear-gradient(135deg, #F0F0F0 0%, #E8E8E8 100%);
  border: 2px dashed #BDBDBD;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.yaoc-old-site::before {
  content: '歷史回顧 · ARCHIVE';
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: #757575;
  color: white;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
}

.yaoc-old-site h3 {
  color: #616161;
  font-size: 1rem;
  margin: 2rem 0 0.75rem;
  font-weight: 600;
}

.yaoc-old-site img {
  max-width: 100%;
  border: 1px solid #BDBDBD;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  margin: 0 auto;
  display: block;
  filter: saturate(0.85);
  transition: filter var(--transition-mid), box-shadow var(--transition-mid);
}

.yaoc-old-site img:hover {
  filter: saturate(1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.yaoc-old-site p {
  color: #757575;
  font-size: 0.82rem;
  margin: 0.75rem auto 0;
  max-width: 50ch;
  font-style: italic;
}


/* ============================================================
   18. ORIENTEERING SPECIAL COMPONENTS
   ============================================================ */

/* Map pin / checkpoint marker */
.yaoc-checkpoint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--yaoc-orange-primary);
  color: white;
  padding: 0.3rem 0.8rem 0.3rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(230,81,0,0.3);
}

.yaoc-checkpoint::before {
  content: '◎';
  font-size: 1.1em;
  line-height: 1;
}

/* Course gradient: start (orange) → finish (red) */
.yaoc-course-start { color: var(--yaoc-orange-primary); font-weight: 700; }
.yaoc-course-finish { color: var(--yaoc-red); font-weight: 700; }

/* Compass rose decoration block */
.yaoc-compass-block {
  position: relative;
  padding-left: 4rem;
  margin: 1.5rem 0;
}

.yaoc-compass-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23E65100' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='24' r='16' fill='none' stroke='%23E65100' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='24' cy='24' r='10' fill='none' stroke='%23E65100' stroke-width='0.8' opacity='0.4'/%3E%3Ccircle cx='24' cy='24' r='4' fill='none' stroke='%23E65100' stroke-width='1'/%3E%3Cpolygon points='24,4 27,22 24,20 21,22' fill='%23BF360C'/%3E%3Cpolygon points='24,44 21,26 24,28 27,26' fill='%23006064'/%3E%3Cpolygon points='4,24 22,21 20,24 22,27' fill='%235D4037'/%3E%3Cpolygon points='44,24 26,27 28,24 26,21' fill='%235D4037'/%3E%3Ctext x='24' y='9' text-anchor='middle' fill='%23BF360C' font-family='Montserrat,sans-serif' font-size='5' font-weight='700'%3EN%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
}

/* Event info card */
.yaoc-event-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--yaoc-border);
  border-top: 4px solid var(--yaoc-orange-primary);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  transition: all var(--transition-mid);
  animation: fadeInUp 0.4s ease both;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.yaoc-event-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.yaoc-event-date {
  background: linear-gradient(135deg, var(--yaoc-orange-primary), var(--yaoc-orange-deep));
  color: white;
  text-align: center;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  min-width: 4rem;
  font-family: var(--font-display);
  line-height: 1.2;
}

.yaoc-event-date .day {
  font-size: 1.6rem;
  font-weight: 900;
  display: block;
  line-height: 1;
}

.yaoc-event-date .month {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.yaoc-event-info h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--yaoc-orange-deep);
}

.yaoc-event-info p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--yaoc-warm-gray);
}

/* Result table — orienteering competition results */
.yaoc-results table thead {
  background: linear-gradient(135deg, #1A1208 0%, #2D2416 100%);
}

.yaoc-results table tbody tr td:first-child {
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--yaoc-orange-primary);
  text-align: center;
}

/* Medal positions */
.yaoc-results table tbody tr:nth-child(1) td:first-child { color: #F9A825; font-size: 1rem; }
.yaoc-results table tbody tr:nth-child(2) td:first-child { color: #90A4AE; }
.yaoc-results table tbody tr:nth-child(3) td:first-child { color: #A1887F; }


/* ============================================================
   19. FORMS — General
   ============================================================ */
.control-group,
.form-group {
  margin-bottom: 1rem;
}

label,
.control-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yaoc-stone);
  display: block;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--yaoc-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--yaoc-charcoal);
  background: white;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--yaoc-orange-primary);
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.12);
}

textarea {
  resize: vertical;
  min-height: 120px;
}


/* ============================================================
   20. ALERTS & NOTICES
   ============================================================ */
.alert,
.notice {
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin: 1rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.alert-info {
  background: #E3F2FD;
  border-color: #1565C0;
  color: #0D47A1;
}

.alert-success {
  background: #E8F5E9;
  border-color: #2E7D32;
  color: #1B5E20;
}

.alert-warning {
  background: var(--yaoc-orange-tint);
  border-color: var(--yaoc-orange-primary);
  color: var(--yaoc-orange-deep);
}

.alert-danger,
.alert-error {
  background: #FFEBEE;
  border-color: #B71C1C;
  color: #7F0000;
}


/* ============================================================
   21. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---- Large Desktop (≤1200px) ---- */
@media (max-width: 1200px) {
  .yaoc-gallery {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ---- Tablet landscape / small desktop (≤992px) ---- */
@media (max-width: 992px) {
  body {
    font-size: 15px;
  }

  /* Stack sidebar below content */
  .container-sidebar-right {
    padding-top: 1rem;
  }

  /* Nav becomes scrollable */
  .container-nav,
  #sp-menu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mod-menu {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .mod-menu a {
    padding: 0.75rem 0.9rem;
    font-size: 0.78rem;
  }

  .com-content-article {
    padding: 1.25rem 1.25rem;
  }

  .yaoc-gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }

  .yaoc-event-card {
    grid-template-columns: auto 1fr;
  }
}

/* ---- Tablet portrait (≤768px) ---- */
@media (max-width: 768px) {
  /* Force single-column layout at tablet */
  .container-sidebar-right,
  .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Header */
  .site-name a::after {
    font-size: 1.1rem;
  }

  .site-logo img,
  .container-header img[src*="yaoclogo"] {
    height: 54px;
  }

  /* Navigation: horizontal scroll only */
  .mod-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .mod-menu a {
    font-size: 0.74rem;
    padding: 0.7rem 0.75rem;
    letter-spacing: 0.04em;
  }

  /* Dropdowns: fall through */
  .mod-menu .nav-child,
  .mod-menu ul ul {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: 3px solid var(--yaoc-orange-primary);
    max-height: 50vh;
    overflow-y: auto;
  }

  /* Content */
  .com-content-article {
    padding: 1rem;
    border-radius: var(--radius-md);
  }

  .page-header::before {
    display: none; /* Hide compass in page header on mobile */
  }

  h1, .page-header h1 {
    font-size: 1.5rem;
  }

  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }

  /* Gallery */
  .yaoc-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
  }

  .yaoc-gallery-item .gallery-thumb {
    aspect-ratio: 4/3;
  }

  /* Footer */
  .container-footer {
    text-align: center;
  }

  /* Tables: horizontal scroll */
  table,
  .com-content-article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 0;
    box-shadow: none;
  }

  table thead th,
  table tbody td {
    min-width: 100px;
  }

  /* Announcement bar */
  .yaoc-announcement {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Event cards */
  .yaoc-event-card {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile portrait (≤480px) ---- */
@media (max-width: 480px) {
  .container-header .grid-child,
  #sp-header .grid-child {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  .site-name a::after {
    font-size: 0.95rem;
    letter-spacing: 0;
  }

  .site-logo img,
  .container-header img[src*="yaoclogo"] {
    height: 46px;
  }

  .mod-menu a {
    font-size: 0.7rem;
    padding: 0.65rem 0.65rem;
    letter-spacing: 0.02em;
  }

  .com-content-article {
    border-left-width: 3px;
    padding: 0.85rem 0.85rem;
  }

  .yaoc-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .yaoc-gallery-item .gallery-caption {
    font-size: 0.75rem;
    padding: 0.5rem 0.65rem;
  }

  .page-header {
    padding: 0.85rem 1rem;
    border-left-width: 4px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  h2::after {
    width: 2rem;
  }

  .pagination .page-item .page-link,
  .pagination li a {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.78rem;
  }

  .btn-primary,
  .btn.btn-primary {
    font-size: 0.78rem;
    padding: 0.55rem 1.1rem;
  }
}


/* ============================================================
   22. PRINT STYLES
   ============================================================ */
@media print {
  .container-nav,
  .container-sidebar-right,
  .container-footer,
  .container-banner,
  .container-breadcrumb {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .com-content-article {
    box-shadow: none;
    border: none;
    border-left: 3pt solid #E65100;
    padding: 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  h1, h2, h3, h4 {
    color: #BF360C !important;
    page-break-after: avoid;
  }

  table { page-break-inside: avoid; }

  .yaoc-gallery {
    display: block;
  }

  .yaoc-gallery-item {
    page-break-inside: avoid;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .yaoc-gallery-item img {
    width: 120pt;
    height: auto;
  }
}


/* ============================================================
   23. UTILITY CLASSES
   ============================================================ */

/* Text utilities */
.text-orange   { color: var(--yaoc-orange-primary) !important; }
.text-orange-deep { color: var(--yaoc-orange-deep) !important; }
.text-teal     { color: var(--yaoc-teal) !important; }
.text-muted    { color: var(--yaoc-warm-gray) !important; }
.text-small    { font-size: 0.82rem !important; }

/* Background utilities */
.bg-orange-tint { background: var(--yaoc-orange-tint) !important; }
.bg-cream       { background: var(--yaoc-cream) !important; }

/* Display utilities */
.d-flex        { display: flex; }
.align-center  { align-items: center; }
.gap-sm        { gap: 0.5rem; }
.gap-md        { gap: 1rem; }

/* Badge */
.badge-yaoc {
  background: var(--yaoc-orange-primary);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-yaoc-teal {
  background: var(--yaoc-teal);
}

/* Section divider */
.yaoc-divider {
  height: 2px;
  background: linear-gradient(90deg,
    var(--yaoc-orange-primary) 0%,
    var(--yaoc-orange-pale) 50%,
    transparent 100%
  );
  border: none;
  margin: 2rem 0;
  border-radius: 1px;
}

/* Reduced motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}


/* ============================================================
   24. CASSIOPEIA GRID LAYOUT CORRECTIONS
   ============================================================ */

/* Ensure proper grid flow for Cassiopeia's built-in layout */
.grid-child {
  padding: 0 0.75rem;
}

/* Wrapper padding */
.wrapper-fluid,
.container-fluid {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Sticky header support */
body.sticky-header .container-nav {
  top: 0;
}

/* Cassiopeia module chrome overrides */
.moduletable.custom {
  animation: fadeInUp 0.4s 0.1s ease both;
}

/* Joomla edit icon (admin mode) */
.joomla-editor-button,
.edit-icon {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.joomla-editor-button:hover,
.edit-icon:hover {
  opacity: 1;
}

/* System message overrides */
#system-message-container {
  padding: 0 1rem;
}

.alert-message {
  animation: fadeInUp 0.3s ease;
}

/* ============================================================
   END — YAOC 青進野外定向會 user.css
   Youth Advance Orienteering Club, Hong Kong (Est. 1990)
   2026 Orienteering Theme · Cassiopeia/Joomla 6
   ============================================================ */