/* ==========================================================
   Contact Us page only
   ----------------------------------------------------------
   Loaded by resources/views/contact.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   THE FOUR CHAPTERS
   ----------------------------------------------------------
   Each block carries a different number of lines — Canada has
   two, the UK has five — so .equal-cards levels the row and
   this lets the block fill the height it is given.
   ---------------------------------------------------------- */
.chapter {
    height: 100%;
    padding: 24px 20px;
    background-color: #fff;
    border: 1px dashed #cfd4e4;
    border-radius: 20px;
}

.chapter h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    margin-bottom: 0;
}

.chapter-flag {
    width: 40px;
    height: 26px;
    object-fit: cover;
    border: 1px solid #e5e6ff;
}

.chapter hr {
    margin: 12px 0 16px;
}

.chapter p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 10px;
    word-break: break-word;
}

.chapter-registration {
    color: #757575;
}

.chapter-label {
    font-weight: 700;
    color: #302c51;
}


/* ----------------------------------------------------------
   THE FORM
   ----------------------------------------------------------
   The theme styles .form-group for the newsletter box, which
   puts an icon in a label positioned over the field. This form
   has plain labels above its fields instead.
   ---------------------------------------------------------- */
.contact-form .form-group {
    margin-bottom: 22px;
}

.contact-form label {
    display: block;
    position: static;
    font-weight: 600;
    font-size: 14px;
    color: #302c51;
    margin-bottom: 6px;
}

.contact-form .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e5e6ff;
    border-radius: 5px;
    background-color: #fff;
    color: #302c51;
}

.contact-form .form-control:focus {
    border-color: #ff6015;
    outline: 0;
}

.contact-form .invalid-feedback {
    display: block;
    font-size: 13px;
    color: #dc3545;
    margin-top: 4px;
}

/* Left there deliberately for robots to fill in — see the view */
.contact-form .website-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ----------------------------------------------------------
   THE MAP
   ---------------------------------------------------------- */
.contact-map {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: 0;
    border-radius: 5px;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Every rule below is scoped to body.home-premium, set by the
   \@section in the Blade file, so removing that one line puts
   the page back as it was.
   ========================================================== */


/* ----------------------------------------------------------
   THE FOUR CHAPTER BOXES
   ----------------------------------------------------------
   A dashed grey outline and a flat white fill: the one panel
   on the page that looked drawn rather than built, beside
   cards everywhere else carrying the theme's hairline, its
   26px radius and a soft shadow.

   These take the same card: the hairline in place of the
   dashes, the theme's radius and resting shadow, and on hover
   a 6px lift as the shadow deepens from --shadow-sm to
   --shadow-md. The padding grows to the 26px the theme gives
   a card's body.

   The lift needs the reveal off the box: while data-aos sat on
   .chapter itself, the theme's [data-aos].aos-animate rule
   pinned transform: translate3d(0,0,0) !important on it and no
   hover transform could take effect. It sits on the column
   now, and the two rules further down restore the stagger the
   theme gives a row of cards, which keys off data-aos being a
   descendant of the column and so no longer matches.
   ---------------------------------------------------------- */
body.home-premium .chapter {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

body.home-premium .chapter:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(2)[data-aos]:has(.chapter) {
    transition-delay: 110ms !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(3)[data-aos]:has(.chapter) {
    transition-delay: 220ms !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(4)[data-aos]:has(.chapter) {
    transition-delay: 330ms !important;
}


/* ----------------------------------------------------------
   THE COUNTRY NAME AND ITS FLAG, CENTRED
   ----------------------------------------------------------
   The h3 is already a flex row holding the name and the flag
   together, so one line centres the pair without separating
   them. The rule under it is centred to match, and the detail
   rows below stay ranged left -- they are an address and a
   set of labelled values, which read down a left edge.
   ---------------------------------------------------------- */
body.home-premium .chapter h3 {
    justify-content: center;
    text-align: center;
}

body.home-premium .chapter hr {
    width: 72px;
    height: 5px;
    margin: 16px auto 18px;
    border: 0;
    border-radius: 999px;
    opacity: 1;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}