/* ===================================================================
   Summit chrome for the shared layout (registration, login, profile).

   Those pages run on the theme inherited from Palestine AI Week: a purple
   gradient page header, a purple accent, Manrope, and the AI Week banner
   photograph. This file is loaded last in partials/_head and repaints that
   chrome in the summit's own language — the one summit2026.blade.php uses
   for the home page — so a visitor who clicks Register does not land on a
   different website.

   It deliberately does not touch the theme's own files, so the theme can
   still be updated from upstream.

   Tokens are copied from summit2026.blade.php's :root, not re-picked:
     accent #800000 · forest #16342C · sage #769A89 · cream #faf9f5
     paper #F9FAFB · ink #1a1c1c · line #c1c8c4
   Display face is Jost, the same stand-in the home page uses for ITC Avant
   Garde Gothic. The faces are loaded in partials/_head.
   =================================================================== */

:root {
    --sum-accent:      #800000;
    --sum-accent-deep: #600000;
    --sum-forest:      #16342C;
    --sum-forest-mid:  #2D4B42;
    --sum-sage:        #769A89;
    --sum-cream:       #faf9f5;
    --sum-paper:       #F9FAFB;
    --sum-ink:         #1a1c1c;
    --sum-muted:       #414845;
    --sum-line:        #c1c8c4;
    --sum-tint:        #E8EFE9;
    --sum-footer:      #eef2ec;   /* a shade off the cream, as on the home page */
    --sum-warm:        #F3E3E3;

    --sum-display: 'ITC Avant Garde Gothic Pro', 'ITC Avant Garde Gothic', 'Century Gothic', Jost, sans-serif;
    --sum-text:    Inter, ui-sans-serif, system-ui, sans-serif;
    --sum-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===================================================================
   The page header

   There is no longer one. The theme renders a banner slab with the page
   title inside it; the summit's section pages lead straight into their
   content with a small kicker above the heading, and registration now
   does the same (the slab is removed in the view). What is left here is
   the tatreez rule and the cream ground that the top of every page has,
   applied to the content area instead.
   =================================================================== */

.page-header { display: none !important; }

/* The cream band with its tatreez rule now belongs to the top of the
   content, so the page still opens the way the others do. */
.page-contact-us { position: relative; }
.page-contact-us::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 30px;
    background: url('/innovationsummit/public/summit2026/img/13-tatreez-top-forest-lg.png')
                repeat-x center / auto 100%;
    opacity: .55;
    pointer-events: none;
}
@media (max-width: 639px) { .page-contact-us::before { height: 20px; } }

/* the heading, now part of the page rather than a banner over it */
.sum-reg-head {
    max-width: 760px;
    margin: 0 auto 18px;
    text-align: center;
}
.sum-reg-title {
    font-family: var(--sum-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.12 !important;
    font-size: clamp(26px, 3.2vw, 38px) !important;
    color: var(--sum-ink) !important;
    margin: 0 !important;
}
.sum-reg-head .sum-kicker {
    display: block;
    font-family: var(--sum-mono) !important;
    font-size: 11.5px !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sum-accent) !important;
    margin-bottom: 10px;
}

/* ===================================================================
   Navbar and footer
   =================================================================== */

/* The topbar is position:absolute and transparent, so it sits ON the page
   header. That header is now cream, like the home page, which means every
   white thing in the bar — the links and the whitened lockup — disappeared.
   The bar takes the home page's treatment instead: the dark-ink lockup pair
   (swapped in partials/_nav) and dark letterspaced caps. */
.navbar-brand { display: flex; align-items: center; gap: 14px; }
/* Size these by HEIGHT, never width: the TechnoPark mark is portrait, so a
   150px width cap rendered it 150x244 and it towered over everything. These
   are the home page's own heights, including its 44:50 relationship — the
   portrait mark is held slightly shorter than the summit lockup. */
.navbar-brand img { max-width: none !important; width: auto !important; object-fit: contain; }
.navbar-brand .sum-logo-tp     { height: 44px !important; }
.navbar-brand .sum-logo-summit { height: 50px !important; }
@media (max-width: 639px) {
    .navbar-brand .sum-logo-tp     { height: 34px !important; }
    .navbar-brand .sum-logo-summit { height: 39px !important; }
    .sum-lockup-rule { height: 26px !important; }
}
.sum-lockup-rule {
    width: 1px;
    height: 34px;
    background: var(--sum-line);
    flex: 0 0 auto;
}

.nav-link,
.navbar .nav-link {
    font-family: var(--sum-text) !important;
    color: var(--sum-ink) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* "Celebration Of Innovation" broke over three lines and dragged the
       whole bar to triple height. */
    white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus,
.navbar .nav-link:hover { color: var(--sum-accent) !important; }

/* the burger was given a white background inline, for the dark bar */
.navbar-toggler {
    background: #fff !important;
    border: 1px solid var(--sum-line) !important;
    border-radius: 8px !important;
    /* was 56x40 — a fingertip wants 44 */
    min-height: 44px;
    min-width: 44px;
}

/* Specificity note: the rule above is `.navbar .nav-link` at (0,2,0) and the
   pill carries both classes, so `.accent-color` alone at (0,1,0) lost and the
   Register pill rendered ink-on-maroon. Matched at (0,3,0) here. */
.navbar .nav-link.accent-color,
a.accent-color {
    color: #fff !important;
    background: var(--sum-accent) !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
}
.navbar .nav-link.accent-color:hover,
a.accent-color:hover { background: var(--sum-accent-deep) !important; color: #fff !important; }

/* ===================================================================
   The footer

   The theme ships a dark slab with the white TechnoPark mark alone and a
   row of menu links. The summit's own footer is a cream band a shade
   deeper than the page, carrying both marks in their dark artwork over a
   mono colophon — and no links. Match it.
   =================================================================== */
.footer, footer, .main-footer {
    background-color: var(--sum-footer, #eef2ec) !important;
    background-image: none !important;
    padding-block: clamp(44px, 6vw, 72px) !important;
    border-top: 1px solid var(--sum-line);
}
.main-footer .sum-lockup {
    display: flex; align-items: center; justify-content: center; gap: 18px;
}
.main-footer .sum-f-tp     { height: 56px; width: auto; }
.main-footer .sum-f-summit { height: 64px; width: auto; }
.main-footer .sum-f-rule   { width: 1px; height: 46px; background: var(--sum-line); }
@media (max-width: 639px) {
    .main-footer .sum-f-tp     { height: 42px; }
    .main-footer .sum-f-summit { height: 48px; }
    .main-footer .sum-f-rule   { height: 34px; }
}
/* the theme's link row and social strip are not part of the summit footer */
.main-footer .footer-about,
.main-footer .footer-social-links { display: none !important; }
.main-footer .footer-copyright,
.main-footer .footer-copyright-text p {
    font-family: var(--sum-mono) !important;
    font-size: 12px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sum-muted) !important;
    margin: 26px 0 0 !important;
}

/* ===================================================================
   Anything the theme painted purple
   =================================================================== */

a { color: var(--sum-accent); }
a:hover { color: var(--sum-accent-deep); }

.section-title h3,
.sub-title,
.wow .sub-title { color: var(--sum-accent) !important; }

/* The theme sets a gold hexagon as a background-image on the section
   heading's ::before. It is AI Week's mark, not the summit's. An earlier
   pass aimed at `.sub-title i` and `.sub-title::before` and missed: the
   element is `.section-title h3::before`. */
.section-title h3::before,
.section-title h2::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* ===================================================================
   The registration page

   One centred column on the summit's paper. The theme puts the form in a
   narrow right-hand column beside an empty eyebrow column, inside a
   magenta 40px-radius card with a cityscape watermark behind it.
   =================================================================== */

.page-contact-us {
    background-image: none !important;
    background-color: var(--sum-paper) !important;
}

/* The topbar is absolute and ~120px tall, so the content pads for it itself.
   This is the ONLY place the vertical padding is set: an earlier attempt put
   padding-top above this rule, and padding-block here quietly won. */
.page-contact-us,
.page-register {
    padding-top: clamp(148px, 11vw, 168px) !important;
    padding-bottom: clamp(56px, 7vw, 96px) !important;
}

/* the page is short, so without this the band stops and leaves raw white
   between the form and the footer */
.internal_div { background: var(--sum-paper); }

/* The view now ships a single full-width column, but a cached compiled view
   can still carry the old two-column row, so this stays as a safety net.
   The direct-child selectors matter: `.page-contact-us .row` would also
   match the rows INSIDE the form and stack First Name over Last Name. */
.page-contact-us > .container > .row { display: block !important; margin-inline: 0 !important; }
.page-contact-us > .container > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* The line above the card. */
.sum-reg-intro {
    max-width: 760px;
    margin: 0 auto 22px !important;
    text-align: center;
    font-family: var(--sum-text) !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: var(--sum-muted) !important;
}
.sum-reg-intro a {
    color: var(--sum-accent) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The card: a hairline and a 10px radius, the same as the home page's
   countdown and photo cards. No drop shadow — the home page has none. */
.contact-us-form {
    max-width: 760px !important;
    margin-inline: auto !important;
    border: 1px solid var(--sum-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: clamp(26px, 4vw, 46px) !important;
}

/* Group headings inside the form, in the home page's rule-head style:
   letterspaced display caps over a hairline, with a maroon tick. */
.contact-us-form h2,
.contact-us-form h3,
.contact-us-form h4 {
    font-family: var(--sum-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sum-forest) !important;
    margin: 0 0 24px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sum-line);
    position: relative;
}
.contact-us-form h2::after,
.contact-us-form h3::after,
.contact-us-form h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 40px; height: 2px;
    background: var(--sum-accent);
}
.contact-us-form h2:not(:first-child),
.contact-us-form h3:not(:first-child),
.contact-us-form h4:not(:first-child) { margin-top: 40px !important; }

/* Fields */
.contact-us-form label,
.page-contact-us label {
    font-family: var(--sum-text) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sum-forest) !important;
    margin-bottom: 7px !important;
}
.contact-us-form .form-control,
.contact-us-form .form-select,
.page-contact-us .form-control,
.page-contact-us .form-select,
.email-verify-row input.email-input {
    font-family: var(--sum-text) !important;
    border: 1px solid var(--sum-line) !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    background-color: #fff !important;
    color: var(--sum-ink) !important;
    transition: border-color .15s, box-shadow .15s;
}
.contact-us-form .form-control::placeholder,
.email-verify-row input.email-input::placeholder { color: #9aa7a0 !important; }

.contact-us-form .form-control:focus,
.contact-us-form .form-select:focus,
.page-contact-us .form-control:focus,
.email-verify-row input.email-input:focus {
    border-color: var(--sum-forest-mid) !important;
    box-shadow: 0 0 0 3px rgba(45, 75, 66, .14) !important;
    outline: none !important;
}

/* The email field's own inline stylesheet in the view sets a 2px #dfe3ea
   border and an AI Week purple focus ring at 54px tall. Bring it in line. */
.email-verify-row input.email-input { height: 50px !important; border-width: 1px !important; }
.email-verify-row input.email-input.is-verified {
    border-color: var(--sum-forest-mid) !important;
    box-shadow: 0 0 0 3px rgba(45, 75, 66, .14) !important;
    background: var(--sum-tint) !important;
}

/* ===================================================================
   Buttons

   The home page's hero call to action is a square-cornered maroon block,
   not a pill. Match it.
   =================================================================== */

.btn-default,
.btn-primary,
button[type="submit"],
input[type="submit"],
.email-verify-btn,
.email-verify-btn:visited {
    font-family: var(--sum-text) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: .01em;
    background-color: var(--sum-accent) !important;
    background-image: none !important;
    border: 1px solid var(--sum-accent) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 13px 26px !important;
    transition: background-color .18s ease, transform .18s ease;
}
.btn-default:hover,
.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.email-verify-btn:hover {
    background-color: var(--sum-accent-deep) !important;
    border-color: var(--sum-accent-deep) !important;
    transform: translateY(-1px);
}
.btn-default:active,
.btn-primary:active,
button[type="submit"]:active,
.email-verify-btn:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .btn-default, .btn-primary, button[type="submit"],
    input[type="submit"], .email-verify-btn { transition: none !important; }
    .btn-default:hover, .btn-primary:hover, button[type="submit"]:hover,
    input[type="submit"]:hover, .email-verify-btn:hover { transform: none; }
}