/* Helping Haven Gateway-specific additions only.
   Base page theme comes from weebly-main-style.css and weebly-font.css. */

* { box-sizing: border-box; }

.title {
    font-family: "IM Fell English", "IM Fell", Georgia, serif;
}
.title #wsite-title {
    display: inline;
    width: auto;
    height: auto;
    vertical-align: top;
    font-size: 36px;
    line-height: normal;
    cursor: pointer;
    color: rgb(255,255,255);
}
.title #wsite-title:hover { color: #fff; text-decoration: none; }

/* Gateway menu behaviour, layered over the original Weebly navigation. */
#navigation { min-height: 40px; }
.site-menu { display: block; }
.site-menu > li { position: relative; }
.more-button {
    display: inline;
    border: 0;
    padding: 0;
    background: transparent;
    color: #f7f7f7;
    font: inherit;
    text-transform: uppercase;
    cursor: pointer;
}
.more-button:hover, .more-menu.open > .more-button { color: #ff7b38; }
.submenu {
    display: none;
    position: absolute;
    right: 0;
    top: 27px;
    width: 190px;
    z-index: 5000;
    padding: 0;
    margin: 0;
}
.more-menu.open .submenu { display: block; }
.submenu li { float: none !important; clear: both; width: 190px; margin: 0 !important; font-family: Arial,sans-serif; font-size: 12px !important; text-transform: none !important; }
.submenu li a { display: block; width: 190px; background: #000d16; border: 1px solid #404a51; border-top: 0; padding: 8px 8px 8px 12px; color: #fff; }
.submenu li a:hover { background: #131f28; color: #ee7437; }
.mobile-nav-toggle { display: none; }

/* Use the page-specific Helping Haven banner. */
.wsite-header {
    background-image: url("https://helpinghaven.weebly.com/uploads/1/0/8/1/10817227/header_images/1328896348.jpg") !important;
    background-position: 0 0 !important;
}

.text h1, .text h2, .text p, .registration-form, .field-label,
.avatar-name, .wsite-button, .status, .consent, .message, .loader,
.footer-columns h2, .footer-columns p {
    font-family: Georgia, serif;
}

.welcome-copy{margin-bottom:25px}.welcome-copy .lead{font-size:20px}.registration-form{border-top:1px solid #404a51}.registration-step{padding:28px 0;border-bottom:1px solid #404a51}.step-heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}.step-number{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#ff7b38;color:#07101a;font-family:Georgia,serif;font-size:20px;font-weight:bold}.step-heading p{padding:2px 0;color:#d8dde1;font-size:14px}.avatar-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.avatar-card{position:relative;height:224px;padding:8px 7px 10px;border:1px solid #4d5962;background:rgba(6,18,28,.76);cursor:pointer;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}.avatar-card:hover{transform:translateY(-3px);border-color:#89949d;background:#13242f;box-shadow:0 8px 16px rgba(0,0,0,.42)}.avatar-card input{position:absolute;opacity:0;pointer-events:none}.avatar-card:has(input:checked){border:2px solid #ff7b38;background:#142733;box-shadow:0 0 0 2px rgba(255,123,56,.2),0 7px 15px rgba(0,0,0,.4)}.check-badge{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#ff7b38;color:#07101a;font-size:15px;font-weight:bold;opacity:0;transform:scale(.75);transition:.16s}.avatar-card:has(input:checked) .check-badge{opacity:1;transform:scale(1)}.avatar-frame{display:block;height:178px;overflow:hidden;background:rgba(255,255,255,.06)}.avatar-frame img{display:block;width:112%;height:112%;margin:-6% 0 0 -6%;object-fit:contain}.avatar-name{display:block;height:25px;padding-top:7px;font-family:Georgia,serif;font-size:14px;color:#fff}.field-label{display:block;margin:0 0 8px;font-family:Georgia,serif;font-size:16px;color:#fff}.username-row{display:flex;gap:10px}.username-row input{flex:1;min-width:0;height:44px;padding:10px 12px;border:1px solid #606a72;background:#f5f5f5;color:#17202a;font:16px Georgia,serif}.username-row input:focus{outline:2px solid #ff7b38;outline-offset:1px}.wsite-button{border:1px solid #9e4c23;background:#ff7b38;color:#111;font:700 14px Georgia,serif;cursor:pointer;padding:11px 18px;transition:background .15s ease,transform .15s ease}.wsite-button:hover{background:#ff925a;transform:translateY(-1px)}.wsite-button:disabled{opacity:.55;cursor:wait;transform:none}.secondary-button{white-space:nowrap}.primary-button{display:block;width:100%;margin-top:20px;font-size:18px;padding:14px}.status{min-height:28px;padding:9px 0 0!important;font-family:Georgia,serif!important;font-weight:bold}.status[data-type=success]{color:#86d59d}.status[data-type=error]{color:#ff9a87}.consent{display:flex;gap:12px;align-items:flex-start;font-family:Georgia,serif;font-size:15px;line-height:1.65;color:#fff}.consent input{margin-top:5px;transform:scale(1.2)}.message{margin-top:18px;font-family:Georgia,serif;font-size:15px;line-height:1.5}.message:not(:empty){padding:12px 14px;border:1px solid}.message[data-type=error]{background:#401b18;border-color:#a64d42;color:#ffd8d2}.message[data-type=success]{background:#163620;border-color:#438553;color:#dff5e5}.message[data-type=warning]{background:#4a3516;border-color:#b98738;color:#fff0ca}.loader{display:flex;justify-content:center;align-items:center;gap:10px;margin:16px auto 0;color:#fff;font:14px Georgia,serif}.loader[hidden]{display:none!important}.loader span{width:22px;height:22px;border:3px solid #6f7479;border-top-color:#ff7b38;border-radius:50%;animation:spin .8s linear infinite}.fineprint{text-align:center;color:#c4c9cd!important;font-size:12px!important}.honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}#footer{width:960px;max-width:100%;padding:20px 0 30px}.footer-columns{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}.footer-columns h2{font-family:Georgia,serif;font-size:21px;font-weight:normal;padding:5px 0}.footer-columns p{font-family:Georgia,serif;font-size:14px;line-height:1.7;padding:5px 0}.copyright{text-align:right;align-self:end}.copyright span{font-size:10px;color:#9ba2a8}@keyframes spin{to{transform:rotate(360deg)}}


@media (max-width: 980px) {
    body { background: #07101a; }
    #wrapper { width: 100%; max-width: 960px; padding: 0 12px; background-position: top center; }
    .title { width: 100%; height: auto; min-height: 86px; padding: 10px 0; }
    .title #wsite-title { font-size: 36px; line-height: normal; }
    #navigation { width: 100%; height: auto; padding: 0; background: #101c25; border: 1px solid #404a51; }
    .mobile-nav-toggle { display: block; width: 100%; padding: 11px 14px; border: 0; background: transparent; color: #fff; text-align: left; font: 16px Georgia,serif; text-transform: uppercase; cursor: pointer; }
    .site-menu { display: none; }
    .site-menu.open { display: block; }
    #navigation ul li { float: none; width: 100%; margin: 0; border-top: 1px solid #404a51; }
    #navigation ul li a, .more-button { display: block; width: 100%; padding: 10px 14px; text-align: left; }
    .submenu { position: static; width: 100%; }
    .submenu li, .submenu li a { width: 100%; }
    .submenu li a { padding-left: 28px; }
    #container, #content, #header, .text, #footer { width: 100%; }
    #content { padding: 12px; }
    #header { height: auto; }
    .wsite-header { height: clamp(160px, 27vw, 248px); background-size: cover; }
    .text { padding: 22px 10px; }
    .avatar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .footer-columns { grid-template-columns: 1fr; }
    .copyright { text-align: left; }
}

@media (max-width: 620px) {
    #wrapper { padding: 0; }
    .title { min-height: 0; padding: 8px 6px 10px; }
    .title #wsite-title { font-size: 29px; line-height: 1.15; }
    .text h1 { font-size: 29px; }
    .welcome-copy .lead { font-size: 17px; }
    .avatar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .avatar-card { height: 238px; }
    .avatar-frame { height: 191px; }
    .username-row { flex-direction: column; }
    .secondary-button { width: 100%; }
    .step-heading { gap: 10px; }
    .step-number { flex-basis: 34px; height: 34px; }
    .footer-columns { padding: 0 14px; }
}