/*
Theme Name:  Long Island Aikikai
Theme URI:   https://www.liaikikai.com/
Description: Child theme of Customizr for Long Island Aikikai. Adds meta descriptions,
             Open Graph/Twitter card tags, LocalBusiness structured data, and a
             "Try a Free Class" call to action in the primary menu. Update-safe:
             Customizr can be updated without losing any of this.
Author:      Long Island Aikikai
Template:    customizr
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: liaikikai-child
*/

/* --------------------------------------------------------------------------
   1. "Try a Free Class" menu button
   Added to the primary menu by functions.php. If you'd rather add the menu
   item by hand in Appearance > Menus, give it the CSS class `lia-cta`.
   -------------------------------------------------------------------------- */

.lia-cta > a,
.lia-cta > a:link,
.lia-cta > a:visited {
    display: inline-block;
    margin: 6px 0 6px 14px;
    padding: 9px 20px;
    border-radius: 4px;
    background-color: #8f1d1d;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color 0.15s ease-in-out;
}

.lia-cta > a:hover,
.lia-cta > a:focus {
    background-color: #6f1616;
    color: #fff !important;
}

.lia-cta > a:focus-visible {
    outline: 2px solid #f0c419;
    outline-offset: 2px;
}

/* Customizr styles the active/hover state of menu links, and — because our
   button is appended as the last item — also hits it with
   `.pull-menu-right .navbar div > ul.nav > .menu-item:last-child > a
    { padding-right: 0 }`,
   which leaves the label flush against the right edge. Match that selector's
   specificity to restore symmetric padding, and drop the parent's white text
   shadow, which haloes white text on the dark red. */
.navbar .nav > li.lia-cta > a,
.navbar .nav > li.lia-cta.current-menu-item > a,
.pull-menu-right .navbar div > ul.nav > .menu-item.lia-cta:last-child > a {
    padding: 9px 20px;
    background-color: #8f1d1d;
    color: #fff !important;
    text-align: center;
    text-shadow: none;
}

.navbar .nav > li.lia-cta:hover > a,
.navbar .nav > li.lia-cta > a:focus,
.pull-menu-right .navbar div > ul.nav > .menu-item.lia-cta:last-child > a:hover {
    padding: 9px 20px;
    background-color: #6f1616;
    color: #fff !important;
    text-shadow: none;
}

/* On the mobile/collapsed menu, let it be full width and unmissable. */
@media (max-width: 979px) {
    .lia-cta > a,
    .lia-cta > a:link,
    .lia-cta > a:visited {
        display: block;
        margin: 10px 0;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   2. Small readability improvements
   Remove any of these if they fight your Customizr settings.
   -------------------------------------------------------------------------- */

/* Schedule and rate tables read better with visible rows. */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.entry-content table th,
.entry-content table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: top;
}

.entry-content table th {
    font-weight: 700;
    background-color: #f6f6f6;
}

/* Comfortable measure for body copy on wide screens. */
.entry-content p,
.entry-content li {
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   3. Call-to-action buttons inside page content
   The converted page copy emits wp:button blocks carrying `lia-cta-button`.
   WordPress core paints those charcoal, underlined, normal weight and fully
   rounded — which looks nothing like the header CTA sitting inches above it.
   Match the header, and give the group room to breathe.
   -------------------------------------------------------------------------- */

.entry-content .wp-block-buttons {
    margin: 1.5em 0 1.9em;
}

.entry-content .wp-block-button.lia-cta-button .wp-block-button__link {
    background-color: #8f1d1d;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 4px;
    padding: 11px 22px;
    line-height: 1.3;
    text-shadow: none;
    transition: background-color 0.15s ease-in-out;
}

.entry-content .wp-block-button.lia-cta-button .wp-block-button__link:hover,
.entry-content .wp-block-button.lia-cta-button .wp-block-button__link:focus {
    background-color: #6f1616;
    color: #fff !important;
    text-decoration: none !important;
}

.entry-content .wp-block-button.lia-cta-button .wp-block-button__link:focus-visible {
    outline: 2px solid #f0c419;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Navbar fit
   Promoting "Rent the Dojo" to a top-level item makes seven menu entries plus
   the CTA button, which overflows Customizr's 1062px navbar container and
   pushes the button onto a second row. Tightening the per-item padding buys
   back roughly 140px and restores a single row at common laptop widths.
   Below ~1250px it still wraps; the menu collapses to the mobile toggle at
   979px, so the wrapping band is narrow.
   -------------------------------------------------------------------------- */

@media (min-width: 980px) {
    .navbar .nav > li > a {
        padding-left: 11px;
        padding-right: 11px;
    }

    .navbar .nav > li.lia-cta > a,
    .pull-menu-right .navbar div > ul.nav > .menu-item.lia-cta:last-child > a {
        padding: 9px 16px;
        margin-left: 6px;
    }
}

/* --------------------------------------------------------------------------
   5. Standalone bold lines — lead paragraphs, labels, and FAQ questions
   Customizr's body font (Cantarell) renders its 700 weight barely heavier than
   its regular, so a paragraph that is entirely bold reads as ordinary text.
   That matters because the converted pages use exactly that pattern for the
   things a reader most needs to find: class times at the top of a page, step
   labels, and every FAQ question sitting above its answer.

   These paragraphs are tagged `.lia-label` at conversion time. An earlier
   version used `p > strong:only-child`, which was wrong: `:only-child` counts
   element children and ignores text nodes, so it also matched a bold phrase
   inside an ordinary sentence and broke it onto its own line.
   -------------------------------------------------------------------------- */

.entry-content p.lia-label {
    margin-top: 1.5em;
    margin-bottom: 0.35em;
}

.entry-content p.lia-label > strong {
    display: block;
    font-size: 1.08em;
    color: #2f2f2f;
    line-height: 1.45;
}

/* The answer that follows a question should sit tight under it. */
.entry-content p.lia-label + p {
    margin-top: 0;
}

/* The first one in a section shouldn't push away from its heading. */
.entry-content h2 + p.lia-label,
.entry-content h3 + p.lia-label {
    margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   6. Header call to action
   The "Try a Free Class" button now sits under the phone number in the header
   rather than in the menu (see functions.php section 4). Section 1's `.lia-cta`
   rules are kept only for a menu item you may add by hand with that class.
   -------------------------------------------------------------------------- */

.lia-header-cta {
    clear: both;
    text-align: right;
    margin: 4px 0 0;
    line-height: 1;
}

.lia-header-cta-link,
.lia-header-cta-link:link,
.lia-header-cta-link:visited {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 4px;
    background-color: #8f1d1d;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    text-shadow: none;
    transition: background-color 0.15s ease-in-out;
}

.lia-header-cta-link:hover,
.lia-header-cta-link:focus {
    background-color: #6f1616;
    color: #fff !important;
    text-decoration: none !important;
}

.lia-header-cta-link:focus-visible {
    outline: 2px solid #f0c419;
    outline-offset: 2px;
}

/* On the collapsed mobile header, centre it rather than hugging the edge. */
@media (max-width: 979px) {
    .lia-header-cta {
        text-align: center;
        margin: 10px 0 4px;
    }
}

/* --------------------------------------------------------------------------
   7. Centred navbar
   Customizr right-aligns the menu (`.pull-menu-right`): `.nav-collapse` floats
   right and the list floats left inside it. Clearing both floats and switching
   the items to inline-block lets the row centre in its container. The submenu
   keeps left-aligned text — it inherits `text-align: center` otherwise.
   Desktop only; below 979px Customizr swaps to the mobile toggle.
   -------------------------------------------------------------------------- */

@media (min-width: 980px) {
    .navbar .nav-collapse {
        float: none;
        width: auto;
    }

    .navbar .nav {
        float: none;
        text-align: center;
    }

    .navbar .nav > li {
        float: none;
        display: inline-block;
        vertical-align: middle;
    }

    .navbar .nav > li .dropdown-menu,
    .navbar .nav > li ul.sub-menu {
        text-align: left;
    }
}