/* =====================================================================
   DayrAban — visual modernization layer  (OPTIONAL / REVERTIBLE)

   This file only restyles. Every responsive/mobile fix lives in Site.css,
   so removing the <link> to this file in Views/Shared/_Layout.cshtml
   reverts the site to its previous look while the phone layout keeps
   working. Nothing else depends on this file.

   What it changes, and why:
     1. Elevation   — layered, low-contrast shadows instead of one heavy drop
     2. Focus       — visible :focus-visible rings (the old CSS had none)
     3. Type        — tighter headline tracking, balanced wrapping, 68ch measure
     4. Surfaces    — softer radii, hairline borders, frosted sticky nav
     5. Motion      — one easing curve, short durations, honours reduced-motion
     6. Forms       — larger fields, clear focus, 16px text (no iOS zoom)
   ===================================================================== */

:root {
    /* Layered elevation: two offset shadows read as real depth, where a single
       large blur reads as a smudge. */
    --da-elev-1: 0 1px 2px rgba(34, 24, 14, .06), 0 2px 6px rgba(34, 24, 14, .05);
    --da-elev-2: 0 2px 4px rgba(34, 24, 14, .05), 0 8px 20px rgba(34, 24, 14, .09);
    --da-elev-3: 0 4px 8px rgba(34, 24, 14, .06), 0 16px 40px rgba(34, 24, 14, .13);

    --da-ease: cubic-bezier(.2, .7, .3, 1);   /* one curve for the whole site */
    --da-ring: 0 0 0 3px rgba(181, 83, 42, .35);

    --da-radius: 10px;
    --da-radius-lg: 16px;
}

/* ---------------------------------------------------------------------
   1. Focus visibility — keyboard users could not see where they were.
   :focus-visible keeps mouse clicks ring-free.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--da-terracotta);
    outline-offset: 2px;
    border-radius: var(--da-radius);
}
.da-nav a:focus-visible,
.da-nav button:focus-visible,
.da-drawer a:focus-visible,
.da-drawer button:focus-visible {
    outline-color: var(--da-gold);
}

/* ---------------------------------------------------------------------
   2. Type — headlines get tighter tracking and balanced wrapping; body copy
   gets a readable measure. Long lines are the classic "unstyled" tell.
   --------------------------------------------------------------------- */
.da-page-title,
.da-list-head h1,
.da-detail__name,
.da-hero-cols__title,
.da-teaser__title,
.da-tile__name,
.da-ann__title,
.da-formcard__title {
    letter-spacing: -.01em;
    text-wrap: balance;      /* avoids a single orphaned word on the last line */
}

.da-hist-intro,
.da-hero-lead,
.da-ann__body,
.da-teaser__text {
    max-width: 68ch;         /* ~68 characters is the comfortable reading measure */
}
.da-hero-cols__text .da-hero-lead { max-width: 56ch; }

/* Section titles: swap the hard 3px gold underline for a short accent rule. */
.da-page-title {
    border-bottom: 0;
    padding-bottom: 0;
    position: relative;
    margin-bottom: var(--da-6);
}
.da-page-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -12px;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--da-terracotta), var(--da-gold));
}

/* ---------------------------------------------------------------------
   3. Surfaces — softer panels, hairline borders, layered depth.
   --------------------------------------------------------------------- */
.page:not(:has(.header)) {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--da-line);
    border-radius: var(--da-radius-lg);
    box-shadow: var(--da-elev-2);
}

.da-card,
.da-teaser,
.da-formcard,
.da-ann {
    border-radius: var(--da-radius-lg);
    box-shadow: var(--da-elev-1);
    transition: transform .25s var(--da-ease), box-shadow .25s var(--da-ease);
}
.da-card:hover,
.da-teaser:hover {
    transform: translateY(-3px);
    box-shadow: var(--da-elev-3);
}

/* The gold top-rule on teasers becomes a gradient hairline. */
.da-teaser {
    border-top: 1px solid var(--da-line);
    position: relative;
    overflow: hidden;
}
.da-teaser::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--da-terracotta), var(--da-gold));
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform .3s var(--da-ease);
}
.da-teaser:hover::before { transform: scaleX(1); }

/* ---------------------------------------------------------------------
   4. Navigation — frosted sticky bar, animated link underline.
   --------------------------------------------------------------------- */
.da-nav {
    background: color-mix(in srgb, var(--da-olive) 92%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    box-shadow: var(--da-elev-1);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Underline grows from the centre instead of snapping on. */
.da-nav__links a {
    position: relative;
    border-bottom: 0;
    padding-bottom: 4px;
}
.da-nav__links a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--da-gold);
    transform: scaleX(0);
    transition: transform .25s var(--da-ease);
}
.da-nav__links a:hover::after { transform: scaleX(1); }

.da-drawer { box-shadow: var(--da-elev-3); }
.da-drawer-scrim { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* ---------------------------------------------------------------------
   5. Buttons — subtle lift, consistent easing, no harsh jump.
   --------------------------------------------------------------------- */
.da-btn {
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--da-elev-1);
    transition: background .2s var(--da-ease), transform .15s var(--da-ease),
                box-shadow .2s var(--da-ease);
}
.da-btn:hover { transform: translateY(-1px); box-shadow: var(--da-elev-2); }
.da-btn:active { transform: translateY(0); box-shadow: var(--da-elev-1); }
.da-btn--outline,
.da-btn--ghost,
.da-btn--ghost-dark { box-shadow: none; }
.da-btn--outline:hover,
.da-btn--ghost-dark:hover { box-shadow: var(--da-elev-1); }

/* ---------------------------------------------------------------------
   6. Forms — bigger targets, calm borders, an unmistakable focus state.
   16px prevents iOS Safari from zooming in when a field is focused.
   --------------------------------------------------------------------- */
.form-control {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--da-line);
    border-radius: var(--da-radius);
    background: #fff;
    color: var(--da-ink);
    box-shadow: none;
    transition: border-color .2s var(--da-ease), box-shadow .2s var(--da-ease);
}
.form-control:focus {
    border-color: var(--da-terracotta);
    box-shadow: var(--da-ring);
    outline: none;
}
textarea.form-control { min-height: 120px; }

.control-label {
    font-family: var(--da-font-ui);
    font-weight: 600;
    font-size: var(--da-fs-sm);
    color: var(--da-ink);
    margin-bottom: 6px;
}
.text-danger { font-size: var(--da-fs-sm); }

/* Chips and pills pick up the softer radius automatically via --da-radius. */
.da-chip { padding-block: 4px; }

/* ---------------------------------------------------------------------
   7. Footer — the tatreez band gets a cleaner, denser weave.
   --------------------------------------------------------------------- */
.da-footer::before { opacity: .55; }

/* ---------------------------------------------------------------------
   8. Motion preferences — never animate for users who asked us not to.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .da-card:hover,
    .da-teaser:hover,
    .da-btn:hover { transform: none; }
    .da-teaser::before,
    .da-nav__links a::after { transition: none; }
}