/*
Theme Name: ABC Home Brand
Theme URI: https://abchome.bg
Description: Child theme for Minimal Shop with the ABC Home brand system.
Author: ABC Home
Author URI: https://abchome.bg
Template: minimal-shop
Version: 0.1.2
Text Domain: abc-home-brand
*/

/*
 * ABC Home brand direction
 * ------------------------
 * The façade is translated into a quieter digital palette: warm red,
 * construction yellow, steel blue and a warm off-white canvas. The angled
 * rails are intentionally concentrated in the header, hero and section
 * dividers so product content stays calm and easy to scan.
 */

:root {
  --color-header-bg: #fbfaf6;
  --color-header-brd: #dce2e7;
  --color-accent: #d84d57;
  --color-accent-h: #b93642;
  --color-accent-lt: #f9e8e9;
  --color-bg: #fffdf9;
  --color-surface: #f4f1eb;
  --color-surface-2: #e8e5df;
  --color-border: #d8dee3;
  --color-text: #243443;
  --color-muted: #66727d;
  --color-danger: #c83f49;
  --color-success: #34745f;
  --abc-red: #d84d57;
  --abc-red-deep: #b93642;
  --abc-yellow: #dfc65b;
  --abc-blue: #4c7898;
  --abc-blue-deep: #294c67;
  --abc-navy: #21384c;
  --abc-cream: #f5f0e7;
  --abc-blush: #f6e8e6;
  --abc-mist: #e8eff2;
  --radius: 2px;
  --radius-lg: 4px;
  --shadow-sm: 0 2px 8px rgba(33, 56, 76, .07);
  --shadow-md: 0 14px 34px rgba(33, 56, 76, .13);
}

body {
  background: var(--color-bg);
}

/* Header: full slogan logo on a calm light field. */
.site-header {
  background: var(--color-header-bg);
  box-shadow: 0 3px 18px rgba(33, 56, 76, .1);
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, var(--abc-red) 0 52%, var(--abc-yellow) 52% 70%, var(--abc-blue) 70% 100%) 1;
}

.header-inner {
  height: 82px;
  gap: clamp(.8rem, 2vw, 1.6rem);
}

.site-logo {
  min-width: clamp(190px, 18vw, 260px);
  color: var(--abc-navy);
}

.site-logo img,
.site-logo .custom-logo {
  display: block;
  width: auto;
  height: clamp(52px, 4vw, 62px);
  max-width: min(260px, 24vw);
  object-fit: contain;
}

.header-search form {
  background: #fff;
  border-color: #cbd5dc;
  box-shadow: inset 4px 0 0 var(--abc-blue);
}

.header-search form:focus-within {
  border-color: var(--abc-blue);
  box-shadow: inset 4px 0 0 var(--abc-red), 0 0 0 3px rgba(76, 120, 152, .12);
}

.header-search input[type="search"],
.header-search form:focus-within input[type="search"] {
  color: var(--color-text);
}

.header-search input[type="search"]::placeholder {
  color: #818c95;
}

.header-action-btn {
  color: var(--abc-navy);
}

.header-action-btn:hover {
  background: var(--abc-mist);
  color: var(--abc-red-deep);
}

.nav-toggle {
  color: var(--abc-navy);
  border-color: #aebbc5;
}

.site-nav {
  top: 87px;
  background: var(--abc-navy);
  border-bottom: 4px solid var(--abc-yellow);
  box-shadow: 0 2px 0 var(--abc-blue);
}

.primary-nav a {
  color: rgba(255,255,255,.88);
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 -3px 0 var(--abc-yellow);
}

.cat-nav-toggle {
  background: var(--abc-red);
  border-right-color: var(--abc-red-deep);
}

.cat-nav-list-col,
.mobile-nav-wrap {
  background: var(--abc-navy);
}

.cat-nav-sub-col {
  background: #f8f6f1;
}

/* Home hero: façade-inspired rails, with quieter colours than the building. */
.home-hero {
  min-height: clamp(520px, calc(100vh - 126px), 720px);
  color: var(--color-text);
  background: var(--abc-cream);
}

.home-hero-slide-warm {
  background: linear-gradient(118deg, #f8f3eb 0%, #f5e5e2 58%, #e7d7c9 130%);
}

.home-hero-slide-steel {
  background: linear-gradient(118deg, #f8f5ef 0%, #e5edf1 58%, #cbdce5 130%);
}

.home-hero-slide-green {
  background: linear-gradient(118deg, #f7f3e9 0%, #e7eee8 58%, #d5ddc6 130%);
}

.home-hero-slide::before {
  background-image:
    linear-gradient(rgba(41, 76, 103, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 76, 103, .045) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.home-hero-slide::after {
  content: "";
  position: absolute;
  right: -5%;
  top: 0;
  width: 55%;
  height: 15px;
  background: linear-gradient(
    to bottom,
    var(--abc-red) 0 5px,
    transparent 5px 6px,
    var(--abc-yellow) 6px 10px,
    transparent 10px 11px,
    var(--abc-blue) 11px 15px
  );
  transform: skewX(-38deg);
  transform-origin: top right;
  opacity: .92;
}

.home-hero-inner {
  padding-block: 4.5rem 7rem;
}

.home-hero .home-eyebrow,
.home-section-kicker {
  color: var(--abc-red-deep);
}

.home-hero-heading {
  color: var(--abc-navy);
  letter-spacing: -.045em;
}

.home-hero-copy p {
  color: #566675;
}

.home-hero-cta {
  background: var(--abc-red);
  box-shadow: 7px 7px 0 rgba(223, 198, 91, .75);
}

.home-hero-cta:hover {
  background: var(--abc-red-deep);
  box-shadow: 10px 7px 0 rgba(76, 120, 152, .55);
}

.home-hero-art {
  min-height: 390px;
}

.home-art-disc {
  border-color: rgba(41, 76, 103, .2);
  box-shadow:
    0 0 0 46px rgba(216, 77, 87, .045),
    0 0 0 92px rgba(76, 120, 152, .04);
}

.home-art-disc::before,
.home-art-disc::after {
  border-color: rgba(41, 76, 103, .08);
}

.home-art-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(41, 76, 103, .38), transparent);
}

.home-art-logo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(31vw, 410px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(12px 14px 0 rgba(41, 76, 103, .08));
}

.home-art-rails {
  position: absolute;
  z-index: 1;
  top: 28%;
  right: -4%;
  width: 82%;
  height: 42%;
  transform: skewX(-23deg) rotate(-7deg);
  opacity: .68;
}

.home-art-rails::before,
.home-art-rails::after,
.home-art-rails span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
}

.home-art-rails::before { top: 0; background: var(--abc-red); }
.home-art-rails span { top: 18px; background: var(--abc-yellow); }
.home-art-rails::after { top: 35px; background: var(--abc-blue); }

.home-hero-controls {
  color: var(--abc-navy);
}

.home-hero-dot,
.home-hero-arrows button {
  border-color: rgba(33, 56, 76, .34);
  color: var(--abc-navy) !important;
}

.home-hero-dot { background: rgba(33, 56, 76, .24); }
.home-hero-dot.is-active { background: var(--abc-red); }
.home-hero-arrows button:hover { background: var(--abc-navy); color: #fff !important; }

.home-value-strip {
  position: relative;
  background: #fffdf9;
  border-bottom-color: var(--color-border);
}

.home-value-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  background: linear-gradient(to bottom, var(--abc-red) 0 34%, var(--abc-yellow) 34% 66%, var(--abc-blue) 66% 100%);
}

.home-collection,
.home-brands,
.home-social {
  position: relative;
}

.home-collection::before,
.home-brands::before,
.home-social::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(1.25rem, calc((100% - var(--max-w)) / 2 + 1.25rem));
  width: 92px;
  height: 6px;
  background: linear-gradient(90deg, var(--abc-red) 0 45%, var(--abc-yellow) 45% 68%, var(--abc-blue) 68% 100%);
  transform: skewX(-34deg);
}

.home-collection-bestsellers { background: var(--abc-cream); }
.home-collection-new { background: #fffdf9; }
.home-collection-sale { background: var(--abc-blue-deep); color: #fff; }
.home-brands { background: #f3eedb; }
.home-social { background: var(--abc-mist); }

.home-collection-sale .home-section-kicker { color: #f0d977; }
.home-collection-sale .home-section-heading > a { color: #fff; }

.home-section-heading h2 {
  color: var(--abc-navy);
}

.home-section-heading-light h2 { color: #fff; }

.home-brand-card,
.abc-homepage .woocommerce ul.products li.product {
  border-radius: 2px;
  border-color: #d6dde2;
  box-shadow: var(--shadow-sm);
}

.home-brand-card {
  background: rgba(255,255,255,.72);
}

.home-brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 62px;
  padding: .35rem .55rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e4e7;
  border-radius: 2px;
}

.home-brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}

/* The official MTX lockup supplied by the brand is white. */
.home-brand-logo-wrap-mtx {
  background: var(--abc-blue-deep);
  border-color: var(--abc-blue-deep);
}

.home-brand-logo-wrap-marsel .home-brand-logo {
  max-height: 56px;
}

.home-brand-logo-wrap-vertex {
  padding-inline: .25rem;
}

.home-brand-card:hover,
.abc-homepage .woocommerce ul.products li.product:hover {
  border-color: var(--abc-blue);
  box-shadow: 8px 8px 0 rgba(76, 120, 152, .12);
}

.home-brand-mark {
  color: var(--abc-blue-deep);
  background: #e2e9ea;
  border-color: #c7d2d8;
}

.home-social-card {
  border-radius: 2px;
}

.home-social-facebook { background: linear-gradient(135deg, #547e9c, #355f7d); }
.home-social-instagram { background: linear-gradient(135deg, #b45d70, #d48a6d 58%, #d8bc58); }
.home-social-tiktok { background: linear-gradient(135deg, var(--abc-navy), #49687e); }

/* Footer: the logo stays readable on a dedicated light brand plate. */
.site-footer {
  position: relative;
  background: var(--abc-navy);
  padding-top: 3.3rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: linear-gradient(90deg, var(--abc-red) 0 52%, var(--abc-yellow) 52% 70%, var(--abc-blue) 70% 100%);
}

.footer-brand-logo-wrap {
  display: inline-flex;
  max-width: 250px;
  margin-bottom: 1.35rem;
  padding: .55rem .7rem;
  background: #fffdf9;
  border-left: 5px solid var(--abc-red);
  box-shadow: 6px 6px 0 rgba(223, 198, 91, .34);
}

.footer-brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.footer-col h4 {
  color: #fff;
}

.footer-eu-funding {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .site-logo { min-width: 175px; }
  .site-logo img,
  .site-logo .custom-logo { max-width: 205px; }
  .home-art-logo { width: min(35vw, 350px); }
}

@media (max-width: 768px) {
  .site-header { border-top-width: 4px; }
  .header-inner { padding-block: .6rem; }
  .site-logo { min-width: 0; }
  .site-logo img,
  .site-logo .custom-logo {
    height: 48px;
    max-width: 175px;
  }
  .home-hero { min-height: 620px; }
  .home-hero-slide::after { width: 72%; }
  .home-hero-art {
    right: -12%;
    bottom: 4%;
    width: 62%;
    opacity: .13;
  }
  .home-art-logo { width: 330px; max-width: 82vw; }
}

@media (max-width: 520px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav-toggle { order: 1; }
  .site-logo { order: 2; }
  .header-actions { order: 3; }
  .header-search { order: 4; }
  .site-logo img,
  .site-logo .custom-logo { height: 42px; max-width: 145px; }
  .header-action-label { display: none; }
  .home-hero-heading { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .footer-brand-logo-wrap { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-cta,
  .home-brand-card,
  .abc-homepage .woocommerce ul.products li.product {
    transition: none;
  }
}