/*
Theme Name: Astra Child - Island Style
Theme URI: https://voslot.app/
Description: Island-inspired child theme for Astra, styled after x-islands.com
Author: Voslot
Template: astra
Version: 1.0.2
*/

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

/* ============================================================
   CSS VARIABLES
   Note: --ast-global-color-* override the Astra palette
   ============================================================ */
:root {
  /* Override Astra global palette with ocean blue scheme */
  --ast-global-color-0: #0284C7;   /* links                  */
  --ast-global-color-1: #E0F2FE;   /* light bg               */
  --ast-global-color-2: #0F172A;   /* darkest text           */
  --ast-global-color-3: #334155;   /* body text              */
  --ast-global-color-4: #F0F9FF;   /* page background        */
  --ast-global-color-5: #475569;   /* secondary text         */
  --ast-global-color-6: #BAE6FD;   /* accent light           */
  --ast-global-color-7: #0EA5E9;   /* accent mid             */
  --ast-global-color-8: #0C4A6E;   /* accent dark            */

  /* Override Elementor global colors (mirrors Astra global palette) */
  --e-global-color-astglobalcolor0: #0284C7;
  --e-global-color-astglobalcolor1: #E0F2FE;
  --e-global-color-astglobalcolor2: #0F172A;
  --e-global-color-astglobalcolor3: #334155;
  --e-global-color-astglobalcolor4: #F0F9FF;
  --e-global-color-astglobalcolor5: #475569;
  --e-global-color-astglobalcolor6: #BAE6FD;
  --e-global-color-astglobalcolor7: #0EA5E9;
  --e-global-color-astglobalcolor8: #0C4A6E;

  /* Astra border color */
  --ast-border-color: #BAE6FD;

  /* Island palette */
  --ocean-50:  #F0F9FF;
  --ocean-100: #E0F2FE;
  --ocean-200: #BAE6FD;
  --ocean-300: #7DD3FC;
  --ocean-400: #38BDF8;
  --ocean-500: #0EA5E9;
  --ocean-600: #0284C7;
  --ocean-700: #0369A1;
  --ocean-800: #075985;
  --ocean-900: #0C4A6E;

  --coral-warm: #FF6B6B;
  --coral-500:  #F43F5E;
  --coral-600:  #E11D48;

  --gold-400: #FACC15;
  --gold-600: #CA8A04;

  --white:    #FFFFFF;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  --font-heading: 'Montserrat', 'Roboto', sans-serif;
  --font-body:    'Noto Sans TC', 'Open Sans', 'Microsoft JhengHei', sans-serif;

  --shadow-sm: 0 1px 3px rgba(12,74,110,0.12);
  --shadow-md: 0 4px 16px rgba(12,74,110,0.15);
  --shadow-lg: 0 10px 40px rgba(12,74,110,0.20);

  --gradient-ocean: linear-gradient(135deg, #0284C7 0%, #0C4A6E 100%);
  --gradient-coral: linear-gradient(135deg, #FF6B6B 0%, #E11D48 100%);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.88); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   BASE TYPOGRAPHY
   Since Astra inline CSS is stripped, define all font rules here
   ============================================================ */
html {
  font-size: 93.75%; /* keeps Astra's default base size */
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-800);
}

h1, .entry-content h1,
h2, .entry-content h2,
h3, .entry-content h3,
h4, .entry-content h4,
h5, .entry-content h5,
h6, .entry-content h6,
.entry-title,
.site-title,
.site-title a {
  font-family: var(--font-heading);
  color: var(--ocean-900);
  line-height: 1.3;
}

h1, .entry-content h1 { font-size: 2.4rem;  font-weight: 900; line-height: 1.2; }
h2, .entry-content h2 { font-size: 2rem;    font-weight: 700; line-height: 1.3; }
h3, .entry-content h3 { font-size: 1.5rem;  font-weight: 700; }
h4, .entry-content h4 { font-size: 1.25rem; font-weight: 600; }
h5, .entry-content h5 { font-size: 1.1rem;  font-weight: 600; }
h6, .entry-content h6 { font-size: 1rem;    font-weight: 600; }

a {
  color: var(--ocean-600);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--ocean-400);
}

p {
  color: var(--gray-700);
}

blockquote {
  color: var(--gray-700);
  border-left: 4px solid var(--ocean-300);
  padding-left: 1.2em;
  font-style: italic;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
#masthead,
.site-header,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-below-header-bar {
  background: var(--gradient-ocean) !important;
  box-shadow: 0 2px 20px rgba(12,74,110,0.30) !important;
  border-bottom: none !important;
}

/* Sticky shrunk header */
.ast-sticky-main-shrunk .ast-primary-header-bar,
#ast-fixed-header .ast-primary-header-bar {
  background: rgba(7,89,133,0.97) !important;
  backdrop-filter: blur(8px);
}

/* Logo text */
.site-title {
  font-family: var(--font-heading) !important;
}
.site-title a {
  font-weight: 900 !important;
  color: var(--white) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Header logo image */
.ast-site-identity img,
header .custom-logo-link img {
  filter: brightness(0) invert(1); /* white logo on dark header */
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.ast-nav-menu > li > a,
.main-navigation ul > li > a {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.90) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.ast-nav-menu > li > a:hover,
.ast-nav-menu > li.current-menu-item > a,
.ast-nav-menu > li.current_page_item > a {
  color: var(--white) !important;
  background: rgba(255,255,255,0.15) !important;
}

/* Dropdown */
.ast-nav-menu .sub-menu,
.main-navigation .sub-menu {
  background: var(--ocean-800) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
}
.ast-nav-menu .sub-menu a {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
}
.ast-nav-menu .sub-menu a:hover {
  color: var(--white) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* Mobile toggle */
.ast-mobile-menu-trigger-fill span,
.ast-mobile-menu-trigger-fill::before,
.ast-mobile-menu-trigger-fill::after,
.ast-button-wrap .menu-toggle span {
  background: var(--white) !important;
}
.ast-button-wrap .menu-toggle {
  color: var(--white) !important;
}

/* ============================================================
   MEGA MENU
   ============================================================ */
.mega-menu-wrap #mega-menu-wrap-primary_navigation {
  background: transparent !important;
}
.mega-menu-wrap #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90) !important;
  transition: color 0.2s, background 0.2s !important;
  background: transparent !important;
}
.mega-menu-wrap #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:hover,
.mega-menu-wrap #mega-menu-primary_navigation > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
  color: var(--white) !important;
  background: rgba(255,255,255,0.15) !important;
}
.mega-menu-wrap .mega-sub-menu {
  background: var(--ocean-800) !important;
  border-top: 3px solid var(--ocean-400) !important;
  box-shadow: var(--shadow-lg) !important;
}
.mega-menu-wrap .mega-sub-menu .mega-menu-item a.mega-menu-link {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-body) !important;
  background: transparent !important;
}
.mega-menu-wrap .mega-sub-menu .mega-menu-item a.mega-menu-link:hover {
  color: var(--white) !important;
  background: rgba(255,255,255,0.10) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ast-button,
.ast-btn,
.ast-custom-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px !important;
  background: var(--gradient-ocean) !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(14,165,233,0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.ast-button:hover,
.ast-btn:hover,
.ast-custom-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14,165,233,0.50) !important;
  color: var(--white) !important;
}

/* Elementor buttons - font only, no size override */
.elementor-button {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.site-content,
#content {
  background: var(--gray-50);
}

/* ============================================================
   FOOTER
   ============================================================ */
#colophon,
.site-footer {
  background: var(--ocean-900) !important;
  color: rgba(255,255,255,0.75) !important;
  border-top: none !important;
}
#colophon p,
.site-footer p {
  color: rgba(255,255,255,0.75);
}
.site-footer a,
#colophon a {
  color: var(--ocean-300) !important;
  transition: color 0.2s ease;
}
.site-footer a:hover,
#colophon a:hover {
  color: var(--white) !important;
}
.ast-footer-widget-area .widget-title,
.ast-footer-widget-area .widgettitle {
  font-family: var(--font-heading) !important;
  color: var(--white) !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}
.ast-footer-copyright,
.ast-footer-bottom-content {
  background: var(--gray-900) !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.widget-title,
.widgettitle {
  font-family: var(--font-heading) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--ocean-800) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ocean-200);
  margin-bottom: 14px !important;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border: 2px solid var(--ocean-200) !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  color: var(--gray-800) !important;
  background: var(--white) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ocean-500) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.18) !important;
  outline: none !important;
}

/* ============================================================
   ELEMENTOR - font only, never touch layout
   ============================================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading) !important;
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--ocean-50); }
::-webkit-scrollbar-thumb { background: var(--ocean-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ocean-600); }

/* ============================================================
   TEXT SELECTION
   ============================================================ */
::selection {
  background: var(--ocean-200);
  color: var(--ocean-900);
}

/* ============================================================
   UTILITY CLASSES (opt-in only)
   ============================================================ */
.float-anim { animation: floatY 3s ease-in-out infinite; }
.pop-in     { animation: popIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.fade-in-up { animation: fadeInUp 0.8s ease both; }

.marquee-wrap {
  overflow: hidden;
  background: var(--ocean-800);
  padding: 10px 0;
}
.marquee-inner {
  display: flex;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}
.marquee-item {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ocean-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 40px;
}
.marquee-item span { color: var(--gold-400); margin: 0 8px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  h1, .entry-content h1 { font-size: 1.9rem; }
  h2, .entry-content h2 { font-size: 1.5rem; }
  .ast-nav-menu > li > a { font-size: 0.85rem !important; }
}