/*
Theme Name:   Astra Child - OtterRing
Template:     astra
Version:      1.0.0
Description:  OtterRing child theme - clean minimalist style matching tool pages
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --oh-ink:          #1a1a1a;
  --oh-ink-soft:     #5a5a5a;
  --oh-ink-faint:    #a0a0a0;
  --oh-border:       #e0e0e0;
  --oh-bg:           #fafaf8;
  --oh-card:         #ffffff;
  --oh-accent:       #2d6a4f;
  --oh-accent-light: #e8f4f0;
  --oh-accent-mid:   #c0ddd4;
  --oh-radius:       10px;
  --oh-nav-h:        64px;
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
body {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  background-color: var(--oh-bg) !important;
  color: var(--oh-ink) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  color: var(--oh-ink) !important;
  letter-spacing: -0.02em !important;
}

a {
  color: var(--oh-accent) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--oh-ink) !important;
}

/* ============================================================
   HEADER
   ============================================================ */
#masthead,
.site-header,
.ast-site-header-wrap {
  background-color: var(--oh-card) !important;
  border-bottom: 1px solid var(--oh-border) !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

.ast-container,
.ast-header-wrap .ast-container {
  max-width: 1100px !important;
  padding: 0 32px !important;
}

/* Logo sizing — fits the OtterRing header height */
.custom-logo-link img,
.ast-header-logo-link img {
  max-height: 44px !important;
  width: auto !important;
}

/* Site title text (fallback if no logo image set) */
.site-title a {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: var(--oh-ink) !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}

/* Header inner row height — let Astra control display/flex internally */
.main-header-bar,
.ast-primary-header-bar {
  min-height: var(--oh-nav-h) !important;
  padding: 0 !important;
}

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */

/* Nav container — scope tightly to avoid collapsing logo wrapper */
#site-navigation,
.main-navigation {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  height: var(--oh-nav-h) !important;
}

/* Do NOT set display:flex on ast-main-menu-wrap or ast-primary-nav —
   Astra uses these to position the logo + nav row and overriding
   their display collapses the logo container */

/* Top-level nav list */
#site-navigation ul.ast-nav-menu,
.ast-main-menu-wrap ul.main-navigation-menu,
.main-navigation ul {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Top-level menu items */
#site-navigation ul.ast-nav-menu > li,
.main-navigation ul > li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Top-level links */
#site-navigation ul.ast-nav-menu > li > a,
.main-navigation ul > li > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--oh-ink-soft) !important;
  padding: 0 20px !important;
  height: var(--oh-nav-h) !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.18s !important;
  border-bottom: 2px solid transparent !important;
  text-transform: none !important;
  text-decoration: none !important;
}

#site-navigation ul.ast-nav-menu > li > a:hover,
.main-navigation ul > li > a:hover,
#site-navigation ul.ast-nav-menu > li.current-menu-item > a,
#site-navigation ul.ast-nav-menu > li.current-menu-ancestor > a {
  color: var(--oh-accent) !important;
  border-bottom-color: var(--oh-accent) !important;
}

/* ============================================================
   MEGA / HORIZONTAL SUB-MENU (Date & Time Tools)
   ============================================================ */

/* The sub-menu drop - horizontal full-width panel */
#site-navigation ul.ast-nav-menu li.menu-item-has-children ul.sub-menu,
.main-navigation ul li.menu-item-has-children ul.sub-menu {
  display: none !important;
  position: fixed !important;
  top: var(--oh-nav-h) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: var(--oh-card) !important;
  border-top: 1px solid var(--oh-border) !important;
  border-bottom: 1px solid var(--oh-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  padding: 16px 32px !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  z-index: 998 !important;
  margin: 0 !important;
  list-style: none !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  max-width: 100% !important;
  animation: ohMenuFadeIn 0.18s ease !important;
}

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

/* Show on hover */
#site-navigation ul.ast-nav-menu li.menu-item-has-children:hover ul.sub-menu,
.main-navigation ul li.menu-item-has-children:hover ul.sub-menu {
  display: flex !important;
}

/* Sub-menu items */
#site-navigation ul.ast-nav-menu li.menu-item-has-children ul.sub-menu > li,
.main-navigation ul li.menu-item-has-children ul.sub-menu > li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sub-menu links */
#site-navigation ul.ast-nav-menu li.menu-item-has-children ul.sub-menu > li > a,
.main-navigation ul li.menu-item-has-children ul.sub-menu > li > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--oh-ink-soft) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

#site-navigation ul.ast-nav-menu li.menu-item-has-children ul.sub-menu > li > a:hover,
.main-navigation ul li.menu-item-has-children ul.sub-menu > li > a:hover {
  background: var(--oh-accent-light) !important;
  color: var(--oh-accent) !important;
}

/* Sub-menu section label (non-link item at start) */
.oh-submenu-label {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oh-ink-faint) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

/* Dropdown arrow on parent item */
#site-navigation ul.ast-nav-menu li.menu-item-has-children > a::after,
.main-navigation ul li.menu-item-has-children > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin-left: 6px !important;
  margin-top: -3px !important;
  transition: transform 0.18s !important;
}

#site-navigation ul.ast-nav-menu li.menu-item-has-children:hover > a::after,
.main-navigation ul li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) !important;
  margin-top: 2px !important;
}

/* ============================================================
   MOBILE NAV TOGGLE
   ============================================================ */
.menu-toggle,
.ast-mobile-menu-trigger,
button.menu-toggle {
  background: transparent !important;
  border: 1px solid var(--oh-border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  color: var(--oh-ink-soft) !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* ============================================================
   PAGE LAYOUT & CONTENT AREA
   ============================================================ */
#content,
.site-content,
.ast-container.ast-site-content-wrap {
  background: var(--oh-bg) !important;
}

/* Content + sidebar wrapper */
#primary,
.content-area {
  background: var(--oh-bg) !important;
}

/* Page entry content */
.entry-content,
.ast-entry-content,
.page-content {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  color: var(--oh-ink-soft) !important;
  line-height: 1.75 !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#secondary,
.widget-area,
.ast-right-sidebar {
  background: transparent !important;
  padding-left: 28px !important;
  border-left: none !important;
}

/* Widget box */
.widget,
.ast-widget {
  background: var(--oh-card) !important;
  border: 1px solid var(--oh-border) !important;
  border-radius: var(--oh-radius) !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}

/* Widget title */
.widget-title,
.widgettitle,
h2.widget-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--oh-ink-faint) !important;
  margin: 0 !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid var(--oh-border) !important;
  background: transparent !important;
}

/* Widget content */
.widget ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}

.widget ul li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--oh-border) !important;
}

.widget ul li:last-child {
  border-bottom: none !important;
}

.widget ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  color: var(--oh-ink-soft) !important;
  transition: background 0.15s, color 0.15s !important;
  text-decoration: none !important;
}

.widget ul li a:hover {
  background: var(--oh-accent-light) !important;
  color: var(--oh-accent) !important;
}

.widget ul li a::after {
  content: '›' !important;
  margin-left: auto !important;
  color: var(--oh-border) !important;
  font-size: 1.1rem !important;
  transition: color 0.15s !important;
}

.widget ul li a:hover::after {
  color: var(--oh-accent) !important;
}

/* Widget text content */
.widget .textwidget {
  padding: 16px 20px !important;
  font-size: 0.84rem !important;
  color: var(--oh-ink-soft) !important;
  line-height: 1.65 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#colophon,
.site-footer,
.ast-site-footer {
  background-color: var(--oh-card) !important;
  border-top: 1px solid var(--oh-border) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 60px !important;
}

.ast-footer-copyright,
.site-info,
.footer-bar {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 24px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Footer text */
.ast-footer-copyright p,
.site-info,
.footer-bar,
#colophon,
.ast-footer-copyright {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 300 !important;
  color: var(--oh-ink-faint) !important;
  letter-spacing: 0 !important;
}

/* Footer links */
.ast-footer-copyright a,
.site-info a,
.footer-bar a,
.footer-nav a {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--oh-ink-soft) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.ast-footer-copyright a:hover,
.site-info a:hover,
.footer-bar a:hover,
.footer-nav a:hover {
  color: var(--oh-accent) !important;
}

/* Footer nav - inline list */
.footer-navigation ul,
.ast-footer-navigation ul,
nav.footer-nav ul {
  display: flex !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-navigation ul li,
nav.footer-nav ul li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer separator dot */
.footer-navigation ul li + li::before {
  content: '·' !important;
  margin-right: 24px !important;
  color: var(--oh-border) !important;
}

/* ============================================================
   BUTTONS (WordPress block editor default buttons)
   ============================================================ */
.wp-block-button__link,
.btn,
input[type="submit"],
button[type="submit"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  background: var(--oh-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: #235c42 !important;
  color: #fff !important;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="search"],
textarea {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  color: var(--oh-ink) !important;
  background: var(--oh-bg) !important;
  border: 1px solid var(--oh-border) !important;
  border-radius: 6px !important;
  padding: 11px 13px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--oh-accent) !important;
  box-shadow: 0 0 0 3px rgba(45,106,79,0.1) !important;
}

/* ============================================================
   BLOCK EDITOR CONTENT TWEAKS
   ============================================================ */
.wp-block-separator {
  border-color: var(--oh-border) !important;
  border-width: 1px !important;
}

.wp-block-quote {
  border-left: 3px solid var(--oh-accent) !important;
  padding-left: 20px !important;
  color: var(--oh-ink-soft) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root { --oh-nav-h: 56px; }

  .ast-container,
  .ast-header-wrap .ast-container {
    padding: 0 18px !important;
  }

  #secondary,
  .widget-area {
    padding-left: 0 !important;
    margin-top: 40px !important;
  }

  .ast-footer-copyright,
  .site-info,
  .footer-bar {
    padding: 20px 18px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}