/* ============================================================
   ORAMAL BELA — TYPOGRAPHY & ELEGANCE OVERRIDES
   ============================================================ */

/* --- GOOGLE FONTS IMPORT --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* --- HEADINGS: Cormorant Garamond, ALL CAPS --- */
h1, h2, h3, h4, h5, h6,
.heading-font,
.ob-section-title,
.ob-hero h1,
.section-title,
.title {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em;
}

/* --- BODY TEXT: Zalando Sans --- */
body, p, li, td, th, label, input, textarea, select,
.ob-body, .entry-content p {
  font-family: "Zalando Sans", sans-serif !important;
}

/* --- NAV LINKS: Zalando Sans, refined --- */
.nav > li > a,
.ob-nav a,
.header-main .nav > li > a {
  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ============================================================
   ELEGANT MOBILE SIDEBAR / DRAWER MENU
   ============================================================ */

/* Drawer backdrop */
.main-menu-overlay {
  background: rgba(10, 5, 3, 0.7) !important;
  backdrop-filter: blur(4px) !important;
}

/* Drawer panel */
.mobile-sidebar,
#main-menu.mobile-sidebar {
  background: #0a0805 !important;
  border-right: 1px solid rgba(212, 175, 55, 0.25) !important;
  max-width: 320px !important;
  box-shadow: 4px 0 40px rgba(0,0,0,0.6) !important;
}

/* Top padding & logo area */
.mobile-sidebar .sidebar-inner {
  padding: 48px 32px 32px !important;
}

/* Nav items inside mobile drawer */
.mobile-sidebar .nav-sidebar > li > a,
.mobile-sidebar .nav > li > a,
.mobile-sidebar .nav-sidebar a {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #f5f0e8 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
  line-height: 1.3 !important;
  display: block !important;
  transition: color 0.3s ease, letter-spacing 0.3s ease !important;
}

.mobile-sidebar .nav-sidebar > li > a:hover,
.mobile-sidebar .nav > li > a:hover {
  color: #d4af37 !important;
  letter-spacing: 0.22em !important;
}

/* Close button */
.mobile-sidebar .mfp-close,
.mfp-close {
  color: #d4af37 !important;
  font-size: 1.8rem !important;
  top: 16px !important;
  right: 20px !important;
  opacity: 0.8 !important;
}

/* Search bar inside drawer */
.mobile-sidebar .search-field,
.mobile-sidebar input[type="search"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 2px !important;
  color: #f5f0e8 !important;
  font-family: "Zalando Sans", sans-serif !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
}

/* Account links inside drawer */
.mobile-sidebar .account-button,
.mobile-sidebar .account-item a {
  font-family: "Zalando Sans", sans-serif !important;
  color: rgba(245, 240, 232, 0.6) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Hamburger / Menu icon */
.nav-icon:before,
.nav-icon:after,
.nav-icon span {
  background-color: #d4af37 !important;
  height: 1.5px !important;
  border-radius: 0 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   JOURNAL PAGE — ARTICLE CARD STYLES
   ============================================================ */
.ob-journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.ob-journal-article {
  background: transparent;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 2rem;
  transition: opacity 0.3s ease;
}

.ob-journal-article:hover {
  opacity: 0.85;
}

.ob-journal-article h3 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.ob-journal-article p {
  font-family: "Zalando Sans", sans-serif !important;
  font-size: 0.95rem;
  line-height: 1.75;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.ob-journal-article a.ob-read-more {
  font-family: "Zalando Sans", sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 2px !important;
  transition: opacity 0.3s !important;
}

/* ============================================================
   TUTORIALS PAGE — LINK STYLES
   ============================================================ */
.ob-tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.ob-tutorial-card {
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.ob-tutorial-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-3px);
}

.ob-tutorial-card h3 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.6rem;
}

.ob-tutorial-card p {
  font-family: "Zalando Sans", sans-serif !important;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.ob-tutorial-card a {
  font-family: "Zalando Sans", sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   INLINE CORMORANT UTILITY
   ============================================================ */
.ob-inline-cormorant {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #D4AF37 !important;
}

.ob-page-sub {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  line-height: 1.4 !important;
  letter-spacing: 1px !important;
  color: #FFFFFF !important;
  margin-bottom: 24px;
}

.ob-body {
  font-family: "Zalando Sans", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  margin-bottom: 24px;
}


/* === Homepage logo: faded by default, illuminates on hover (added 2026-05-09) === */
body.home .ob-logo-link {
  opacity: 0.15;
  transition: opacity 600ms ease, text-shadow 600ms ease, color 600ms ease;
}
body.home .ob-logo-link:hover,
body.home .ob-logo-link:focus,
body.home #header:hover .ob-logo-link {
  opacity: 1;
  text-shadow:
    0 0 6px rgba(255, 235, 200, 0.7),
    0 0 14px rgba(255, 215, 160, 0.55),
    0 0 28px rgba(255, 200, 130, 0.35);
}
/* === end logo hover === */



/* === LOGO PUNCH-ON-HOVER ANIMATION === */
.custom-logo,
.site-logo img,
.header-logo img,
.logo img,
header .logo img,
.site-branding img,
img.custom-logo {
  display: inline-block;
  transition: filter 0.4s ease;
  transform-origin: center center;
  filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
  will-change: transform, filter;
}

.custom-logo:hover,
.site-logo:hover img,
.header-logo:hover img,
.logo:hover img,
header .logo:hover img,
.site-branding:hover img,
a:hover > img.custom-logo {
  animation: oramal-logo-punch 0.65s cubic-bezier(0.22, 1.61, 0.36, 1);
  filter: drop-shadow(0 6px 18px rgba(212, 175, 55, 0.7))
          drop-shadow(0 0 24px rgba(212, 175, 55, 0.45));
}

@keyframes oramal-logo-punch {
  0%   { transform: scale(1)    rotate(0deg)   translateX(0); }
  15%  { transform: scale(1.55) rotate(-14deg) translateX(-3px); }
  30%  { transform: scale(0.78) rotate(9deg)   translateX(4px); }
  45%  { transform: scale(1.30) rotate(-6deg)  translateX(-2px); }
  60%  { transform: scale(0.92) rotate(3deg)   translateX(2px); }
  78%  { transform: scale(1.12) rotate(-1deg)  translateX(0); }
  100% { transform: scale(1)    rotate(0deg)   translateX(0); }
}

/* === ORAMAL BELA: REPLACE TEXT LOGO WITH GOLD MARK + PUNCH-ON-HOVER === */
header.ob-header .ob-logo-link {
  display: inline-block;
  width: 56px;
  height: 56px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url('https://oramalbela.com/wp-content/uploads/2026/04/cropped-logo-gold-nobg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: filter 0.4s ease;
  transform-origin: center center;
  filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
  will-change: transform, filter;
  vertical-align: middle;
}

header.ob-header .ob-logo-link:hover {
  animation: oramal-logo-punch 0.65s cubic-bezier(0.22, 1.61, 0.36, 1);
  filter: drop-shadow(0 6px 18px rgba(212, 175, 55, 0.7))
          drop-shadow(0 0 24px rgba(212, 175, 55, 0.45));
}

/* Override existing gold gradient on logo link */
header.ob-header .ob-logo-link {
  background-image: url('https://oramalbela.com/wp-content/uploads/2026/04/cropped-logo-gold-nobg.png') !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  border-radius: 0 !important;
  width: 56px !important;
  height: 56px !important;
}

/* Force logo full opacity (theme had it at 0.15) */
header.ob-header .ob-logo-link {
  opacity: 1 !important;
}

/* Override the background-clip:text from theme so logo image paints on full box */
header.ob-header .ob-logo-link {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: transparent !important;
}

/* === RESTORE WORDMARK + CALM ILLUMINATION + REMOVE BOUNCE === */
/* Bring back the visible "ORAMAL BELA" text next to the gold mark */
header.ob-header .ob-logo-link {
  width: auto !important;
  height: auto !important;
  min-height: 56px;
  padding-left: 68px !important;  /* room for the 56px gold mark + 12px gap */
  font-size: 1rem !important;
  line-height: 56px !important;
  letter-spacing: 0.18em;
  text-indent: 0 !important;
  overflow: visible !important;
  background-position: left center !important;
  background-size: 56px 56px !important;
  display: inline-flex !important;
  align-items: center;

  /* Calm steady gold illumination on the wordmark */
  color: #e8c87a !important;
  -webkit-text-fill-color: #e8c87a !important;
  text-shadow:
    0 0 6px rgba(232, 200, 122, 0.55),
    0 0 14px rgba(212, 175, 55, 0.35),
    0 0 24px rgba(212, 175, 55, 0.18);
  transition: text-shadow 0.6s ease, filter 0.6s ease;
}

/* Disable the punch bounce — keep hover gentle */
header.ob-header .ob-logo-link:hover {
  animation: none !important;
  filter: none !important;
  text-shadow:
    0 0 8px rgba(255, 220, 150, 0.7),
    0 0 18px rgba(232, 200, 122, 0.45),
    0 0 30px rgba(212, 175, 55, 0.22);
}

/* === HIDE YOUTUBE SOCIAL ICON IN FOOTER === */
.ob-footer-social a.ob-social-link[href*="youtube.com"],
.ob-footer-social a.ob-social-link[href*="youtu.be"],
a.ob-social-link[aria-label="YouTube"] {
  display: none !important;
}

/* === SECTION BACKGROUNDS: DARK HERO/RITUAL/JOURNAL, LIGHT COLLECTION === */
/* Dark near-black for hero (matches header) */
.ob-hero {
  background-color: rgb(12, 8, 4) !important;
}
.ob-hero, .ob-hero p, .ob-hero .ob-hero-tagline {
  color: #e8c87a;
}

/* Collection stays light cream (already is, just lock it) */
.ob-collection {
  background-color: rgb(242, 237, 230) !important;
}

/* Ritual section: light cream for contrast */
.ob-ritual {
  background-color: rgb(242, 237, 230) !important;
  color: #2a2420;
}
.ob-ritual p,
.ob-ritual li,
.ob-ritual .ob-ritual-step,
.ob-ritual .ob-ritual-text {
  color: #2a2420 !important;
}

/* Journal: dark again so it reads as a contrast band like the hero */
.ob-journal {
  background-color: rgb(12, 8, 4) !important;
}

/* Body fallback so transparent gaps don't show grey */
body.home {
  background-color: rgb(12, 8, 4) !important;
}

/* === JOURNAL: REMOVE SLIDER, STACK AS GRID OF 6 === */
/* Hide slider navigation + counter */
.ob-journal .ob-jnav,
.ob-journal .ob-jcounter {
  display: none !important;
}

/* Unwrap the slider — show both panels stacked, with their grids merged visually */
.ob-journal .ob-jslider-wrap {
  overflow: visible !important;
}
.ob-journal .ob-jslider {
  display: block !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}
.ob-journal .ob-jslide {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-bottom: 32px;
}
.ob-journal .ob-jslide:last-child {
  margin-bottom: 0;
}
.ob-journal .ob-jgrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 32px !important;
  max-width: 1100px;
  margin: 0 auto;
}

/* === HOMEPAGE TUTORIALS: HIDE STACKED CARDS, SHOW ONE SIGNATURE BLOCK === */
/* Hide all but the first tutorial card */
.ob-tutorial-card { display: none !important; }
.ob-tutorial-card:first-of-type {
  display: block !important;
  position: relative;
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 0 !important;
  background: transparent;
  border: none !important;
  text-align: center;
}

/* Hide the first card's original h3 + p + link visually, but keep them in DOM (a11y) */
.ob-tutorial-card:first-of-type h3,
.ob-tutorial-card:first-of-type p,
.ob-tutorial-card:first-of-type a {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* Inject signature photo block via ::before */
.ob-tutorial-card:first-of-type::before {
  content: '';
  display: block;
  width: 100%;
  height: 480px;
  background-image:
    linear-gradient(180deg, rgba(12,8,4,0.15) 0%, rgba(12,8,4,0.55) 100%),
    url('https://oramalbela.com/wp-content/uploads/2026/04/cropped-logo-gold-nobg.png');
  background-size: cover, 220px;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: #14100c;
}

/* Inject heading + CTA via ::after, positioned over the photo */
.ob-tutorial-card:first-of-type::after {
  content: 'TUTORIALS \A Guided rituals for face, eyes, and lips. \A View tutorials \2192';
  white-space: pre-line;
  display: block;
  position: absolute;
  bottom: 60px; left: 0; right: 0;
  color: #e8c87a;
  font-family: 'Cormorant Garamond', Georgia, serif;
  text-align: center;
  letter-spacing: 0.18em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 2.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Make the whole card clickable to /tutorials-2 via the hidden link */
.ob-tutorial-card:first-of-type {
  cursor: pointer;
}
.ob-tutorial-card:first-of-type a {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  clip: auto !important;
  font-size: 0 !important;
  z-index: 2;
}

/* Hide the leaking raw markup text node above */
main#home > [class="ob-tutorials-grid"]:empty,
main#home::before { display: none; }

/* === CONNECT / JOIN THE RITUAL: NAVY + GOLD ELEGANT === */
.ob-signup#connect {
  background-color: #0e1a2b !important;
  padding: 96px 24px !important;
  text-align: center;
  position: relative;
}

/* Eyebrow "CONNECT" label injected before the heading */
.ob-signup#connect::before {
  content: 'CONNECT';
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: #6b8aa6;
  margin-bottom: 28px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Hide original h2 text and replace with two-line headline */
.ob-signup#connect h2 {
  font-size: 0 !important;
  margin: 0 0 16px !important;
  line-height: 0 !important;
}
.ob-signup#connect h2::after {
  content: 'Receive quiet messages,\A';
  white-space: pre;
  display: block;
  font-size: 3rem;
  line-height: 1.15;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  color: #f5efe6;
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-fill-color: #f5efe6;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: none;
}
.ob-signup#connect h2::before {
  content: 'never noise.';
  display: block;
  order: 2;
  font-size: 3rem;
  line-height: 1.15;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #d4af37;
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-fill-color: #d4af37;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  margin-top: 4px;
  text-shadow: none;
}
.ob-signup#connect h2 {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

/* Supporting paragraph: rewrite via font-size:0 + ::after */
.ob-signup#connect > p {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}
.ob-signup#connect > p::after {
  content: 'The journal, new rituals, and small notes from the studio.\A Unsubscribe whenever you wish.';
  white-space: pre-line;
  display: block;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #9aabbf;
  margin: 28px auto 48px;
  max-width: 480px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
}

/* Form: row layout, name + email + button */
.ob-signup#connect .ob-signup-form {
  display: flex !important;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hide phone field */
.ob-signup#connect input[name="ob_phone"] {
  display: none !important;
}

/* Style name + email inputs as underline-only */
.ob-signup#connect input[name="ob_name"],
.ob-signup#connect input[name="ob_email"] {
  flex: 1 1 200px;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 0 !important;
  padding: 14px 4px !important;
  color: #f5efe6 !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem !important;
  letter-spacing: 0.04em;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.3s;
}
.ob-signup#connect input[name="ob_name"]::placeholder,
.ob-signup#connect input[name="ob_email"]::placeholder {
  color: #6b8aa6;
  opacity: 1;
}
.ob-signup#connect input[name="ob_name"]:focus,
.ob-signup#connect input[name="ob_email"]:focus {
  border-bottom-color: #d4af37 !important;
}

/* BEGIN button: solid gold square */
.ob-signup#connect button[type="submit"] {
  background: #d4af37 !important;
  color: #0e1a2b !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 32px !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 0 !important;
  min-width: 120px;
  position: relative;
}
.ob-signup#connect button[type="submit"]::after {
  content: 'BEGIN';
  font-size: 0.85rem;
  letter-spacing: 0.22em;
}
.ob-signup#connect button[type="submit"]:hover {
  background: #e8c87a !important;
}

/* Mobile: stack form */
@media (max-width: 640px) {
  .ob-signup#connect h2::after,
  .ob-signup#connect h2::before {
    font-size: 2.1rem;
  }
  .ob-signup#connect .ob-signup-form {
    flex-direction: column;
  }
  .ob-signup#connect input[name="ob_name"],
  .ob-signup#connect input[name="ob_email"] {
    flex: 1 1 100%;
  }
  .ob-signup#connect button[type="submit"] {
    padding: 16px !important;
  }
}

/* === FIXES === */
/* Hide the leaking raw ob-tutorials-grid markup text node */
body.home main#home {
  position: relative;
}
body.home main#home::before { content: none; }

/* The leaking text appears between the journal and tutorials — hide via specific text */

/* === FIX BEGIN BUTTON HEIGHT === */
.ob-signup#connect button[type="submit"] {
  min-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 32px !important;
}
.ob-signup#connect button[type="submit"]::after {
  display: inline-block;
  font-size: 0.85rem !important;
  letter-spacing: 0.22em !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: #0e1a2b !important;
  text-transform: uppercase;
}

/* === HIDE LEAKING ob-tutorials-grid TEXT NODE === */
/* The orphan text sits directly in main#home. Hide it by making main#home text
   transparent + zero-size, then restore for known children. */
body.home main#home {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
}

/* Restore for all element children */
body.home main#home > * {
  font-size: 1rem;
  color: inherit;
  line-height: 1.6;
}

/* Restore for known sections that have their own typography */
body.home main#home .ob-hero,
body.home main#home .ob-collection,
body.home main#home .ob-ritual,
body.home main#home .ob-journal,
body.home main#home .ob-tutorial-card,
body.home main#home .ob-signup,
body.home main#home section {
  font-size: 1rem;
  line-height: 1.6;
}

/* ============================================
   ORAMAL BELA — USABILITY FIXES (added by Claude)
   Safe to remove this block to revert.
   ============================================ */

/* 1) Header logo: keep refined */
.ob-logo-link {
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

/* 2) Menu overlay items: shrink the giant text */
.ob-nav-links a {
  font-size: 22px !important;
  letter-spacing: 3px !important;
  line-height: 1.6 !important;
  padding: 10px 0 !important;
  display: block !important;
}
@media (min-width: 768px) {
  .ob-nav-links a { font-size: 26px !important; }
}

/* 3) Hide footer logo / brand mark */
.ob-footer-new .ob-footer-logo,
.ob-footer-new img.ob-logo,
.ob-footer-new .ob-footer-brand-mark,
.ob-footer-new .ob-logo-link,
.ob-footer-new a[class*="logo"] {
  display: none !important;
}

/* 4) Collapse footer link groups into accordions on mobile */
@media (max-width: 899px) {
  .ob-footer-accordion {
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .ob-footer-accordion .ob-footer-heading,
  .ob-footer-accordion summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    letter-spacing: 2px;
  }
  .ob-footer-accordion .ob-footer-heading::after,
  .ob-footer-accordion summary::after { content: "+"; opacity: .7; }
  .ob-footer-accordion[open] .ob-footer-heading::after,
  .ob-footer-accordion[open] summary::after { content: "−"; }
  .ob-footer-accordion:not([open]) .ob-footer-body { display: none; }
}

/* 5) Make sure the open menu actually closes (visibility/pointer fallback) */
body:not(.menu-open) .ob-nav-links {
  pointer-events: none;
}