/* ==========================================================================
   custom.css — Tong Fang Technovator
   --------------------------------------------------------------------------
   Styling that is NOT part of the approved HTML build.

   main.css and plugins.css are the build's own compiled files and are the
   contract with the client — never edit them. Anything the site needs on top,
   such as making a plugin's markup look like the design, is written here.

   This file is enqueued last (see tf_custom_styles() in functions.php,
   priority 101 — just after Ultimate Member's own 100) so it loads after the
   plugins' stylesheets. That is what lets these rules win without !important
   on every line.

   Values below are not invented — they are copied from the design's own
   .form-control, .custom-button and .pageTitle rules in main.css, so the
   plugin screens match the rest of the site at every breakpoint. If the
   design ever changes, update main.css and mirror the new values here.

   CONTENTS
     1. Ultimate Member — form fields
     2. Ultimate Member — labels and field spacing
     3. Ultimate Member — buttons
     4. Ultimate Member — the after-registration / restricted message
     5. Ultimate Member — Account page
     6. Ultimate Member — Profile page
   ========================================================================== */


/* 1. Ultimate Member — form fields
   --------------------------------------------------------------------------
   Ultimate Member ships 40px tall inputs with a 2px corner radius and a 15px
   font. The design's fields are 65px tall, fully rounded (50px) and 18px.
   Left alone, the Register, Login, Password Reset and Account forms look like
   a different website.

   One deliberate difference from .form-control: the design gives fields a
   WHITE border, because the only form in the build sits on a dark section. A
   white border on these white pages would make the field edge invisible, so a
   light grey is used instead. Focus colour is the design's own #5672F7.

   About the !important in this file — it is not decoration, and it is not
   applied by habit. Ultimate Member writes these particular properties with
   !important in its own stylesheets, so neither load order nor specificity
   can beat them:

       inputs        height, padding, font-size, border
       textarea      min-height
       labels        font-size
       buttons       height, padding, border-radius
       logout panel  max-width  (um-misc.min.css pins it at 300px)

   Every other rule here wins on load order alone. Before adding !important
   to anything new, check that the plugin really does force it — search its
   CSS for the property — rather than assuming.
   -------------------------------------------------------------------------- */
.um .um-form-field[type="text"],
.um .um-form-field[type="email"],
.um .um-form-field[type="password"],
.um .um-form-field[type="tel"],
.um .um-form-field[type="number"],
.um .um-form-field[type="url"],
.um select.um-form-field,
.um textarea.um-form-field {
    width: 100%;
    padding: 0 30px !important;
    border-radius: 50px;
    background: #ffffff;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 18px !important;
    font-weight: 400;
    box-shadow: none;
    outline: none;
    transition: all 0.2s linear;
}

.um .um-form-field[type="text"],
.um .um-form-field[type="email"],
.um .um-form-field[type="password"],
.um .um-form-field[type="tel"],
.um .um-form-field[type="number"],
.um .um-form-field[type="url"],
.um select.um-form-field {
    height: 65px !important;
    line-height: 63px;
}

/* A textarea cannot be a single fixed-height line, so it keeps the padding
   but gets a gentler radius — a 50px radius on a tall box clips the text. */
.um textarea.um-form-field {
    height: auto !important;
    min-height: 140px !important;
    padding: 20px 30px !important;
    border-radius: 30px;
    line-height: 27px;
}

/* The border needs its own rule. Ultimate Member sets
   `.um .um-form input[type="text"] { border: 1px solid #ddd !important }`,
   which is one step more specific than the selectors above — so the border
   and, more importantly, the design's #5672F7 focus colour would be lost.
   Matching its `.um .um-form input` shape makes the specificity equal, and
   custom.css loads later, so these win. */
.um .um-form input.um-form-field,
.um .um-form select.um-form-field,
.um .um-form textarea.um-form-field {
    border: 1px solid #E5E5E5 !important;
}

.um .um-form input.um-form-field:focus,
.um .um-form input.um-form-field:hover,
.um .um-form select.um-form-field:focus,
.um .um-form select.um-form-field:hover,
.um .um-form textarea.um-form-field:focus,
.um .um-form textarea.um-form-field:hover {
    border-color: #5672F7 !important;
    background: #ffffff;
    color: #000000;
}

.um .um-form-field::placeholder {
    color: #D5D5D5;
    opacity: 1;
}

/* The build drops fields to a smaller font and tighter padding on laptops and
   phones; these mirror .form-control's own breakpoints so the plugin forms
   shrink in step with the contact form. */
@media screen and (max-width: 1599.98px) {
    .um .um-form-field[type="text"],
    .um .um-form-field[type="email"],
    .um .um-form-field[type="password"],
    .um .um-form-field[type="tel"],
    .um .um-form-field[type="number"],
    .um .um-form-field[type="url"],
    .um select.um-form-field,
    .um textarea.um-form-field {
        padding: 0 20px !important;
        font-size: 14px !important;
    }

    .um .um-form-field[type="text"],
    .um .um-form-field[type="email"],
    .um .um-form-field[type="password"],
    .um .um-form-field[type="tel"],
    .um .um-form-field[type="number"],
    .um .um-form-field[type="url"],
    .um select.um-form-field {
        height: 55px !important;
        line-height: 53px;
    }

    .um textarea.um-form-field {
        min-height: 120px !important;
        padding: 16px 20px !important;
    }
}

@media screen and (max-width: 575.98px) {
    .um .um-form-field[type="text"],
    .um .um-form-field[type="email"],
    .um .um-form-field[type="password"],
    .um .um-form-field[type="tel"],
    .um .um-form-field[type="number"],
    .um .um-form-field[type="url"],
    .um select.um-form-field,
    .um textarea.um-form-field {
        font-size: 12px !important;
    }

    /* The design's .height-65 drops to a 40px box on phones. */
    .um .um-form-field[type="text"],
    .um .um-form-field[type="email"],
    .um .um-form-field[type="password"],
    .um .um-form-field[type="tel"],
    .um .um-form-field[type="number"],
    .um .um-form-field[type="url"],
    .um select.um-form-field {
        height: 40px !important;
        line-height: 38px;
    }

    .um textarea.um-form-field {
        min-height: 100px !important;
        padding: 12px 20px !important;
    }
}


/* 2. Ultimate Member — labels and field spacing
   --------------------------------------------------------------------------
   Ultimate Member stacks its fields with NO gap at all — on the Register form
   that is eight fields touching each other. The design's .form-group leaves
   35px between rows and 18px under each label.
   -------------------------------------------------------------------------- */
.um .um-form .um-field {
    margin-bottom: 35px;
    padding: 0;
}

/* The last field sits directly above the submit row, which brings its own
   space — a second gap here would leave an odd hole. */
.um .um-form .um-field:last-of-type {
    margin-bottom: 0;
}

.um .um-field-label {
    margin-bottom: 18px;
}

.um .um-field-label label {
    display: block;
    margin-bottom: 0;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 18px !important;
    font-weight: 700;
}

/* On a dark section the black label above disappears into the background.
   The design does the same thing — .form-group label is white on the dark
   contact section — so the rule follows it. loginSection2 is the only dark
   section with a plugin form on it today; add any others to this list.
   (That section is switched off at the moment: the Login page does not need
   a register form when /register/ exists. This keeps it readable if the
   client ever switches it back on.) */
.loginSection2 .um .um-field-label label {
    color: #ffffff;
}

/* Space above the Register / Login button. */
.um .um-col-alt,
.um .um-col-alt-b {
    margin-top: 35px;
}

@media screen and (max-width: 1599.98px) {
    .um .um-form .um-field {
        margin-bottom: 25px;
    }

    .um .um-field-label {
        margin-bottom: 12px;
    }

    .um .um-field-label label {
        font-size: 15px !important;
    }

    .um .um-col-alt,
    .um .um-col-alt-b {
        margin-top: 25px;
    }
}


/* 2b. Ultimate Member — form width on the members pages
   --------------------------------------------------------------------------
   Ultimate Member prints an inline <style> capping its form at 450px. The
   design's login form fills .login-formHolder, which main.css centres at
   1000px with the input at width:100% — so left alone the plugin's form comes
   out at under half the width the design asks for, which is what made it look
   small on desktop.

   Scoped to .login-formHolder, so it covers the Login page and the Members
   Form template and leaves a plugin form dropped anywhere else alone. The
   `body` prefix out-specifies the plugin's inline rule — see section 4.
   -------------------------------------------------------------------------- */
body .login-formHolder .um {
    max-width: 100%;
}

/* The button row.
   -------------------------------------------------------------------------- */
/* READ THIS BEFORE EDITING — it has already been broken once.
   Ultimate Member builds the last row out of FLOATS:

       <div class="um-left um-half">   Login    (float: left)
       <div class="um-right um-half">  Register (float: right)

   At 450px that reads as one pair. At 1000px the floats push them to opposite
   edges of the form, which looks wrong.

   The fix is to stop floating them AND make them inline-block in the same
   breath. Removing `float` on its own turns them into full-width blocks and
   they stack on top of each other — that is the bug that shipped. Whatever
   you change here, check afterwards that Login and Register are still on the
   same line and not overlapping, not just that the widths look right.

   The result matches the design, which centres its single button in
   `<div class="form-action text-center">` (login.html). */
.login-formHolder .um .um-col-alt {
    text-align: center;
}

.login-formHolder .um .um-col-alt .um-left,
.login-formHolder .um .um-col-alt .um-right {
    float: none;
    display: inline-block;
    width: auto;
    margin: 0 5px;
}

/* The "Keep me signed in" tick sits in the same row. Its box is positioned
   against the left edge of its own label, so centring the text alone would
   leave the box behind — centre the whole label instead and let it keep its
   own left alignment inside. */
.login-formHolder .um .um-col-alt .um-field-c .um-field-area {
    display: inline-block;
    text-align: left;
}


/* 2c. Ultimate Member — the "you are already signed in" panel
   --------------------------------------------------------------------------
   Visiting the Login page while signed in swaps the form for Ultimate
   Member's account panel (its logout.php template): an avatar, the display
   name, then "Your account" and "Logout" as a plain bulleted list. Unstyled
   it reads as a stray fragment sitting off to one side of the page.

   This centres it and turns the two links into the site's own buttons. The
   login copy and the Forgot Password link are hidden in PHP for this case —
   see template-login.php.
   -------------------------------------------------------------------------- */
/* Ultimate Member pins this panel at `max-width: 300px !important`
   (um-misc.min.css), which is too tight for the two buttons to sit side by
   side — hence the !important here. It is one of the forced properties listed
   in section 1. */
.login-formHolder .um.um-logout {
    max-width: 420px !important;
}

.login-formHolder .um-logout .um-form {
    margin: 0 auto;
    padding: 40px 30px;
    border: 1px solid #E5E5E5;
    border-radius: 30px;
    text-align: center;
}

.login-formHolder .um-logout .um-misc-img img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.login-formHolder .um-logout .um-misc-with-img strong {
    display: block;
    margin-top: 15px;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* The links are a <ul>; the design has no bullets anywhere. */
.login-formHolder .um-logout .um-misc-ul {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.login-formHolder .um-logout .um-misc-ul li {
    display: inline-block;
    margin: 5px;
    list-style: none;
}

.login-formHolder .um-logout .um-misc-ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 57px;
    padding: 0 30px;
    border-radius: 70px;
    background: #FDE059;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.login-formHolder .um-logout .um-misc-ul li a:hover {
    background: #5672F7;
    color: #ffffff;
}

@media screen and (max-width: 1599.98px) {
    .login-formHolder .um-logout .um-misc-ul li a {
        height: 40px;
        padding: 0 25px;
        font-size: 15px;
    }
}


/* 3. Ultimate Member — buttons
   --------------------------------------------------------------------------
   Matches .custom-button from the design: yellow with black text, pill shape,
   57px tall, turning blue with white text on hover. Ultimate Member's own
   button is a 47px blue rectangle, which reads as a leftover from the plugin.

   .um-alt is Ultimate Member's secondary button (for example "Cancel" on the
   Account page); it maps to the design's .button-secondary.
   -------------------------------------------------------------------------- */
.um .um-button,
.um input[type="submit"].um-button,
.um a.um-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 57px !important;
    padding: 0 30px !important;
    border: 0;
    border-radius: 70px !important;
    background: #FDE059;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    box-shadow: none;
    transition: all 0.2s;
}

.um .um-button:hover,
.um input[type="submit"].um-button:hover,
.um a.um-button:hover {
    background: #5672F7;
    color: #ffffff;
    text-decoration: none;
}

.um .um-button.um-alt,
.um a.um-button.um-alt {
    background: #5672F7;
    color: #ffffff;
}

.um .um-button.um-alt:hover,
.um a.um-button.um-alt:hover {
    background: #FDE059;
    color: #000000;
}

@media screen and (max-width: 1599.98px) {
    .um .um-button,
    .um input[type="submit"].um-button,
    .um a.um-button {
        height: 40px !important;
        padding: 0 25px !important;
        font-size: 15px;
    }
}


/* 4. Ultimate Member — the after-registration / restricted message
   --------------------------------------------------------------------------
   Ultimate Member prints an inline <style> setting the form wrapper to
   max-width: 450px. That is right for a form, but the same wrapper is reused
   for the "Thank you for registering" message, so a 64px heading was wrapping
   inside a 450px column in a 1460px container — the message the client
   reported as looking too small.

   :has() lets us widen the wrapper only when it holds a message and leave
   every form at 450px. The `body` prefix is there on purpose: Ultimate
   Member's rule is inline and later in the document, so this selector needs
   to be more specific than .um-533.um to win without !important.

   The heading uses the design's .pageTitle.md step (40 / 32 / 26), one size
   DOWN from the .pageTitle.lg page title above it. At .lg the two headings
   were the same size and competed with each other — the page title should
   stay the largest thing on the page.

   The restricted-page message is a different heading: it uses the theme's
   own .pageTitle.lg markup in template-restricted.php and has no page title
   above it, so it stays at .lg. Changing one does not change the other.
   -------------------------------------------------------------------------- */
body .um:has(.um-postmessage) {
    max-width: 860px;
}

.um .um-postmessage {
    padding: 0;
    border: 0;
    background: none;
    color: #5C5C5C;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
}

.um .um-postmessage h1,
.um .um-postmessage h2,
.um .um-postmessage h3 {
    margin-bottom: 20px;
    color: #000000;
    font-size: 40px;
    letter-spacing: -2.4px;
}

.um .um-postmessage p {
    margin-bottom: 20px;
}

.um .um-postmessage p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 1599.98px) {
    body .um:has(.um-postmessage) {
        max-width: 720px;
    }

    .um .um-postmessage h1,
    .um .um-postmessage h2,
    .um .um-postmessage h3 {
        font-size: 32px;
    }
}

@media screen and (max-width: 767.98px) {
    body .um:has(.um-postmessage) {
        max-width: 100%;
    }
}

@media screen and (max-width: 575.98px) {
    /* The page title itself drops to 27px here, so 26px would read as the
       same size — this is the design's matching .md step at this width. */
    .um .um-postmessage h1,
    .um .um-postmessage h2,
    .um .um-postmessage h3 {
        font-size: 22px;
        letter-spacing: -1px;
    }
}


/* 5. Ultimate Member — Account page
   --------------------------------------------------------------------------
   The Account screen is the plugin's own two-column layout (tab list on the
   left, form on the right). Fields and buttons are already handled above;
   this only adds breathing room between the two columns and under the tabs,
   which otherwise sit flush against each other.
   -------------------------------------------------------------------------- */
.um-account .um-account-main {
    padding-left: 30px;
}

.um-account .um-account-side li a {
    padding: 16px 20px;
}

/* Ultimate Member styles this as `.um-account-main div.um-account-heading`,
   so the selector here has to match that shape to be as specific. */
.um-account .um-account-main div.um-account-heading {
    margin-bottom: 25px;
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

@media screen and (max-width: 991.98px) {
    .um-account .um-account-main {
        padding-left: 0;
    }
}


/* 6. Ultimate Member — Profile page
   --------------------------------------------------------------------------
   The profile card is centred at the plugin's own 1000px, which sits fine
   inside the 1460px container. Only the typography needs bringing in line so
   the member's name and the field labels are not left in the plugin's default
   font stack.
   -------------------------------------------------------------------------- */
.um-profile .um-name a,
.um-profile .um-profile-headercontent .um-meta,
.um-profile .um-field-label label,
.um-profile .um-field-value {
    color: #5C5C5C;
    font-family: "Inter", sans-serif;
}

.um-profile .um-name a {
    color: #000000;
    font-size: 24px;
    font-weight: 700;
}

.um-profile .um-profile-nav {
    margin-bottom: 25px;
}