/*
 * AutoArticle frontend shim stylesheet
 * -----------------------------------------------------------------------------
 * The [autoarticle_settings] shortcode renders the same admin UI as the
 * wp-admin plugin page. In wp-admin these views inherit a pile of primitives
 * from WP core (buttons.css, forms.css, common.css, list-tables.css,
 * dashicons.css). Those stylesheets do NOT load on the frontend, so on
 * /membership-account/ the Send-to-Socials tab in particular renders as
 * naked HTML — tables without striping, buttons without chrome, nav-tabs
 * that look like plain links.
 *
 * Rather than dragging wp-admin.css onto public pages (heavy; conflict-prone),
 * this file reproduces JUST the primitives our views actually reference,
 * scoped under .autoarticle-frontend-wrapper so nothing here bleeds into the
 * theme or other plugins. WP's dashicons handle is enqueued alongside this
 * file in hubspot-helpers.php — it's a safe, scoped icon font and trying to
 * redefine individual glyph codepoints would be madness.
 *
 * Scope discipline: every rule below is prefixed with
 * `.autoarticle-frontend-wrapper` (the wrapper div emitted by
 * AutoArticle_Frontend::render_settings_shortcode()). If you add rules that
 * target child classes shared with themes (.button, .notice, .wrap, etc.),
 * keep them scoped to avoid collisions.
 */

/* -----------------------------------------------------------------------------
 * .wrap — outer admin-page wrapper.
 * WP-admin uses this as a standard container with some margin. We give it
 * nothing but a block-level default since the shortcode is already rendered
 * inside whatever content area the theme provides.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .wrap {
    margin: 10px 0;
}

.autoarticle-frontend-wrapper .wrap > h1 {
    font-size: 23px;
    font-weight: 400;
    margin: 0 0 10px;
    padding: 9px 0 4px;
    line-height: 1.3;
}

/* -----------------------------------------------------------------------------
 * Nav tabs — used by both the top-level (Generate / Send to Socials) and the
 * Send-to-Socials sub-tab strips.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .nav-tab-wrapper {
    border-bottom: 1px solid #c3c4c7;
    margin: 0;
    padding-top: 9px;
    padding-bottom: 0;
    line-height: inherit;
}

.autoarticle-frontend-wrapper .nav-tab {
    float: left;
    border: 1px solid #c3c4c7;
    border-bottom: none;
    margin-left: 0.5em;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.71428571;
    font-weight: 600;
    background: #dcdcde;
    color: #50575e;
    text-decoration: none;
    white-space: nowrap;
}

.autoarticle-frontend-wrapper .nav-tab:hover,
.autoarticle-frontend-wrapper .nav-tab:focus {
    background-color: #fff;
    color: #3c434a;
}

.autoarticle-frontend-wrapper .nav-tab-active,
.autoarticle-frontend-wrapper .nav-tab-active:focus,
.autoarticle-frontend-wrapper .nav-tab-active:hover {
    border-bottom: 1px solid #f0f0f1;
    background: #f0f0f1;
    color: #000;
}

/* Clear the float when the tab strip closes. */
.autoarticle-frontend-wrapper .nav-tab-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* -----------------------------------------------------------------------------
 * Buttons — scoped to our wrapper so theme `.button` rules aren't clobbered
 * elsewhere on the page. We reproduce the standard WP "Secondary" and
 * "Primary" states plus the small variant.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .button,
.autoarticle-frontend-wrapper .button-secondary {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    color: #2271b1;
    border-color: #2271b1;
    background: #f6f7f7;
    vertical-align: top;
}

.autoarticle-frontend-wrapper .button:hover,
.autoarticle-frontend-wrapper .button-secondary:hover,
.autoarticle-frontend-wrapper .button:focus,
.autoarticle-frontend-wrapper .button-secondary:focus {
    background: #f0f0f1;
    border-color: #0a4b78;
    color: #0a4b78;
}

.autoarticle-frontend-wrapper .button-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    text-shadow: none;
}

.autoarticle-frontend-wrapper .button-primary:hover,
.autoarticle-frontend-wrapper .button-primary:focus {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}

.autoarticle-frontend-wrapper .button-small {
    min-height: 26px;
    line-height: 2.18181818;
    padding: 0 8px;
    font-size: 11px;
}

.autoarticle-frontend-wrapper .button:disabled,
.autoarticle-frontend-wrapper .button[disabled],
.autoarticle-frontend-wrapper .button-secondary:disabled,
.autoarticle-frontend-wrapper .button-primary:disabled {
    color: #a7aaad !important;
    border-color: #dcdcde !important;
    background: #f6f7f7 !important;
    cursor: default;
}

/* -----------------------------------------------------------------------------
 * .form-table — WP's two-column label/field settings grid.
 * Used heavily on the Send-to-Socials → General sub-tab.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .form-table {
    border-collapse: collapse;
    margin-top: 0.5em;
    width: 100%;
    clear: both;
}

.autoarticle-frontend-wrapper .form-table th,
.autoarticle-frontend-wrapper .form-table td {
    padding: 15px 10px;
    line-height: 1.3;
    font-size: 14px;
    vertical-align: top;
}

.autoarticle-frontend-wrapper .form-table th {
    vertical-align: top;
    text-align: left;
    padding: 20px 10px 20px 0;
    width: 200px;
    line-height: 1.3;
    font-weight: 600;
}

.autoarticle-frontend-wrapper .form-table td p {
    margin-top: 4px;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
 * .widefat — WP's standard admin data table. We also cover .striped
 * explicitly even though `.widefat.striped` does the same thing on wp-admin.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .widefat {
    border-spacing: 0;
    width: 100%;
    clear: both;
    margin: 0;
    border: 1px solid #c3c4c7;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    border-collapse: separate;
}

.autoarticle-frontend-wrapper .widefat th,
.autoarticle-frontend-wrapper .widefat td {
    padding: 8px 10px;
    text-align: left;
    line-height: 1.5em;
    font-size: 14px;
    vertical-align: top;
}

.autoarticle-frontend-wrapper .widefat thead th,
.autoarticle-frontend-wrapper .widefat thead td {
    border-bottom: 1px solid #c3c4c7;
    font-weight: 600;
    color: #1d2327;
    background: #f6f7f7;
}

.autoarticle-frontend-wrapper .widefat tfoot th,
.autoarticle-frontend-wrapper .widefat tfoot td {
    border-top: 1px solid #c3c4c7;
    font-weight: 600;
    color: #1d2327;
    background: #f6f7f7;
}

.autoarticle-frontend-wrapper .widefat.striped > tbody > tr:nth-child(odd),
.autoarticle-frontend-wrapper .striped > tbody > tr:nth-child(odd) {
    background-color: #f6f7f7;
}

.autoarticle-frontend-wrapper .widefat tbody tr:hover {
    background-color: #f0f6fc;
}

/* -----------------------------------------------------------------------------
 * .notice — inline admin notices. WP uses a left border color to denote type
 * and a white background with subtle shadow.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .notice {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-left-width: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    margin: 5px 0 15px;
    padding: 1px 12px;
}

.autoarticle-frontend-wrapper .notice.inline {
    margin: 5px 0 15px;
}

.autoarticle-frontend-wrapper .notice-info {
    border-left-color: #72aee6;
}

.autoarticle-frontend-wrapper .notice-success {
    border-left-color: #00a32a;
}

.autoarticle-frontend-wrapper .notice-warning {
    border-left-color: #dba617;
}

.autoarticle-frontend-wrapper .notice-error {
    border-left-color: #d63638;
}

.autoarticle-frontend-wrapper .notice p {
    margin: 0.5em 0;
    padding: 2px;
}

/* -----------------------------------------------------------------------------
 * Form input widths + muted description text.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .regular-text {
    width: 25em;
    max-width: 100%;
}

.autoarticle-frontend-wrapper .small-text {
    width: 50px;
}

.autoarticle-frontend-wrapper .large-text {
    width: 99%;
}

.autoarticle-frontend-wrapper .description {
    font-size: 13px;
    font-style: italic;
    color: #646970;
    margin: 3px 0 0;
}

/* -----------------------------------------------------------------------------
 * .spinner — WP's translucent inline activity indicator. On wp-admin this is
 * a background-image ping; reproducing the exact asset path would couple us
 * to WP internals. A plain animated CSS spinner is functionally equivalent
 * and works offline.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin: 4px 5px 0;
    vertical-align: middle;
    border: 2px solid rgba(100, 105, 112, 0.2);
    border-top-color: #646970;
    border-radius: 50%;
    animation: autoarticle-frontend-spin 0.8s linear infinite;
}

.autoarticle-frontend-wrapper .spinner.is-active {
    display: inline-block;
}

@keyframes autoarticle-frontend-spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
 * Typography guards — some themes set tight headings or aggressive
 * list-style-position; reassert the admin-neutral defaults our views assume.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper h2,
.autoarticle-frontend-wrapper h3,
.autoarticle-frontend-wrapper h4 {
    color: #1d2327;
    font-weight: 600;
}

.autoarticle-frontend-wrapper h3 {
    font-size: 1.3em;
    margin: 1em 0 0.5em;
}

.autoarticle-frontend-wrapper code {
    padding: 2px 4px;
    font-size: 13px;
    background: #f0f0f1;
    border-radius: 3px;
}

/* -----------------------------------------------------------------------------
 * Social module: tiny refinements that only make sense on the frontend. The
 * hubspot auto-share panel and the sub-tab strip both benefit from a small
 * top margin so they don't butt up against the shortcode's enclosing nav.
 * -------------------------------------------------------------------------- */
.autoarticle-frontend-wrapper .autoarticle-social-settings {
    margin-top: 10px;
}