/*
 Theme Name:     Toronto Rainbowlers Child (Divi)
 Template:       Divi
 Version:        1.0
 Description:    Child theme styles for torontorainbowlers.ca
*/

/* =========================================================
   0. Notes
   =========================================================
   - Keep ALL custom CSS here (or split later into /assets/css).
   - “LEGACY” section below contains inherited/uncertain rules.
   - Typography: Zodiak for big headings (H1–H3), Public Sans for body/UI.
   ========================================================= */


/* =========================================================
   1. Design tokens (fonts, spacing, etc.)
   ========================================================= */

:root{
  /* Font stacks (assumes fonts are being loaded elsewhere) */
  --font-display: "Zodiak", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-sans: "Karla", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sans-serif global tracking (Karla-specific) */
  --body-karla-letterspacing: -0.02em;

  /* Display face tracking (Zodiak) */
  --display-tight: -0.02em;
  --display-tighter: -0.035em;
}

/* =========================================================
   2. Base typography
   ========================================================= */
/* =========================================================
   Fonts: self-hosted
   ========================================================= */

/* =========================
   Zodiak (static: upright + italic)
   ========================= */

/* Thin 100 */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Thin.woff2") format("woff2");
  font-weight:100;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-ThinItalic.woff2") format("woff2");
  font-weight:100;
  font-style:italic;
  font-display:swap;
}

/* Light 300 */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-LightItalic.woff2") format("woff2");
  font-weight:300;
  font-style:italic;
  font-display:swap;
}

/* Regular 400 */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

/* Medium 500 (you don't show a MediumItalic file; don't declare it unless you have it) */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* Bold 700 */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-BoldItalic.woff2") format("woff2");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* ExtraBold 800 */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Extrabold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-ExtraboldItalic.woff2") format("woff2");
  font-weight:800;
  font-style:italic;
  font-display:swap;
}

/* Black 900 */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak/Zodiak-BlackItalic.woff2") format("woff2");
  font-weight:900;
  font-style:italic;
  font-display:swap;
}


/* =========================
   Karla (variable: upright + italic)
   ========================= */

/* Upright */
@font-face{
  font-family:"Karla";
  src:url("fonts/karla/Karla-VariableFont_wght.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* Italic */
@font-face{
  font-family:"Karla";
  src:url("fonts/karla/Karla-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight:200 800;
  font-style:italic;
  font-display:swap;
}
body {
  font-family: "Karla", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 450;
  letter-spacing: var(--body-karla-letterspacing);
}

p,
li {
  font-weight: 450;
}
button,
input,
select,
textarea,
.et_pb_button,
.nav a {
  font-family: "Karla", sans-serif;
  font-weight: 500; /* UI often benefits from slightly firmer weight */
}

/* Display headings */
h1, h2, h3{
  font-family: var(--font-display);
  letter-spacing: var(--display-tight);
  word-spacing: 0.08em;
}

/* Push the “tight 70s” a bit more on larger sizes */
h1, .et_pb_text h1{ letter-spacing: var(--display-tighter); }
h2, .et_pb_text h2{ letter-spacing: var(--display-tighter); }

/* Keep smaller headings readable */
h4, h5, h6{
  font-family: var(--font-sans);
  letter-spacing: normal;
}

/* If Divi modules are forcing heading fonts, this usually wins */
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3{
  font-family: var(--font-display);
}


/* =========================================================
   3. Layout + Divi global tweaks
   ========================================================= */

html {
  background-color: #45a0b5;
}

body {
  background-color: #ffffff;
}

#page-container {
  overflow-y: visible !important;
}
/* =========================================================
   3A. Hero: sticky sky section (Rainbowlers home)
   =========================================================
   Usage:
   - Add class "rb-hero-sky" to Section 1 (background image section)
   - Add class "rb-hero-content" to Section 2 (scrolls over the top)
   Notes:
   - position: sticky handles the "scrolls then locks" behaviour natively
   - No JS needed
   - et_pb_image_0 targets the logo image module directly; if module
     order changes this class number may need updating
   ========================================================= */

.rb-hero-sky {
  position: sticky !important;
  top: 0 !important;
  z-index: 0 !important;
  height: calc((100vh - 71px) * 0.5);
  margin-top: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 980px) {
  .rb-hero-sky {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  .rb-hero-sky {
    height: calc((100vh - 71px) * 0.35) !important;
  }
}

.rb-hero-sky .et_pb_row {
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  column-gap: 0 !important;
}

.rb-hero-sky .et_pb_row > [class*=et_flex_column] {
  --horizontal-gap-parent: 0% !important;
}

.rb-hero-sky .et_pb_column {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Target the logo image module directly */
.rb-hero-sky .et_pb_image_0 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(900px, 85vw) !important;
  margin: 0 !important;
}

.rb-hero-sky .et_pb_image_0 .et_pb_image_wrap img {
  max-width: min(1200px, 90vw) !important;
  width: 100% !important;
  display: block !important;
}

.rb-hero-sky .et_pb_image_0 img {
  filter: drop-shadow(0.09em 0.09em 0.0em rgba(0, 0, 0, 0.71));
}

/* =========================================================
   4. Navigation
   ========================================================= */

/* =========================================================
   CUSTOM MOBILE HEADER (cp-mobile-header)
   ========================================================= */

.cp-mobile-header{
  position: relative;
  z-index: 9999;
  font-family: "Karla", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* top row */
.cp-mobile-header .cp-mobile-nav{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #44a0b5;
  padding: 0.4rem 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* hide scrollbar */
.cp-mobile-header .cp-mobile-nav::-webkit-scrollbar{ display:none; }
.cp-mobile-header .cp-mobile-nav{ scrollbar-width:none; }

.cp-mobile-header .cp-logo{
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
  flex: 0 0 auto;
  padding: 2px 0;
  margin-left: -4px;
}

.cp-mobile-header .cp-logo img{
  height: 48px;
  width: auto;
  display: block;
}

.cp-mobile-header .cp-menu-link{
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}

.cp-mobile-header .cp-menu-link:focus,
.cp-mobile-header .cp-menu-link:hover{
  text-decoration: underline;
}

/* dropdown wrapper */
.cp-mobile-header .cp-submenus{
  position: relative;
}

/* dropdown panels */
.cp-mobile-header .cp-submenu{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #62254E;
  display: none;
  flex-direction: column;
  padding: 0.25rem 0;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(0.1rem);
}

.cp-mobile-header .cp-submenu.is-open{
  display: flex;
}

.cp-mobile-header .cp-submenu-link{
  display: block;
  padding: 0.8rem 0.9rem;
  color: #ffffff;
  font-size: 1rem;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.cp-mobile-header .cp-submenu-link:first-child{
  border-top: none;
}

.cp-mobile-header .cp-submenu-link:focus,
.cp-mobile-header .cp-submenu-link:hover{
  background: rgba(255,255,255,0.08);
}

@media (min-width: 981px){
  .cp-mobile-header{ display:none; }
}

@media (max-width: 767px){
  .cp-mobile-header{ position: static !important; }
}
/* Phones: put logo on its own line, nav items below */
@media (max-width: 520px) {

  .cp-mobile-header .cp-mobile-nav{
    flex-wrap: wrap;          /* allow logo to break to its own row */
    overflow-x: visible;      /* no horizontal scroll on the whole bar */
    gap: 0.35rem 0.5rem;
  }

  .cp-mobile-header .cp-logo{
    flex: 1 0 100%;           /* force full-width row */
    margin: 0;
    padding: 6px 0 2px;
  }

  .cp-mobile-header .cp-logo img{
    height: 34px;             /* tune as needed */
    width: auto;
    max-width: 78vw;          /* prevents logo from dominating */
    object-fit: contain;
  }

  .cp-mobile-header .cp-menu-link{
    padding: 0.25rem 0.30rem; /* slightly tighter so 3 fit better */
  }
}

.menu-item-dek {
  text-transform: none !important;
  font-size: 0.8em !important; /* 15/16 — 1px smaller relative to context */
}


/* =========================================================
   5. Components
   ========================================================= */
/* Buttons */
/* Forms */
/* Cards */
/* Toggles/accordions */
/* (blobs) */



/* =========================================================
   6. Page-specific (only when necessary)
   ========================================================= */
/* (empty for now) */


/* =========================================================
   9. LEGACY / REVIEW
   =========================================================
   These rules came from the old child theme / Divi options CSS.
   Keep temporarily; prune once you confirm what still matters.
   ========================================================= */

/* --- Legacy: header info alignment (likely safe, but verify) --- */
@media only screen and (min-width: 768px) {
  #et-info { float:right !important; }
}

/* --- Legacy: hides phone in header (probably safe if you don’t use it) --- */
#et-info-phone { display: none; }

/* --- Legacy: first section padding tweak (Divi-specific) --- */
.et_pb_section_first { padding-top: 10px !important; }
/* This affects the first Divi section on many pages — keep until you confirm spacing is OK without it */


/* --- Legacy: adds space above H3 globally --- */
h3 { padding-top:1em; }
/* This is risky because it affects ALL H3s everywhere.
   If you keep it, I’d rather scope it to a specific section/class later. */