/* home-landing.css - Modern landing styles for raicl.com */

/* --- Nav bar --- */
.hl-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hl-nav a:hover, .hl-nav button:hover {
    background-color: #435761 !important;
}

/* --- Header brand --- */
.hl-header {
    background: linear-gradient(135deg, #303e45 0%, #57707d 60%, #7d97a5 100%);
    color: #fff;
    padding: 40px 24px 32px;
}
.hl-header h1 { margin: 0 0 4px; font-size: 2.2rem; letter-spacing: .04em; }
.hl-header .hl-abn { font-size: .72rem; opacity: .7; }
.hl-header .hl-tag { font-size: 1.05rem; opacity: .88; margin-top: 6px; }
.hl-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: bold;
    letter-spacing: .06em;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
}

/* --- Hero --- */
.hl-hero {
    background: linear-gradient(160deg, #dfe5e8 0%, #f5f7f8 100%);
    padding: 56px 24px;
    text-align: center;
}
.hl-hero h2 {
    font-size: 1.7rem;
    color: #303e45;
    margin: 0 0 12px;
}
.hl-hero p {
    color: #435761;
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto 28px;
    line-height: 1.6;
}
.hl-btn-primary {
    display: inline-block;
    padding: 11px 32px;
    border-radius: 4px;
    background-color: #57707d;
    color: #fff !important;
    font-size: .95rem;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color .2s;
}
.hl-btn-primary:hover { background-color: #303e45; }
.hl-btn-outline {
    display: inline-block;
    margin-left: 12px;
    padding: 10px 28px;
    border-radius: 4px;
    background: transparent;
    color: #57707d !important;
    border: 2px solid #57707d;
    font-size: .95rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}
.hl-btn-outline:hover { background-color: #57707d; color: #fff !important; }

/* --- Feature cards --- */
.hl-cards {
    padding: 48px 16px;
    background: #fff;
}
.hl-card {
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    padding: 28px 20px;
    margin: 8px;
    background: #f5f7f8;
    transition: box-shadow .2s, transform .2s;
}
.hl-card:hover {
    box-shadow: 0 6px 20px rgba(48,62,69,.15);
    transform: translateY(-3px);
}
.hl-card-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}
.hl-card h3 { color: #303e45; margin: 0 0 8px; font-size: 1.05rem; }
.hl-card p  { color: #435761; font-size: .9rem; line-height: 1.55; margin: 0; }

/* --- Footer --- */
.hl-footer {
    padding: 24px;
    background: #303e45;
    color: rgba(255,255,255,.75);
    font-size: .8rem;
    text-align: center;
}
.hl-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.hl-footer a:hover { text-decoration: underline; }

/* --- About RaiCL modal --- */
#aboutModal { padding: 4px; max-height: 70vh; overflow-y: auto; }
#aboutModal p { color: #435761; line-height: 1.7; margin-bottom: 14px; }
.hl-about-sub { font-size: .85rem; color: #7d97a5; letter-spacing: .08em; font-style: italic; margin-bottom: 16px !important; }
.hl-about-list { list-style: none; padding: 0; margin: 0 0 16px; }
.hl-about-list li {
    padding: 7px 12px;
    border-left: 3px solid #becbd2;
    color: #303e45;
    font-size: .9rem;
    margin-bottom: 5px;
    background: #f5f7f8;
}

/* --- Form actions row --- */
.hl-form-actions { display: flex; gap: 10px; align-items: center; }

/* --- Contact modal --- */
#contactModal { padding: 8px 4px; }
.hl-contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.hl-contact-info p { margin-bottom: 1rem; color: #435761; }
.hl-contact-info a { color: #57707d; text-decoration: none; }
.hl-contact-info a:hover { text-decoration: underline; }
.hl-label { font-weight: bold; color: #303e45; display: block; margin-bottom: 2px; }

#contactForm { display: flex; flex-direction: column; gap: 1rem; }
#contactForm label { font-size: .88rem; color: #435761; display: block; margin-bottom: 2px; }
#contactForm input,
#contactForm textarea,
#contactForm select {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid #becbd2;
    border-radius: 3px;
    font-family: inherit;
    font-size: .93rem;
    background: #fff;
    color: #303e45;
    transition: border-color .2s;
}
#contactForm input:focus,
#contactForm textarea:focus,
#contactForm select:focus { outline: none; border-color: #57707d; }
#contactForm textarea { resize: vertical; min-height: 120px; }

/* --- Status pane (spinner overlay) --- */
#statusPane {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #303e45;
    color: #fff;
    padding: 1.1rem 2.2rem;
    border-radius: 6px;
    border: 2px solid #7d97a5;
    font-size: .95rem;
    letter-spacing: .05em;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.hl-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid #7d97a5;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hl-spin .7s linear infinite;
    margin-right: .6rem;
    vertical-align: middle;
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* --- jQuery UI dialog overrides (blue-grey theme) --- */
.ui-dialog { border-radius: 6px !important; border: none !important; box-shadow: 0 12px 40px rgba(0,0,0,.25) !important; }
.ui-dialog-titlebar { background: #303e45 !important; color: #fff !important; border-radius: 6px 6px 0 0 !important; border: none !important; padding: .75rem 1rem !important; }
.ui-dialog-titlebar-close { color: #becbd2 !important; }
.ui-dialog-content { padding: 1.6rem 2rem !important; color: #303e45; line-height: 1.7; }
.ui-dialog-buttonpane { background: #f5f7f8 !important; border-top: 1px solid #dfe5e8 !important; padding: .7rem 1rem !important; }
.ui-dialog-buttonpane button { background: #57707d !important; color: #fff !important; border: none !important; padding: .5rem 1.5rem !important; border-radius: 3px !important; font-size: .9rem !important; cursor: pointer !important; }
.ui-dialog-buttonpane button:hover { background: #303e45 !important; }
.dialog-icon { font-size: 2.2rem; text-align: center; margin-bottom: .7rem; }
.dialog-msg { text-align: center; }
.dialog-msg strong { color: #303e45; display: block; font-size: 1.1rem; margin-bottom: .5rem; }
.dialog-msg p { color: #435761; font-size: .92rem; }

@media (max-width: 700px) {
    .hl-contact-inner { grid-template-columns: 1fr; }
}

/* --- W3.CSS Modal overrides --- */
.hl-modal-content {
    max-width: 740px;
    width: 95%;
    margin: 5% auto;
    border-radius: 6px;
    overflow: hidden;
}
.hl-modal-title {
    padding: 0;
    line-height: 1;
}
.hl-modal-title .w3-bar-item.w3-large {
    padding: 14px 16px;
    color: #fff;
    font-size: 1rem !important;
    letter-spacing: .04em;
}
.hl-modal-close {
    font-size: 1.4rem !important;
    color: #becbd2 !important;
    line-height: 1;
    padding: 10px 16px !important;
}
.hl-modal-close:hover { color: #fff !important; background: transparent !important; }

/* --- About modal body --- */
.hl-about-body p { color: #435761; line-height: 1.7; margin-bottom: 14px; }
.hl-about-sub { font-size: .85rem; color: #7d97a5; letter-spacing: .08em; font-style: italic; margin-bottom: 16px !important; }
.hl-about-list { list-style: none; padding: 0; margin: 0 0 16px; }
.hl-about-list li {
    padding: 7px 12px;
    border-left: 3px solid #becbd2;
    color: #303e45;
    font-size: .9rem;
    margin-bottom: 5px;
    background: #f5f7f8;
}

/* --- Contact modal inner layout --- */
.hl-contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.hl-contact-info p { margin-bottom: 1rem; color: #435761; }
.hl-contact-info a { color: #57707d; text-decoration: none; }
.hl-contact-info a:hover { text-decoration: underline; }
.hl-label { font-weight: bold; color: #303e45; display: block; margin-bottom: 2px; }

#contactForm { display: flex; flex-direction: column; gap: .9rem; }
#contactForm label { font-size: .88rem; color: #435761; display: block; margin-bottom: 2px; }
#contactForm input,
#contactForm textarea,
#contactForm select {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid #becbd2;
    border-radius: 3px;
    font-family: inherit;
    font-size: .93rem;
    background: #fff;
    color: #303e45;
    transition: border-color .2s;
}
#contactForm input:focus,
#contactForm textarea:focus,
#contactForm select:focus { outline: none; border-color: #57707d; }
#contactForm textarea { resize: vertical; min-height: 110px; }
.hl-form-actions { display: flex; gap: 10px; align-items: center; }

/* --- Status pane --- */
#statusPane {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #303e45;
    color: #fff;
    padding: 1.1rem 2.2rem;
    border-radius: 6px;
    border: 2px solid #7d97a5;
    font-size: .95rem;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.hl-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid #7d97a5;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hl-spin .7s linear infinite;
    margin-right: .6rem;
    vertical-align: middle;
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* --- Result modal --- */
.dialog-icon { font-size: 2.2rem; margin-bottom: .7rem; }
.dialog-msg strong { color: #303e45; display: block; font-size: 1.05rem; margin-bottom: .5rem; }
.dialog-msg p { color: #435761; font-size: .92rem; }

/* --- Mobile --- */
@media (max-width: 640px) {
    .hl-modal-content { margin: 0 auto; width: 100%; border-radius: 0; }
    .hl-contact-inner { grid-template-columns: 1fr; }
}