/* ============================================================
   RYANWAT COMPONENTS — v2.0
   File: assets/css/components.css

   Reusable UI components: buttons, nav, mobile menu,
   section labels, tags, and form elements.
   All values reference tokens.css variables only.
   No section-specific layout here — that lives in sections.css.
   ============================================================ */


/* ── BUTTONS ──────────────────────────────────────────────────
   Base .rw-btn applies to <a> and <button> elements.
   Never set display on the tag — always inline-flex.
   All size/weight/spacing from tokens.
────────────────────────────────────────────────────────────── */

.rw-btn {
  font-family:      var(--font-body);
  font-weight:      600;
  font-size:        var(--text-sm);
  letter-spacing:   0.025em;
  padding:          0.7rem 1.75rem;
  border-radius:    var(--radius-sm);
  border:           2px solid transparent;
  cursor:           pointer;
  transition:       background var(--transition-base),
                    border-color var(--transition-base),
                    color var(--transition-base),
                    transform var(--transition-base),
                    box-shadow var(--transition-base);
  display:          inline-flex;
  align-items:      center;
  gap:              0.4rem;
  text-decoration:  none;
  line-height:      1;
  white-space:      nowrap;
  position:         relative;
}

/* Primary — amber fill */
.rw-btn--accent {
  background:   var(--accent);
  color:        var(--bg-dark);
  border-color: var(--accent);
}

.rw-btn--accent:hover {
  background:   var(--accent-hover);
  border-color: var(--accent-hover);
  color:        var(--bg-dark);
  transform:    translateY(-1px);
  box-shadow:   0 4px 12px rgba(232, 150, 13, 0.35);
}

.rw-btn--accent:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
}

/* Navy solid — for light backgrounds */
.rw-btn--navy {
  background:   var(--text-primary);
  color:        var(--text-inverse);
  border-color: var(--text-primary);
}

.rw-btn--navy:hover {
  background:   var(--bg-dark);
  border-color: var(--bg-dark);
  color:        var(--text-inverse);
  transform:    translateY(-1px);
}

/* Outline — navy border on light background */
.rw-btn--outline {
  background:   transparent;
  color:        var(--text-primary);
  border-color: var(--border-mid);
}

.rw-btn--outline:hover {
  border-color: var(--accent);
  color:        var(--accent);
  transform:    translateY(-1px);
}

/* Ghost — outline on dark background */
.rw-btn--ghost {
  background:   transparent;
  color:        var(--text-inverse);
  border-color: rgba(238, 240, 246, 0.35);
}

.rw-btn--ghost:hover {
  background:   rgba(255, 255, 255, 0.08);
  border-color: rgba(238, 240, 246, 0.6);
}


/* ── SECTION LABEL ────────────────────────────────────────────
   Eyebrow text with the signature amber datum line before it.
   Used above every section title.
────────────────────────────────────────────────────────────── */

.rw-label {
  font-family:    var(--font-display);
  font-weight:    600;
  font-size:      var(--text-sm);
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  margin-bottom:  var(--space-4);
}

/* The datum line — the page's signature structural mark */
.rw-label::before {
  content:     '';
  display:     block;
  width:       28px;
  height:      2px;
  background:  var(--accent-line);
  flex-shrink: 0;
}


/* ── TAGS / PILLS ─────────────────────────────────────────────
   Used in project footers, service panels, sectors cloud.
────────────────────────────────────────────────────────────── */

.rw-tag {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding:        0.3rem 0.85rem;
  border-radius:  var(--radius-pill);
  border:         1.5px solid var(--border-mid);
  color:          var(--text-secondary);
  background:     var(--bg-canvas);
  transition:     all var(--transition-base);
  display:        inline-block;
  text-decoration: none;
}

.rw-tag:hover {
  border-color: var(--accent);
  color:        var(--accent);
  background:   var(--accent-light);
}


/* ── NAVIGATION ───────────────────────────────────────────────
   Always dark. Never transparent. Fixed to top.
   .is-scrolled adds shadow and border (after 60px scroll).
   JS (nav.js) handles class toggling.
────────────────────────────────────────────────────────────── */

.rw-nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  height:     68px;
  background: var(--bg-nav);
  z-index:    var(--z-nav);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base),
              box-shadow   var(--transition-base);
}

.rw-nav.is-scrolled {
  border-bottom-color: rgba(197, 205, 216, 0.2);
  box-shadow:          0 2px 20px rgba(14, 23, 42, 0.35);
}

.rw-nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          68px;
  gap:             var(--space-8);
}

.rw-nav__logo {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  text-decoration: none;
  line-height:     0;
}

.rw-nav__logo-img {
  display: block;
  height:  48px;
  width:   auto;
}

/* Desktop nav links — centered */
.rw-nav__links {
  display:     flex;
  align-items: center;
  gap:         var(--space-8);
  list-style:  none;
  margin:      0;
  padding:     0;
}

.rw-nav__link {
  font-family:    var(--font-body);
  font-weight:    500;
  font-size:      var(--text-sm);
  color:          var(--text-inverse);
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity:        0.75;
  transition:     opacity var(--transition-fast),
                  color   var(--transition-fast);
  padding-bottom: 3px;
  border-bottom:  2px solid transparent;
}

.rw-nav__link:hover {
  opacity:              1;
  border-bottom-color:  var(--accent);
}

.rw-nav__link.is-active {
  opacity:              1;
  border-bottom-color:  var(--accent);
}

/* Mobile trigger — hidden on desktop, shown on mobile via responsive.css */
.rw-nav__mobile-trigger {
  display:     none;
  align-items: center;
  gap:         var(--space-2);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     var(--space-2);
}

.rw-nav__trigger-label {
  font-family:    var(--font-display);
  font-weight:    600;
  font-size:      var(--text-xs);
  color:          var(--text-inverse);
  letter-spacing: 0.18em;
}

.rw-nav__trigger-mark {
  display:    block;
  width:      18px;
  height:     2px;
  background: var(--accent-line);
}


/* ── MOBILE MENU ──────────────────────────────────────────────
   Full-screen dark overlay. Slides in from right.
   Transform approach — always in DOM, animated off-screen.
   .is-open reveals it; focus-trap managed by nav.js.
────────────────────────────────────────────────────────────── */

.rw-mobile-menu {
  position:   fixed;
  inset:      0;
  background: var(--bg-dark);
  z-index:    calc(var(--z-nav) + 10);
  display:    flex;
  flex-direction: column;
  padding:    var(--space-8) var(--container-pad) var(--space-12);
  transform:  translateX(100%);
  transition: transform var(--transition-slow);
  visibility: hidden;
  overflow-y: auto;
}

.rw-mobile-menu.is-open {
  transform:  translateX(0);
  visibility: visible;
}

.rw-mobile-menu__inner {
  display:        flex;
  flex-direction: column;
  height:         100%;
  padding-top:    var(--space-16);
}

.rw-mobile-menu__close {
  position:       absolute;
  top:            var(--space-6);
  right:          var(--container-pad);
  font-family:    var(--font-display);
  font-weight:    600;
  font-size:      var(--text-xs);
  color:          var(--text-inverse);
  letter-spacing: 0.18em;
  background:     none;
  border:         none;
  cursor:         pointer;
  opacity:        0.65;
  transition:     opacity var(--transition-fast);
  padding:        var(--space-2);
}

.rw-mobile-menu__close:hover {
  opacity: 1;
}

.rw-mobile-menu__links {
  list-style:     none;
  padding:        0;
  margin:         0 0 var(--space-12);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.rw-mobile-menu__link {
  font-family:     var(--font-display);
  font-weight:     700;
  font-size:       var(--text-4xl);
  color:           var(--text-inverse);
  text-decoration: none;
  line-height:     1.15;
  display:         block;
  padding:         var(--space-2) 0;
  opacity:         0.65;
  transition:      opacity      var(--transition-fast),
                   color        var(--transition-fast),
                   padding-left var(--transition-base);
}

.rw-mobile-menu__link:hover {
  opacity:      1;
  color:        var(--accent);
  padding-left: var(--space-3);
}

.rw-mobile-menu__cta {
  margin-top: auto;
  align-self:  flex-start;
}


/* ── CONTACT FORM ─────────────────────────────────────────────
   Form is a <div>, not <form>. Styles for dark contact section.
   Inputs use --surface-dark background; amber focus highlight.
────────────────────────────────────────────────────────────── */

.rw-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.rw-form__group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.rw-form__label {
  font-family:    var(--font-body);
  font-weight:    500;
  font-size:      var(--text-sm);
  color:          var(--text-inverse);
  letter-spacing: 0.015em;
}

.rw-form__required {
  color:       var(--accent);
  margin-left: var(--space-1);
}

.rw-form__input,
.rw-form__textarea {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  color:       var(--text-inverse);
  background:  var(--surface-dark);
  border:      1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding:     0.8rem 1rem;
  width:       100%;
  outline:     none;
  transition:  border-color var(--transition-fast),
               box-shadow   var(--transition-fast);
}

.rw-form__input::placeholder,
.rw-form__textarea::placeholder {
  color:   var(--text-inverse-muted);
  opacity: 0.55;
}

.rw-form__input:focus,
.rw-form__textarea:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(232, 150, 13, 0.15);
}

.rw-form__input.is-invalid,
.rw-form__textarea.is-invalid {
  border-color: #E84444;
}

.rw-form__input.is-invalid:focus,
.rw-form__textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(232, 68, 68, 0.15);
}

.rw-form__textarea {
  resize:     vertical;
  min-height: 120px;
  line-height: 1.6;
}

.rw-form__error {
  font-size:   var(--text-xs);
  color:       #E84444;
  min-height:  1.2em;
  display:     block;
  line-height: 1.4;
}

.rw-form__submit {
  align-self:  flex-start;
  margin-top:  var(--space-2);
}

.rw-form__success {
  background:    rgba(232, 150, 13, 0.1);
  border:        1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding:       var(--space-4) var(--space-6);
  color:         var(--text-inverse);
  font-size:     var(--text-sm);
  line-height:   1.6;
}

.rw-footer__logo {
  height: 40px;    /* Slightly smaller than nav is common in footers */
  width: auto;
  display: block;
}


/* ── FIELD PHOTO FRAME ────────────────────────────────────────
   Site-documentation treatment for real project photography.
   Two amber corner pins (top-left + bottom-right only — an
   asymmetric survey reference mark, not a decorative border)
   plus a project reference tab. Used in hero + featured project.
────────────────────────────────────────────────────────────── */

.rw-field-photo {
  position:   relative;
  overflow:   hidden;
  background: var(--bg-dark);
  width:      100%;
  height:     100%;
}

.rw-field-photo__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transform:  scale(1.06);
  transition:
    opacity   var(--hero-cycle-fade) ease,
    transform calc(var(--hero-cycle-duration) + var(--hero-cycle-fade)) linear;
}

.rw-field-photo__img.is-active {
  opacity:   1;
  transform: scale(1);
}

/* Corner pins — top-left and bottom-right only */
.rw-field-photo::before,
.rw-field-photo::after {
  content:  '';
  position: absolute;
  width:    22px;
  height:   22px;
  border:   2px solid var(--accent-line);
  z-index:  var(--z-raised);
  pointer-events: none;
}

.rw-field-photo::before {
  top:  var(--space-3);
  left: var(--space-3);
  border-right:  none;
  border-bottom: none;
}

.rw-field-photo::after {
  bottom: var(--space-3);
  right:  var(--space-3);
  border-left: none;
  border-top:  none;
}

/* Project reference tab — bottom-left, sits over the image */
.rw-field-photo__tag {
  position:  absolute;
  bottom:    0;
  left:      0;
  z-index:   var(--z-raised);
  background: var(--bg-dark);
  color:      var(--text-inverse);
  font-family: var(--font-display);
  font-weight: 600;
  font-size:   var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
}

.rw-field-photo__tag::before {
  content: '';
  display: inline-block;
  width:   6px;
  height:  6px;
  border-radius: 50%;
  background: var(--accent-line);
  margin-right: var(--space-2);
  vertical-align: middle;
}