/*
Theme Name: Ohio Salt Now
Template: devq-starter
Author: Josh Yager
Author URI: https://thedevq.com/
Description: Child theme for Ohio Salt Now, built on DevQ Starter
Version: 1.0.0
*/

/* ============================================================
   Ohio Salt Now — design tokens
   Inherits the Nordonia green as the action color, set on a
   cold ice-and-steel surface. Green = "go".
   ============================================================ */
:root {
    --osn-ice:      #eef3f6;  /* page surface */
    --osn-ice-deep: #dde7ec;  /* alt bands */
    --osn-card:     #ffffff;
    --osn-ink:      #16232b;  /* cold near-black */
    --osn-muted:    #5b6b73;
    --osn-line:     #d3dce2;  /* steel hairline */
    --osn-line-soft:#e6edf1;
    --osn-go:       var(--primary, #1fa67a);
    --osn-go-deep:  var(--secondary, #3f6653);
    --osn-danger:   #c0392b;
    --osn-shadow:   0 1px 2px rgba(22,35,43,.06), 0 8px 24px rgba(22,35,43,.08);
    --osn-radius:   14px;
    --osn-tap:      56px;     /* minimum touch target */
}

body {
    background: var(--osn-ice);
    color: var(--osn-ink);
    -webkit-font-smoothing: antialiased;
    /* Sticky footer: short pages still fill the viewport. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > .devq-footer,
body > footer {
    margin-top: auto;
}

/* Buttons: large, confident, thumb-friendly. */
.saltorder-block .btn,
.osn-account .btn,
.osn-confirm .btn,
a.btn {
    min-height: var(--osn-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* ---- Shared utility bits ---- */
.osn-muted { color: var(--osn-muted); }
.osn-opt   { color: var(--osn-muted); font-weight: 400; font-size: 14px; }

.osn-panel {
    background: var(--osn-card);
    border: 1px solid var(--osn-line);
    border-radius: var(--osn-radius);
    box-shadow: var(--osn-shadow);
    padding: 28px;
    margin-bottom: 24px;
}

.osn-notice {
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-weight: 600;
}
.osn-notice--ok { background: #e6f7ee; color: #1a7a44; border: 1px solid #b7e4c9; }

/* ============================================================
   Account area
   ============================================================ */
.osn-account {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px;
}
.osn-account--guest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.osn-account--guest .osn-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.osn-account--guest h2 { font-size: 26px; }

/* Brand the raw WordPress login form. */
.osn-account #loginform { margin: 0; }
.osn-account #loginform p { margin: 0 0 16px; }
.osn-account #loginform label {
    display: block; font-weight: 600; font-size: 14px; color: var(--osn-ink); margin-bottom: 6px;
}
.osn-account #loginform input[type=text],
.osn-account #loginform input[type=password] {
    width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--osn-line);
    border-radius: 10px; font-size: 16px; box-sizing: border-box; background: #fff; color: var(--osn-ink);
}
.osn-account #loginform input[type=text]:focus,
.osn-account #loginform input[type=password]:focus {
    outline: none; border-color: var(--osn-go); box-shadow: 0 0 0 3px rgba(31,166,122,.15);
}
.osn-account #loginform .login-remember label {
    display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px;
    color: var(--osn-muted); margin: 0;
}
.osn-account #loginform .login-remember input { width: 18px; height: 18px; accent-color: var(--osn-go); margin: 0; }
.osn-account #loginform .login-submit { margin-bottom: 0; margin-top: 4px; }
.osn-account #loginform #wp-submit {
    width: 100%; background: var(--osn-go); color: #fff; border: 0; border-radius: 12px;
    min-height: 56px; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: none; text-shadow: none;
}
.osn-account #loginform #wp-submit:hover { filter: brightness(1.05); }
.osn-account--guest .osn-muted a { color: var(--osn-go-deep); font-weight: 600; }
.osn-account-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.osn-account h2 { margin: 0 0 16px; }
.osn-account h3 { margin: 0 0 16px; font-size: 20px; }

.osn-order-list { display: flex; flex-direction: column; gap: 12px; }
.osn-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--osn-line-soft);
    border-radius: 12px;
    background: #fbfdfe;
}
.osn-order-main { min-width: 0; flex: 1; }
.osn-order-num { color: var(--osn-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.osn-order-qty { white-space: nowrap; color: var(--osn-muted); }
.osn-order-qty::before { content: "— "; }
.osn-order-meta { color: var(--osn-muted); font-size: 14px; margin-top: 4px; }
.osn-order-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.osn-reorder { min-height: 44px !important; padding: 8px 18px; }

.osn-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: #e0edff;
    color: #1b4dad;
}
.osn-status--confirmed { background:#fff3cd; color:#8a6d00; }
.osn-status--scheduled { background:#e6f7ee; color:#1a7a44; }
.osn-status--delivered { background:#e9ecef; color:#495057; }
.osn-status--cancelled { background:#fde2e1; color:#a12a22; }

.osn-site-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.osn-site-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--osn-line-soft); border-radius: 12px;
}
.osn-del { font-size: 14px; }
.osn-add-site { border-top: 1px solid var(--osn-line-soft); margin-top: 16px; padding-top: 8px; }
.osn-add-site summary {
    cursor: pointer; font-weight: 600; color: var(--osn-go-deep);
    padding: 10px 0; list-style-position: inside;
}
.osn-form--grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px;
}
.osn-form--grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--osn-ink); }
.osn-form--grid .osn-f-full { grid-column: 1 / -1; }
.osn-form input[type=text],
.osn-form input[type=email],
.osn-form input[type=tel] {
    width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--osn-line);
    border-radius: 10px; font-size: 16px; box-sizing: border-box; background: #fff; color: var(--osn-ink);
    -webkit-appearance: none; appearance: none;
}
.osn-form input:focus-visible { outline: none; border-color: var(--osn-go); box-shadow: 0 0 0 3px rgba(31,166,122,.15); }
.osn-form--grid .btn { min-width: 200px; }

/* ============================================================
   Order confirmation
   ============================================================ */
.osn-confirm { max-width: 620px; margin: 48px auto; text-align: center; }
.osn-confirm-badge {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--osn-go); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; margin: 0 auto 16px;
}
.osn-confirm h2 { margin: 0 0 8px; }
.osn-confirm-lead { color: var(--osn-muted); margin: 0 0 24px; }
.osn-confirm-grid {
    display: grid; grid-template-columns: auto 1fr; gap: 10px 20px;
    text-align: left; margin: 0 auto 28px; max-width: 460px;
}
.osn-confirm-grid dt { color: var(--osn-muted); font-weight: 600; }
.osn-confirm-grid dd { margin: 0; font-weight: 600; }
.osn-confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Notice bar
   ============================================================ */
.saltnotice-block {
    background: var(--osn-go-deep);
    color: #fff;
}
.saltnotice-inner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 20px; text-align: center;
}
.saltnotice-block .saltnotice-text { color: #fff; font-weight: 600; font-size: 15px; }
.saltnotice-icon { opacity: .9; }
.saltnotice-block--empty { padding: 8px; text-align: center; color: #999; font-style: italic; }

/* ============================================================
   Reassure strip
   ============================================================ */
.saltreassure-block { background: var(--osn-ice-deep); padding: 36px 0; }
.saltreassure-inner {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.saltreassure-item { display: flex; gap: 14px; align-items: flex-start; }
.saltreassure-icon { font-size: 26px; color: var(--osn-go-deep); line-height: 1; }
.saltreassure-title { margin: 0 0 4px; font-size: 17px; }
.saltreassure-text { margin: 0; color: var(--osn-muted); font-size: 15px; }

/* ============================================================
   Contact block
   ============================================================ */
.saltcontact-block { padding: 56px 0; }
.saltcontact-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.saltcontact-heading { margin: 0 0 12px; }
.saltcontact-phone a {
    font-size: 30px; font-weight: 800; color: var(--osn-go-deep);
    text-decoration: none; font-variant-numeric: tabular-nums;
}
.saltcontact-phone span { font-weight: 500; color: var(--osn-muted); font-size: 20px; }
.saltcontact-bagged { margin-top: 16px; color: var(--osn-muted); }
.saltcontact-bagged a { color: var(--osn-go); font-weight: 600; }

/* ---- Gravity Forms inside the contact block, matched to brand ---- */
.saltcontact-form .gform_wrapper .gfield_label {
    font-weight: 600; font-size: 14px; color: var(--osn-ink);
}
.saltcontact-form .gform_wrapper input[type=text],
.saltcontact-form .gform_wrapper input[type=email],
.saltcontact-form .gform_wrapper input[type=tel],
.saltcontact-form .gform_wrapper textarea {
    min-height: 50px; padding: 12px 14px; border: 2px solid var(--osn-line);
    border-radius: 10px; font-size: 16px; background: #fff; width: 100%;
}
.saltcontact-form .gform_wrapper textarea { min-height: 120px; }
.saltcontact-form .gform_wrapper input:focus,
.saltcontact-form .gform_wrapper textarea:focus {
    outline: none; border-color: var(--osn-go); box-shadow: 0 0 0 3px rgba(31,166,122,.15);
}
.saltcontact-form .gform_wrapper .gform_footer input[type=submit],
.saltcontact-form .gform_wrapper .gform_footer button {
    background: var(--osn-go); color: #fff; border: 0; border-radius: 12px;
    min-height: 56px; padding: 0 28px; font-size: 17px; font-weight: 700; cursor: pointer;
}
.saltcontact-form .gform_wrapper .gform_footer input[type=submit]:hover { filter: brightness(1.05); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
    .saltcontact-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .osn-account--guest { grid-template-columns: 1fr; }
    .saltreassure-inner { grid-template-columns: 1fr; gap: 18px; }
    .osn-form--grid { grid-template-columns: 1fr 1fr; }
    .osn-order-row { flex-direction: column; align-items: stretch; }
    .osn-order-side { justify-content: space-between; }
    .osn-panel { padding: 20px; }
}