/*
Theme Name: SHELDesign Ona Child
Theme URI: https://abpaykar.de
Author: Shahab Abpaykar / SHELDesign Architektur Studio
Author URI: https://abpaykar.de
Description: Custom child theme for SHELDesign Architektur Studio, based on Ona. Minimal architectural coming-soon landing page for Architekturbüro Shahab Abpaykar in Magdeburg.
Requires at least: 6.0
Tested up to: 6.9.1
Requires PHP: 7.4
Version: 1.0.1
Template: ona
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sheldesign-ona-child
Tags: full-site-editing, architecture, portfolio, minimal, block-patterns, wide-blocks, custom-colors, custom-logo, editor-style
*/

:root {
  --shel-black: #111111;
  --shel-white: #F7F5F2;
  --shel-paper: #FFFFFF;
  --shel-orange: #C96A2B;
  --shel-gray: #6F6A64;
  --shel-line: #DED8D1;
}

html, body {
  margin: 0;
  background: var(--shel-white);
  color: var(--shel-black);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

body .wp-site-blocks {
  padding: 0;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.shel-header {
  background: var(--shel-white);
  border-bottom: 1px solid var(--shel-line);
}

.shel-logo {
  letter-spacing: 0.18em;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.shel-logo span {
  letter-spacing: 0;
  font-weight: 300;
}

.shel-sublogo {
  letter-spacing: 0.42em;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.55rem;
}

.shel-hero-fixed {
  min-height: calc(100vh - 125px);
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-color: var(--shel-white);
}

.shel-hero-fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(247,245,242,0.98) 0%, rgba(247,245,242,0.91) 34%, rgba(247,245,242,0.34) 57%, rgba(247,245,242,0.0) 74%),
    url("./assets/images/hero-architecture.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.shel-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.shel-hero-content {
  max-width: 620px;
  padding: 80px 0;
  color: var(--shel-black);
}

.shel-hero-content h1 {
  font-size: clamp(3.8rem, 8vw, 7.5rem);
  line-height: 1.03;
  letter-spacing: -0.055em;
  margin: 0 0 28px;
  font-weight: 800;
  color: var(--shel-black);
}

.shel-dot {
  color: var(--shel-orange);
}

.shel-accent-line {
  width: 72px;
  height: 2px;
  background: var(--shel-black);
  margin: 0 0 36px;
}

.shel-hero-content p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 22px;
  color: var(--shel-black);
}

.shel-call-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 58px;
}

.shel-call-icon {
  width: 58px;
  height: 58px;
  border: 1.5px solid var(--shel-black);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}

.shel-phone-label {
  font-size: 1rem !important;
  margin: 0 0 4px !important;
}

.shel-phone-number {
  display: inline-block;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--shel-black);
}

.shel-time {
  font-size: 1rem !important;
  margin-top: 8px !important;
  color: var(--shel-black) !important;
}

.shel-copyright {
  position: absolute;
  left: max(40px, calc((100vw - 1180px) / 2));
  bottom: 36px;
  z-index: 2;
  font-size: 0.95rem;
  color: var(--shel-black);
}

.shel-footer {
  display: none;
}

@media (max-width: 782px) {
  .shel-header {
    padding: 34px 28px !important;
  }

  .shel-logo {
    font-size: 2.35rem !important;
  }

  .shel-sublogo {
    font-size: 0.68rem;
    letter-spacing: 0.32em;
  }

  .shel-hero-fixed {
    min-height: calc(100vh - 154px);
  }

  .shel-hero-fixed::before {
    background-image:
      linear-gradient(180deg, rgba(247,245,242,0.98) 0%, rgba(247,245,242,0.94) 42%, rgba(247,245,242,0.56) 72%, rgba(247,245,242,0.12) 100%),
      url("./assets/images/hero-architecture.png");
    background-position: center right;
  }

  .shel-hero-inner {
    width: calc(100% - 56px);
    align-items: flex-start;
  }

  .shel-hero-content {
    padding-top: 70px;
    max-width: 100%;
  }

  .shel-hero-content h1 {
    font-size: clamp(3.3rem, 17vw, 5.2rem);
    line-height: 1.02;
    color: var(--shel-black);
  }

  .shel-hero-content p {
    font-size: 1.05rem;
    color: var(--shel-black);
  }

  .shel-call-row {
    align-items: flex-start;
    gap: 14px;
    margin-top: 50px;
  }

  .shel-call-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
  }

  .shel-phone-number {
    font-size: 1.25rem;
  }

  .shel-copyright {
    left: 28px;
    bottom: 26px;
    font-size: 0.85rem;
  }
}