/* ============================================================
   Oico Integrity — Header & Footer
   Loaded by oico-loader plugin on all Oico pages.
   Self-contained — no dependency on main.css variables.
============================================================ */

/* ── HEADER ─────────────────────────────────────────────── */

.oico-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 58px;
  display: flex;
  align-items: center;
  background: transparent;
}

/* Shift header below WP admin bar when logged in */
.admin-bar .oico-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .oico-header {
    top: 46px;
  }
}

/* News-ribbon top banner: drop the header below the 60px banner.
   The banner is the first in-flow section, so page content already sits
   below it — only the absolute header needs shifting. Keep 60px in sync
   with .oico-news-ribbon { min-height } in _news-ribbon.scss. */
.oico-has-top-banner .oico-header {
  top: 60px;
}
.admin-bar.oico-has-top-banner .oico-header {
  top: 92px; /* 32px admin bar + 60px banner */
}
@media (max-width: 782px) {
  .admin-bar.oico-has-top-banner .oico-header {
    top: 106px; /* 46px admin bar + 60px banner */
  }
}

.oico-header__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.oico-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.oico-logo svg,
.oico-logo img {
  display: block;
}

.oico-logo svg {
  height: 22px;
  width: auto;
}

.oico-logo img {
  height: 28px;
  width: auto;
}

/* ── HAMBURGER ───────────────────────────────────────────── */

.oico-hamburger {
  width: 38px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: background 0.15s ease;
  z-index: 110;
  position: relative;
}

.oico-hamburger:hover {
  background: rgba(29, 78, 216, 0.08);
}

.oico-hamburger__line {
  display: block;
  width: 20px;
  height: 2px;
  background: #f8fafc;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.oico-hamburger.is-open .oico-hamburger__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.oico-hamburger.is-open .oico-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.oico-hamburger.is-open .oico-hamburger__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── NAV OVERLAY ─────────────────────────────────────────── */

.oico-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 12, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 104;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.oico-nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── NAV DRAWER ──────────────────────────────────────────── */

.oico-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #06070c;
  border-left: 1px solid #1e293b;
  z-index: 105;
  display: flex;
  flex-direction: column;
  padding: 80px 2rem 2rem;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.oico-nav-drawer.is-open {
  transform: translateX(0);
}

.oico-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: 0.15rem;
}

.oico-nav-links > li {
  margin: 0;
  padding: 0;
}

.oico-nav-links > li > a {
  display: inline-block;
  padding: 0.15rem 0;
  margin: 0.5rem 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #f8fafc;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s ease;
}

.oico-nav-links > li > a:hover {
  color: #60a5fa;
}

/* ── SUBMENU ────────────────────────────────────────────── */

.oico-nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  cursor: pointer;
}

.oico-nav-parent__label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #f8fafc;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: color 0.15s ease;
}

.oico-nav-parent:hover .oico-nav-parent__label {
  color: #60a5fa;
}

.oico-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.2s ease;
}

.oico-nav-parent:hover .oico-submenu-toggle,
.oico-submenu-toggle[aria-expanded="true"] {
  opacity: 1;
  color: #60a5fa;
}

.oico-submenu-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.oico-submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.25rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  border-left: 1px solid #1e293b;
  margin-left: 0.25rem;
}

.oico-submenu.is-open {
  max-height: 400px;
  padding-bottom: 0.35rem;
}

.oico-submenu li {
  margin: 0;
  padding: 0;
}

.oico-submenu a {
  display: block;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: #94a3b8;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s ease;
}

.oico-submenu a:hover {
  color: #f8fafc;
}

/* Divider between menu and CTA */
.oico-nav-cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #1e40af;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  transition: background 0.2s ease;
  border: none;
  align-self: stretch;
  text-align: center;
}

.oico-nav-cta:hover {
  background: #2563eb;
  color: #ffffff;
}

.oico-nav-meta {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid #1e293b;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.8;
}

.oico-nav-meta a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.oico-nav-meta a:hover {
  color: #60a5fa;
}

/* ── FOOTER ──────────────────────────────────────────────── */

.oico-footer {
  background: #06070c;
  border-top: 1px solid #1e293b;
  font-family: 'DM Sans', sans-serif;
}

.oico-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "brand  nav"
    "brand  payments";
  gap: 1.5rem 2rem;
  align-items: start;
}

.oico-footer__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.oico-footer__logo svg,
.oico-footer__logo img {
  width: auto;
  display: block;
}

.oico-footer svg.oico-footer__logo {
  height: 50px;
  width: 108px;
}

.oico-footer img.oico-footer__logo {
  height: 50px;
  width: 108px;  
}

.oico-footer__slogan {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
}

.oico-footer__nav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  align-items: center;
}

.oico-footer__nav a {
  font-size: 0.875rem;
  color: #f8fafc;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.oico-footer__nav a:hover {
  color: #60a5fa;
}

.oico-footer__contact {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.8;
  text-align: left;
  margin-top: 0.5rem;
}

.oico-footer__contact p {
  margin: 0;
}

.oico-footer__contact a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.15s ease;
}

.oico-footer__contact a:hover {
  color: #60a5fa;
}

.oico-footer__payments {
  grid-area: payments;
  display: flex;
  justify-content: flex-end;
  align-self: end;
}

.oico-footer__payments-img {
  max-width: 300px !important;
  width: 100%;
  height: auto;
  opacity: 0.85;
}

.oico-footer__bottom {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.oico-footer__copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: #64748b;
  letter-spacing: 0.05em;
}

.oico-footer__copy a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.oico-footer__copy a:hover {
  color: #cbd5e1;
}

/* Ångerrätt trigger — a wcl-contact-button rendered inline in the legal bar.
   Strip the button chrome so it reads as another footer link. */
.oico-footer__bottom .wcl-contact-button {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.oico-footer__bottom .wcl-contact-button:hover {
  color: #cbd5e1;
}

/* ── ACCOUNT PAGE ──────────────────────────────────────── */
/* Astra sets body{position:relative} and its container system expands body to its
   max-width (1600px). width:100% pins body to the viewport so margin:0 auto on
   child containers centers against the viewport, not the 1600px body. */

body.oico-page {
  overflow-x: hidden;
  width: 100%;
}

.oico-account {
  background: #ffffff;
  color: #1a1a2e;
  min-height: 50vh;
}

/* .woocommerce and .woocommerce-MyAccount-content must be full-width so
   .wcl-my-account-container can center itself via margin:0 auto.
   WCL's own CSS caps .woocommerce-MyAccount-content at 1200px which makes
   .wcl-my-account-container (also 1200px) fill 100% of its parent with no
   room to center. Override both to full-width. */
.oico-account .woocommerce,
.oico-account .woocommerce-MyAccount-content {
  max-width: none !important;
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* .wcl-account-header uses width:100vw + margin-left:calc(-50vw+50%) for full-bleed.
   That trick centers relative to its containing block width. With a full-width
   parent the math is: -50vw + 50% = 0, so header spans exactly the viewport. */

/* Login page: centre the WooCommerce login form and related elements.
   Uses explicit selectors because the elements may sit in .woocommerce or
   .woocommerce-MyAccount-content depending on WC template version. */
.oico-account .u-columns,
.oico-account #customer_login,
.oico-account .woocommerce-form-login,
.oico-account .woocommerce-notices-wrapper {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

/* Fix WooCommerce show-password button — without position:relative on .password-input
   the button's position:absolute anchors to the page right edge */
.oico-account .password-input {
  position: relative;
  display: block;
}

/* .wcl-my-account-container is the sole centering element — it centers in the
   full-width .woocommerce-MyAccount-content (viewport width after above override) */
.oico-account .wcl-my-account-container {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

/* WCL grid uses 58% + 42% percentage tracks plus a 32px gap. Percentage tracks
   resolve against the container content-box, so total = content + 32px gap →
   grid overflows by 32px and consumes the right padding. Fix: fr units subtract
   the gap before distributing column widths, so 58fr + 42fr + 32px gap = content. */
@media (min-width: 922px) {
  .oico-account .wcl-my-account-layout {
    grid-template-columns: 58fr 42fr;
  }
}

/* Hide Astra's own footer bar and scroll-to-top on Oico pages */
.oico-page .site-footer,
.oico-page .ast-footer-overlay,
.oico-page .ast-small-footer,
.oico-page #colophon,
.oico-page #ast-scroll-top,
.oico-page .ast-scroll-top-icon,
.oico-page .scroll-to-top {
  display: none !important;
}

/* Hide visible elements rendered after .oico-footer by wp_footer() (e.g. Astra scroll-to-top) */
.oico-footer ~ div:not(.wcl-contact-overlay):not(#wpadminbar):not(.wcl-tooltip),
.oico-footer ~ a,
.oico-footer ~ span,
.oico-footer ~ p,
.oico-footer ~ section,
.oico-footer ~ nav {
  display: none !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */

@media (max-width: 921px) {
  .oico-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "payments";
    gap: 1.5rem;
    padding: 2rem 1.25rem 1rem;
  }

  .oico-footer__nav {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .oico-footer__nav a {
    display: block;
    padding: 0.35rem 0;
    font-size: 1rem;
  }

  .oico-footer__payments {
    justify-content: flex-start;
  }

  .oico-footer__bottom {
    display: none;
  }
}